Использование Fancybox, но световой короб не появляется - просто перенаправление на мои изображения - PullRequest
Новая
       50

Использование Fancybox, но световой короб не появляется - просто перенаправление на мои изображения

0 голосов
/ 07 января 2012

Я хочу использовать fancybox для показа изображений в моем портфолио. Однако я использую отображение вместо отдельных изображений, и я не уверен, что кодирую это правильно. Всякий раз, когда я нажимаю на изображение, оно перенаправляет изображение, которое полностью запрещает коды. Ранее я использовал картографию и лайтбоксы, но мне нужен был новый стиль, так как я хочу полностью переделать свой сайт.

Это мой результат: http://antonybearpark.co.uk/whiteweb/type.html

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

Мой предыдущий дизайн включен http://antonybearpark.co.uk/

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

Спасибо

Ответы [ 2 ]

0 голосов
/ 08 января 2012

У вас есть этот скрипт: 

$(".fancybox").fancybox({
 openEffect : 'none',
 closeEffect : 'none'
});

однако у вас нет элемента с class="fancybox".Это создает эту ошибку: 

Error: $(".fancybox").fancybox is not a function
Source File: http://antonybearpark.co.uk/whiteweb/type.html
Line: 99

, которая нарушает ваш код fancybox.Попробуйте удалить приведенный выше скрипт и отладить ошибки js, которые могут решить вашу проблему.

ОБНОВЛЕНИЕ 1:

Для галерей, использующих теги area map, вы должны добавить тот же атрибут data-fancybox-group вкаждый тег area, а не атрибут rel, поэтому вместо этого: 

<area shape="poly" class="fancybox-button" rel="fancybox-button"  ...

используйте это: 

<area shape="poly" class="fancybox-button" data-fancybox-group="fancybox-button" ...

Для разных галерей просто используйте другое значение дляатрибут data-fancybox-group.Например:

Галерея 01: 

<area shape="poly" class="fancybox-button" data-fancybox-group="gallery01" ...
<area shape="poly" class="fancybox-button" data-fancybox-group="gallery01" ...

Галерея 02 (с использованием другой карты) 

<area shape="poly" class="fancybox-button" data-fancybox-group="gallery02" ...
<area shape="poly" class="fancybox-button" data-fancybox-group="gallery02" ...
0 голосов
/ 07 января 2012

В вашем javascript вы нацелены только на родителей.$(".fancybox-button").fancybox({...});

У меня были лучшие результаты при использовании контейнера, как вы сделали, но также при использовании 'each': 

$(".hero img").each(function() {
 $(".hero a").fancybox({
 'transitionIn' : 'fade',
 'transitionOut' : 'fade'
...
...
});

Где все мои изображения имеют общий 'rel'tag 

<div class="hero">
    <a rel="client" href="#"><img src=...></a>
    <a rel="client" href="#"><img src=...></a>
    <a rel="client" href="#"><img src=...></a>
</div>

hth

...