как запустить галерею fancybox с динамическим содержимым

Я тестирую fancybox, выглядит неплохой маленькой библиотекой для галерей и загрузки контента. У меня есть следующий код, который работает ниже, однако мне нужно, чтобы он запускал галерею, как только я нажимаю на элемент с классом лайтбокса. Приведенный ниже код загружает контент из галереи.htm в div контента, а затем, когда я нажимаю на миниатюру из моего div контента, он запускает fancybox. Что я пытаюсь сделать, так это одним щелчком мыши загрузить мой динамический контент и запустить причудливую коробку, кто-нибудь посоветует мне, пожалуйста?

$(document).ready(function(){
$('.lightbox').live('click', function(e){
    e.preventDefault();
    //var url = $(this).attr('href');
    var url = "gallery.htm";
    $('#content').load(url, function(data, stat, req){
        $("a.lightbox").fancybox();
    });
})

});

Спасибо


jquery fancybox fancybox-2
person JK36    schedule 11.06.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В основном вам понадобятся два селектора:

1). один для загрузки миниатюр галереи на страницу с использованием метода .load(), например. loadGallery:

<a href="javascript:;" class="loadGallery">add dynamic gallery thumbnails</a>

2). другой для привязки элементов к fancybox, например. lightbox. Все элементы в файле "gallery.htm" должны иметь такие class, как:

<a class="lightbox" rel="gallery1" href="images/01.jpg"><img src="images/01t.jpg" alt="" /></a>
<a class="lightbox" rel="gallery1" href="images/02.jpg"><img src="images/02t.jpg" alt="" /></a>
<a class="lightbox" rel="gallery1" href="images/03.jpg"><img src="images/03t.jpg" alt="" /></a>

Затем привяжите эти элементы (на своей главной странице) к fancybox с помощью одного сценария, загрузите миниатюры галереи на страницу и запустите галерею fancybox в том же click, с другим, например:

$(document).ready(function(){
 // bind elements to fancybox
 $(".lightbox").fancybox();
 // load thumbnails and fire fancybox gallery
 $('.loadGallery').on('click', function(e){
  e.preventDefault();
  var url = "gallery.htm";
  $('#content').load(url, function(data, stat, req){
   $(".lightbox").eq(0).trigger("click");
  }); // load
  $(this).remove(); // you may remove the selector loadGallery after loading the thumbnails
 }); // on
}); // ready

Обратите внимание, что мы используем .on() вместо .live(), так как второй устарел. Однако для метода .on() требуется jQuery 1.7+.

Также обратите внимание, что мы использовали .eq(0), чтобы начать галерею с первого элемента, иначе галерея начнется с последнего элемента, присоединенного к документу.

ОБНОВЛЕНИЕ: посмотрите, как это работает здесь DEMO

person JFK    schedule 11.06.2012
comment
Привет, JFK, попробовал это, но он говорит, что запрошенный контент не может быть загружен. У меня есть предупреждение, чтобы увидеть, что загружается в #content, и действительно, все теги изображений имеют правильный атрибут rel. Заранее спасибо :) - person JK36; 12.06.2012
comment
Мне удалось заставить что-то работать с вашим кодом, однако это не работает в FireFox. Можете ли вы помочь мне с этим, пожалуйста? Вот ссылка stackoverflow.com/questions/11000279/ - person JK36; 12.06.2012
comment
Я не думаю, что было хорошей идеей открывать новый вопрос, так как все может запутаться (мы могли бы отсортировать все в этом вопросе). В другом вопросе вы используете один и тот же селектор, когда я посоветовал вам использовать два разных. . - person JFK; 12.06.2012
comment
Привет, JFK, извиняюсь, я думал, что на работе взломал другой код, пока не отключил FF - и все испортилось. Пробовал дома, IE не работает, FF и Chrome тоже. Так что я думаю, что вернусь к основам и поработаю с этим кодом, а также отвечу в другой ветке, чтобы никому не тратить время. Хорошо, переделайте мою страницу с вашим кодом, похоже, что контент загружается на мою страницу, однако, когда запускается fancybox, появляется запрошенный контент, который не может быть загружен, попробуйте еще раз. - person JK36; 12.06.2012
comment
Смотрите мое ОБНОВЛЕНИЕ в ответе, я добавил DEMO, чтобы вы могли сравнить код. - person JFK; 12.06.2012
comment
Спасибо, вы звезда. Если бы код был точно таким же, как у вас, однако у меня была тестовая ссылка внизу страницы с классом fancybox, который я не удалил, не понял, что это будет иметь значение, всегда помогает вернуться к основам :) Еще раз спасибо за помощь :) - person JK36; 12.06.2012

arrow_upward
0
arrow_downward

Я бы сделал запрос Aajax, который вернул бы ответ JSON, содержащий элементы галереи. Затем я бы открыл fancybox вручную (например, $.fancybox.open(ответ); где ответ будет выглядеть как [{href: ''},{href:''}])

person Janis    schedule 13.06.2012
comment
Привет, Янис, я решил свою первоначальную проблему с помощью решения JFK. Однако я столкнулся с другим плагином, который хотел бы использовать для чего-то другого, но требует ответа json. Я знаю, как вернуть ответы в формате html, но как преобразовать их в json для использования с этими плагинами? Есть ли библиотека, к которой мне нужно получить доступ, или что-то еще? - person JK36; 16.06.2012
comment
Если ваш ответ представляет собой данные, закодированные в формате JSON (например, с использованием json_encode в php), вы можете сделать так: .open(данные);} }); - person Janis; 17.06.2012
comment
Спасибо, не знал, что есть такая библиотека, как JSON-encoded, к которой я мог бы подключиться. Я нашел эквивалент для asp :) - постараюсь выяснить, как ее использовать :) - person JK36; 18.06.2012