1

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

画廊查看插件网址：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>");

    }
   });

  });

//图库查看图片//

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

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

1 回答 1

0

问题是，动态元素是在 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
        });
    })
    });
于 2013-06-20T13:30:43.643 回答