Loading images content dynamically from url in Gallery View plugin

问题

i am using jQuery GalleryView plugin for displaying images in webpage. The images are loaded from url link that is provided in xml, is because no of image are random, i am using jQuery to read all links, then validate and then ask GalleryView to display, however it seem GalleryView not responding to dynamically created but if i hardcore the images URL link in HTML page, then it works... I am trying to call plugin in done function of Ajax many thanks in advance...

galleryView plugin url : http://www.techrepublic.com/blog/webmaster/plug-in-galleryview-with-jquery-on-your-website/2079

//html code that is generated by jQuery----//

<div id="selectedPropertyImg_Wrapper"> 
 <div>
  <ul id="myGallery">

    <li><img src="http://www.estatesit.com/data/demoagent/photos/demo1-000069-p-w-13.jpg/"></li>
   <li><img src="http://www.estatesit.com/data/demoagent/photos/demo1-000036-p-w-2.jpg/"></li>
   <li><img src="http://www.estatesit.com/data/demoagent/photos/demo1-000036-p-w-3.jpg/"></li>

  </ul>
 </div>
</div>

//--------jQuery-----

    $(this).find('photo').each(function (index) {

    PropertyDetail.d_img_urlname[index] = $(this).find('urlname');

    $("<img>", {
      src: PropertyDetail.d_img_urlname[index].text(),

   error: function () {

   PropertyDetail.d_img_urlname.splice($.inArray(PropertyDetail.d_img_urlname[index]), 1);
   },

   load: function (){                    

    $("#selectedPropertyImg_Wrapper").find("#myGallery").append("<li><img src=" + PropertyDetail.d_img_urlname[index].text() + "/></li>");

    }
   });

  });

//GalleryView images//

   ajax code....
   }).done(function () {

        $(function () {
            $('#myGallery').galleryView({
                panel_width: 750,
                panel_height: 500,
                frame_width: 100,
                frame_height: 67
            });
        })
    });

回答1:

the problem is, the dynamic elements are created after dom is ready and that is why your galleryView not finding the li tag along with url for images. use separate jquery plugin that only read and validate URL for images in Ajax function, also ensure this Ajax call must be async:false so that it enforce to finish before anything further call in program. now in your document.ready call this plugin before others functions and $('#myGallery').galleryView.

$.fn.initImages = function()
 {
  $.ajax({
    type: "GET",
    url: "XMLFile.xml",
    dataType: xml,
    async:false,
    success: function (xml) {

                       //read images from url
                       // validate images//
                       // store valid urls in obj= a1//

   $(this).find('photo').each(function (index) {

      $("#selectedPropertyImg_Wrapper").find("#myGallery").append("<li><img src= " + a1[index].text() + " /></li>");

               });
            }
        });
     }

now in your html call this function before galleryView plugin function

      $(document).ready(function(){

        $(this).initImages();

        //call gallery now//

        $(function () {
        $('#myGallery').galleryView({
            panel_width: 750,
            panel_height: 500,
            frame_width: 100,
            frame_height: 67
        });
    })
    });

来源：https://stackoverflow.com/questions/17173595/loading-images-content-dynamically-from-url-in-gallery-view-plugin

标签

jquery

html5

galleryview