1

Webページに画像を表示するためにjQuery GalleryViewプラグインを使用しています。画像はxmlで提供されるURLリンクからロードされます。ランダムな画像がないためです。jQueryを使用してすべてのリンクを読み取り、検証してからGalleryViewに表示を依頼していますが、GalleryViewは動的に作成されたものに応答していないようですが、 HTMLページで画像のURLリンクをハードコアすると、機能します... Ajaxのdone関数でプラグインを呼び出そうとしています...

galleryView プラグインの URL : 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
            });
        })
    });
4

1 に答える 1

0

問題は、dom の準備ができた後に動的要素が作成されるため、galleryView が画像の URL とともに li タグを見つけられないことです。Ajax関数で画像のURLのみを読み取って検証する別のjqueryプラグインを使用し、この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 に答える