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

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

2 голосов
/ 19 мая 2011


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

EDIT:
Вот jQuery, который запускается при загрузке страницы: 

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

Ответы [ 2 ]

3 голосов
/ 04 июня 2011

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

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

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

$('ul.image-gallery .roundabout-in-focus a').live('click',function(event){
event.preventDefault();
$.fancybox({'href':$(this).attr('href')});
})
0 голосов
/ 03 июня 2011

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

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

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

...