Интеграция fancybox в galleriffic

Я хотел бы интегрировать некоторые функции fancybox в galleriffic. В основном я хочу иметь галерею изображений с соответствующими миниатюрами, используя galleriffic. Помимо стилей мой подход очень похож на: http://www.twospy.com/galleriffic/example-2.html Кроме того, я хочу иметь возможность увеличивать отображаемое изображение. Для этой цели я использую fancybox. Пример его поведения можно найти здесь http://fancyapps.com/fancybox/demo/.

Мне удалось сделать то, что я описал выше, немного изменив функцию galleriffic buildImage, оставив ее следующим образом:

.append('<span class="image-wrapper current"><a class="advance-link fancybox" rel="group" href="'+imageData.image.src+'" title="'+imageData.title+'">&nbsp;</a></span>')

Теперь galleriffic добавляет класс fancybox, необходимый fancybox, а также источник изображения. Это прекрасно работает.

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

Проблема, которую я здесь обнаружил, заключается в том, что galleriffic создает a class="fancybox" только для изображения, миниатюра которого была нажата. Это приводит к тому, что fancybox может найти только одно изображение в галерее. Я не хочу определять класс fancybox для , которые определяют большие пальцы для galleriffic, потому что я не хочу, чтобы изображения увеличивались при нажатии на миниатюру, а на основное изображение.

В некотором смысле мне нужно сгенерировать все с помощью класса fancybox, но скрыть все, что не показано, вместо того, чтобы каждый раз генерировать тот, который мне нужен, через galleriffic. Это единственное решение, которое я могу придумать, но оно не аккуратное. Мне нравится, как galleriffic генерирует основное изображение каждый раз, когда нажимается миниатюра.

Мне интересно, может ли кто-нибудь придумать более приятное решение. Например, fancybox может узнать, какое изображение будет следующим, выполнив поиск в миниатюре следующей галереи.

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

Спасибо за попытку!


javascript jquery fancybox fancybox-2 galleriffic
person mezod    schedule 14.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я попробовал ваш метод выше, отредактировав функцию BuildImage, как и вы. У меня он успешно связывается с изображением, но не загружается в FancyBox.

У меня есть этот код в основном файле:

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

Вы успешно совместили их, верно?

person Seth    schedule 25.10.2013
comment
У меня есть урезанная версия, с которой я не могу работать здесь: hartmancox.com/ тест/проекты/index.html - person Seth; 26.10.2013
comment
вау, извини, Сет, я не знаю, как я не заметил твой ответ раньше, новые системы уведомлений заставили меня увидеть это сейчас. Надеюсь, еще не поздно. Я так и не решил эту проблему, но вы можете найти пример того, как я успешно объединил их здесь: galeriacontrast.com/ca/artist/pavel-amilcar/works (надеемся, что еще не поздно применить его на своем сайте!!) - person mezod; 16.01.2014