Question

我正在使用jQuery GalleryView插件在网页中显示图片。图像是从xml中提供的url链接加载的，因为没有图像是随机的，我使用jQuery读取所有链接，然后验证然后要求GalleryView显示，但是看起来GalleryView没有响应动态创建但是如果我硬核HTML页面中的图像URL链接，然后它工作...我试图在Ajax的完成功能中调用插件非常感谢...

galleryView插件网址：http://www.techrepublic.com/blog/webmaster/plug-in-galleryview-with-jquery-on-your-website/2079

//由jQuery ---- //

生成的html代码

<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图像//

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

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

Answer 1

问题是，动态元素是在dom准备就绪后创建的，这就是为什么你的galleryView没有找到li标签以及图像的url。使用单独的jquery插件，只读取和验证Ajax函数中的图像的URL，同时确保此Ajax调用必须是async：false，以便在程序中进一步调用之前强制执行。现在在你的document.ready中调用这个插件之前的其他函数和$（'＃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>");

               });
            }
        });
     }

现在你的html在galleryView插件函数之前调用这个函数

      $(document).ready(function(){

        $(this).initImages();

        //call gallery now//

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

从Gallery View插件中的url动态加载图像内容

1 个答案: