locked
listview and select a photo

    Question

  • I hav a list of listview photos. It is working.I want to select one photo and display it. They all seem to use fileopenpicker.

    default.html
    <body>
      <div id="tmpl" data-win-control="WinJS.Binding.Template">
        <section>
          <img src="#" data-win-bind="src: url" />
          <div>
            <span class="name" data-win-bind="innerText: name"></span>
            <br />
            <span class="date" data-win-bind="innerText: date"></span>
          </div>
        </section>
      </div>
     <div id="host">
        <div id="lv" data-win-control="WinJS.UI.ListView"
                     data-win-options="{ itemDataSource: data.items.dataSource,
                                         itemTemplate: select('#tmpl'),
                                         layout: {type: WinJS.UI.GridLayout} }" />
        </div>

        <div id="onephoto" class="dicdisp">
            <img id="picphoto" src="images/ .png" />
        </div>

    .picdisp {
      overflow: auto;
      -ms-content-zooming: zoom;
      -ms-content-zoom-limit-min: 10%;
      -ms-content-zoom-limit-max: 500%;
      width: 100%;
      height: 100%; }

    In default.js
            var lv = document.getElementById('lv').winControl; 
            var lis = addEventListener("click", getclick, false); 

    function getclick() {
            var esrc = window.event.srcElement;
            var reader = new FileReader();

          //  var aphoto = reader.readAsDataURL(esrc.src); not working
          //  reader.readAsText(esrc.src);   not working

            var imageBlob = esrc.src;
            photoObject.src = imageBlob;
            document.getElementById("picphoto").innerHTML = photoObject;

    }

    Friday, April 26, 2013 3:09 AM

Answers

  • Thank you for the help. It is working now.

     <div id="host">

      <div id="host">
        <div id="lv" data-win-control="WinJS.UI.ListView"
                     data-win-options="{ itemDataSource: data.items.dataSource,
                                         itemTemplate: select('#tmpl'),
                                         layout: {type: WinJS.UI.GridLayout} }" />
        </div>

        <img id="picphoto" src="images/logo.png" />

            var lis = addEventListener("click", getclick, false);

        function getclick() {
            var esrc = window.event.srcElement;
            document.getElementById("picphoto").src = esrc.src;
        }

    • Marked as answer by my-ped01 Friday, April 26, 2013 11:55 PM
    Friday, April 26, 2013 11:55 PM

All replies

  • Try this after setting the esrc variable:

    document.getElementById("picphoto").src = esrc.src;

    Friday, April 26, 2013 1:20 PM
  • Thank you for the help. It is working now.

     <div id="host">

      <div id="host">
        <div id="lv" data-win-control="WinJS.UI.ListView"
                     data-win-options="{ itemDataSource: data.items.dataSource,
                                         itemTemplate: select('#tmpl'),
                                         layout: {type: WinJS.UI.GridLayout} }" />
        </div>

        <img id="picphoto" src="images/logo.png" />

            var lis = addEventListener("click", getclick, false);

        function getclick() {
            var esrc = window.event.srcElement;
            document.getElementById("picphoto").src = esrc.src;
        }

    • Marked as answer by my-ped01 Friday, April 26, 2013 11:55 PM
    Friday, April 26, 2013 11:55 PM