2013-06-18 2 views
2

Я использую плагин jQuery GalleryView для отображения изображений на веб-странице. Изображения загружаются из ссылки url, которая предоставляется в xml, потому что ни один из изображений не является случайным, я использую jQuery для чтения всех ссылок, затем проверяю, а затем запрашиваю отображение GalleryView, однако, похоже, GalleryView не отвечает динамически созданному, но если я хардкорных ссылку изображения URL в HTML странице, то он работает ... Я пытаюсь вызвать плагин в проделанной функции Ajax заранее большое спасибо ...Загрузка изображений динамически из url в плагин Gallery View

galleryView плагин URL: http://www.techrepublic.com/blog/webmaster/plug-in-galleryview-with-jquery-on-your-website/2079

// html код, который генерируется 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 изображения //

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

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

вам нужно добавить элемент DOM (в вашем случае, дополнительный литий тегов), перед выполнением сценария плагин. – blackhawk

+0

где я должен добавить тег li ??? – toxic

+0

У меня есть проверка, мои динамически созданные теги li недоступны, когда jquery galleryView подключается к плагину ??? как я могу обеспечить доступность динамического элемента до того, как Dom будет готов – toxic

ответ

1

проблема, динамические элементы создаются после того, как дом готов, и именно поэтому ваш galleryView не поиск тега li вместе с url для изображений. используйте отдельный плагин jquery, который только читает и проверяет URL-адрес изображений в функции Ajax, также убедитесь, что этот вызов Ajax должен быть асинхронным: false, чтобы он принудительно завершил работу перед тем, как продолжить вызов в программе. теперь в вашем документе. Теперь вызывается этот плагин перед другими функциями и $ ('# 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 
     }); 
    }) 
    }); 
Смежные вопросы