Плагин галереи jQuery с динамически загружаемыми изображениями

Я использую плагин Galleria с jQuery для создания галереи изображений. Я пытаюсь динамически загружать изображения из выбора пользователя в DOM и автоматически обновлять галерею для отображения этих новых изображений, но это не работает.

Firebug показывает, что изображения успешно загружаются в DOM, но Galleria не отображает эскизы. Мне нужен способ перезагрузить Galleria для отображения новых изображений.

/* ---- Gallery Code ---- */
if ($(this).find('div').attr('title') == 'photogallery' && $('.galleria_container').length == 0)
{
   $('.gallery').galleria(
   {
      history   : false,
      clickNext : true,
      onImage   : function(image,caption,thumb) 
      { 
         if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) 
         {
            image.css('display','none').fadeIn(1000);
         }

         var _li = thumb.parents('li');

         caption.css('display','none').fadeIn(1000);
         _li.siblings().children('img.selected').fadeTo(500,0.3);
         thumb.fadeTo('fast',1).addClass('selected');
         image.attr('title','Next image >>');
      },
      onThumb : function(thumb) 
      { 
        var _li = thumb.parents('li');
        var _fadeTo = _li.is('.active') ? '1' : '0.3';

        thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
        thumb.hover
        (
           function() { thumb.fadeTo('fast',1); },
           function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
        )
     }
  });
}

/* ---- Gallery Selector ---- */
$(document).ready(function()
{
   var galleryImages = new Object();

   <?php
   echo $myGal;
   ?>

   function setImages(type)
   {
      var image = '';

      for (var i = 0; i < galleryImages[type].length; i++)
      {
         image += '<li><img src="' + galleryImages[type][i] + '"></li>';
      }

      $('ul.gallery').html(image);
   }

   $('ul.menu-horiz li ul li').click(function()
   {
      setImages($(this).attr('rel'));
   });
});

Код PHP, который вы видите, просто создает массив изображений.

Итак, резюмируя мой вопрос: как я могу перезагрузить Galleria после того, как новые изображения были загружены в DOM?


image jquery dom reload
person panas    schedule 17.11.2009    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете посмотреть плагин LiveQuery. Он привязывает функцию к элементу таким образом, что она срабатывает даже при изменении DOM.

person Vincent Ramdhanie    schedule 17.11.2009
comment
Я задал аналогичный вопрос относительно извлечения другой галереи с помощью AJAX и ее запуска. Кто-то порекомендовал плагин LiveQuery. Но сайт, который я кодирую, настроен на использование аккордеона, так что это весь динамический контент. После инициализации Galleria все готово. Больше не загружается страница. Так что LiveQuery не будет иметь никакого значения в этом вопросе, не так ли? Как я могу использовать LiveQuery, чтобы (на статической странице - index.php) перезагрузить уже инициализированную галерею, чтобы включить новые изображения? :/ - person panas; 17.11.2009