Gallery View 플러그인의 URL에서 동적으로 이미지 컨텐츠로드

Question

웹 페이지에 이미지를 표시하기 위해 jQuery GalleryView 플러그인을 사용하고 있습니다. 이미지는 XML에서 제공되는 URL 링크에서로드됩니다. 이미지가 무작위이기 때문에 jQuery를 사용하여 모든 링크를 읽은 다음 유효성을 검사하고 GalleryView에 표시하도록 요청했지만 GalleryView는 동적으로 생성 된 응답에 응답하지 않는 것처럼 보입니다. 내가 그때 내가

galleryView 플러그인 URL ... 아약스 사전에 많은 감사의 수행 기능에 플러그인을 호출하려고 ... 작동, HTML 페이지의 이미지 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 이미지 //

문제는, 동적 요소는 DOM이 준비 후 생성하고 그 이유를 galleryView 아니다된다됩니다

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

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

Answer 1

이미지에 대한 URL과 함께 li 태그를 찾습니다. 별도의 jquery 플러그인을 사용하여 Ajax 함수의 이미지에 대한 URL을 읽고 유효성을 검사하며, Ajax 호출이 async : false 여야 함을 확인하여 프로그램에서 더 이상 호출하기 전에 완료하도록하십시오. 이제 document.ready에서 다른 플러그인과 $ ('# myGallery'). galleryView 전에이 플러그인을 호출하십시오. 당신의 HTML 통화에서 지금

$.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>"); 

       }); 
      } 
     }); 
    } 

galleryView 플러그인 기능

 $(document).ready(function(){ 

     $(this).initImages(); 

     //call gallery now// 

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