Fancybox не инициализируется при нажатии на изображение

Fancybox не инициализируется, он только открывает файл изображения в браузере.

Я работаю над галереей портфолио для художника-татуировщика и использую Fancybox для отображения изображений, однако, когда я нажимаю на изображения, он просто переходит к файлу изображения на сервере, и лайтбокс не отображается. У меня все подключено правильно, ошибок нет. Это слишком долго сводило меня с ума. Любая помощь горячо приветствуется.

Веб-сайт: http://jessetattoo.com/testing/portfolio.html


person Megan Fiona Simpson    schedule 06.08.2013    source источник
comment
Мой браузер печатает кучу сообщений 404 Not Found для файлов, которые должны находиться в jessetattoo.com/fancybox/source. и jessetattoo.com/fancybox/lib, и в результате этого $(...).fancybox не является функцией.   -  person Abrixas2    schedule 06.08.2013
comment
Я бы предложил добавить их, а затем вернуться, если у вас все еще есть проблема. Не забывайте про CSS, без него fancybox всегда не работает.   -  person putvande    schedule 06.08.2013
comment
Ваши вызовы файлов fancybox (например, /fancybox/source/jquery.fancybox.pack.js) возвращают 404 ошибки .... поэтому файлы находятся не в том месте, где вы указали в своем документе.   -  person JFK    schedule 06.08.2013
comment
Они оказались здесь jessetattoo.com/testing/fancybox/source/jquery. .fancybox.pack.js (в подкаталоге testing), поэтому вы либо используете относительные пути, либо исправляете абсолютные пути.   -  person JFK    schedule 06.08.2013


Ответы (2)


я просматриваю сайт и выдает следующую ошибку:

Uncaught TypeError: объект [object Object] не имеет метода 'fancybox'

это может быть из-за неправильного сценария загрузки. Вижу в шапке документа и этот скрипт пустой:

<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js"></script> 

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

person RokumDev    schedule 06.08.2013

На странице две проблемы:

  1. Как указано в комментариях выше, пути к файлам скрипта и таблицы стилей неверны, они должны быть /testing/fancybox/... или fancybox/....
  2. В сценарии, который вы используете на странице, вы обращаетесь к изображениям, используя $("a.group"). Вместо этого вы должны использовать $("a.fancybox"), потому что используемый вами селектор работает со значением class, а не со значением rel (документация).

Альтернативным подходом для второго пункта может быть использование $('a[rel="group"]') в качестве селектора элемента (документация документация).

person Abrixas2    schedule 06.08.2013
comment
У меня все заработало, спасибо @Abrixas2! Я изменил $(a.group) на $(a.fancybox), и это сработало. - person Megan Fiona Simpson; 07.08.2013