Как интегрировать галерею изображений, созданную с помощью Roundabout, с Fancybox?


Я пытаюсь создать компактную галерею изображений с помощью плагина Roundabout.

Карусель должна вращать миниатюры и, только по щелчку, открывать увеличенное изображение во всплывающем окне Fancybox только для изображения.

Вот так выглядит разметка:

<ul class="image-gallery">
    <li id="img-1"><a href="images/picture1.jpg"><img src="images/th2_picture1.jpg" alt="picture 1" /></a></li>
    <li id="img-2"><a href="images/picture2.jpg"><img src="images/th2_picture2.jpg" alt="picture 2" /></a></li>
    <li id="img-3"><a href="images/picture3.jpg"><img src="images/th2_picture3.jpg" alt="picture 3" /></a></li>
    <li id="img-4"><a href="images/picture4.jpg"><img src="images/th2_picture4.jpg" alt="picture 4" /></a></li>
    <li id="img-5"><a href="images/picture5.jpg"><img src="images/th2_picture5.jpg" alt="picture 5" /></a></li>
    <li id="img-6"><a href="images/picture6.jpg"><img src="images/th2_picture6.jpg" alt="picture 6" /></a></li>
</ul>

Проблема в том, что если я попытаюсь активировать Roundabout и Fancybox на изображениях, нажатие на них вызовет как поворот, так и всплывающее окно, независимо от того, на каком изображении я щелкнул. Вместо этого всплывающее окно должно быть активным только для изображения, которое в данный момент находится в фокусе.
Я не могу отменить привязку события click к миниатюрам, потому что это также отключило бы вращение. Это ссылка на пример страницы (галерея находится внизу страницы).

РЕДАКТИРОВАТЬ:
Вот jQuery, который запускается при загрузке страницы:

$(function() {
    $('ul.image-gallery').roundabout({
        duration: 1200
    });
    $('ul.image-gallery a').fancybox();
});
Источник

2 ответа

Решение

Хорошо, после проверки страницы, которую вы упомянули, фокусное изображение имеет обходной класс, поэтому следующее может решить эту проблему. попытайся

$(function() {
    $('ul.image-gallery').roundabout({
        duration: 1200
    });
    //$('ul.image-gallery .roundabout-in-focus a').fancybox();
});

Редактировать: попробуйте отобразить событие клика по ссылке с сфокусированным изображением и вручную открыть fancybox для ссылки. Также удалите отображение fancybox в вышеуказанной функции. (Я прокомментировал это в коде)

$('ul.image-gallery .roundabout-in-focus a').live('click',function(event){
event.preventDefault();
$.fancybox({'href':$(this).attr('href')});
})
Источник

В дополнение к тому, что варианты вы

$('ul.image-gallery').find('li').focus(function() {
        $(this).find('a').fancybox.cancel();
    }
});

Это предполагает, что вы используете кольцевую развязку на ul и fancybox на тегах привязки внутри них. Когда карусель дает фокус на li, он отменяет причудливый ящик, который будет делать то же самое.

Источник
Другие вопросы по тегам