Как интегрировать галерею изображений, созданную с помощью 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, он отменяет причудливый ящик, который будет делать то же самое.