Разместить галерею за одной картинкой в Fancybox

Кратко.

Это элементарно! :) Нужно ко всем картинкам галереи добавить class="fancybox". Пример, таящий за одной картинкой-миниатюрой 5 картинок:

<a class="fancybox" rel="g1" href="big_image1.jpg"><img src="small_image.jpg"></a>
<a class="fancybox" rel="g1" href="big_image2.jpg"></a>
<a class="fancybox" rel="g1" href="big_image3.jpg"></a>
<a class="fancybox" rel="g1" href="big_image4.jpg"></a>
<a class="fancybox" rel="g1" href="big_image5.jpg"></a>

Подробно.

Инструкция выше — для установленного в WordPress плагина Fancybox 2.7.5.

Селектор class обязательно должен быть равен "fancybox" и никак иначе! Название можно и изменить, но по умолчанию оно — «fancybox» и плагин будет обрабатывать ссылки с картинками только с таким классом. Далее идет атрибут rel — он определяет принадлежность картинок к определенной галерее, и без него галерея не соберется воедино. Т.е., если у всех картинок будет rel="gallery1", то все они соберутся в одну галерею. Если у какой-то будет rel с другим значением, то картинка попадет уже в другую галерею. Таким образом class="fancybox" показывает, что данную картинку нужно обработать плагином Fancybox. При обработке плагин смотрит на значение rel и по нему определяет какая картинка к какой галерее принадлежит.

Теперь касательно настроек самого Fancybox. Для того, чтобы он не мешал все галереи на странице в одну кучу, а разделял их с помощью параметра «rel» — нужно зайти в консоль WordPress, в параметрах выбрать «Fancybox for WP» и на закладке «Gallery» выбрать пункт «Do not group images in gallery automatically (use this if you want to make galleries manually with the REL attribute)»

Немного практики. Разместим галерею здесь с помощью этого кода:

<a class="fancybox" rel="sq5" href="/wp-content/uploads/2011/10/sq5_1.gif">
<img src="/wp-content/uploads/2011/10/sq5_logo.jpg"></a>
<a class="fancybox" rel="sq5" href="/wp-content/uploads/2011/10/sq5_2.jpg"></a>
<a class="fancybox" rel="sq5" href="/wp-content/uploads/2011/10/sq5_3.jpg"></a>
<a class="fancybox" rel="sq5" title="Ну и наконец - конец! ;)" href="/wp-content/uploads/2011/10/sq5_4.gif"></a>

Всё, как в том кратком примере, только с настоящими картинками. Плюс в последней картинке я добавил параметр «title». Этим параметром можно добавлять комментарий к картинке. А получилось вот что:

Лирика.

Что это и кому нужно? Зачем это здесь? Fancybox — это плагин для WordPress для отображения галерей в красивых окнах с перелистыванием, подписями и т.д. У данного плагина широкие возможности, одна из которых — открывать галерею после щелчка по картинке-миниатюре (превью, маленькой картинке, или просто по текстовой ссылке). Допустим, вы публикуете книжку. На сайте красуется обложка. Вы нажимаете на обложку — всплывает первая страница книги и далее можно листать впред/назад к следующим/предыдущим страницам книги. Удобно? Красота! На официальном сайте плагина красуются различные вариации, показывающие его возможности. В том числе и описанная выше возможность в самом низу в разделе «Examples of manual call». В разделе «How to use» есть описания некоторых примеров и фишек, но вот беда — описания именно этого примера (на момент написания статьи) — нет! Да, это и так просто и понятно, но для тех, кто не силен в JS (например, для меня) это очень большое упущение! Четыре дня я пытался найти решение — «вынес» мозг себе, окружающим «JS-летописцам» и успел надоесть всем на форуме http://ru.forums.wordpress.org/ (кстати, форум хороший — ребята реально помогают в вопросах по WordPress, хотя ответ на эту тему я получил не там, не смотря на её бурные обсуждения). На сторонних блогах я находил какие-то «портянки» кодов для этого плагина и для такой же задачи, но увы, не дающих нужный результат. Ах, как я был бы рад, если б наткнулся на такое вот краткое описание всего в несколько строк! Это ответ на вопрос: «Зачем это здесь?» :)

Слава, слава DCat’y, нашедшему решение за 5 минут! ;)

Запись опубликована в рубрике IT, Главная. Добавьте в закладки постоянную ссылку.

13 комментариев: Разместить галерею за одной картинкой в Fancybox

  1. Елена говорит:

    У меня та же проблема — замучилась в поисках слайд-шоу галереи. Всё, что нахожу, в моей теме работать не хочет.

  2. AVSh говорит:

    dhtml & js рулят, остальное от лукавого!

  3. novichek говорит:

    пробую не получается, помогите пожалуйста, например на странице есть изображение :
    <a href="http://localhost/sasha/wp-content/uploads/2012/01/22.jpg» rel="nofollow"></a>
    нужно чтоб за ним была спрятана галерея из изображений :
    http://localhost/sasha/wp-content/uploads/2012/01/12.jpg
    http://localhost/sasha/wp-content/uploads/2012/01/21.jpg
    http://localhost/sasha/wp-content/uploads/2012/01/1.jpg
    как будет выглядеть код? и нужно ли использовать fancybox в связке с др плагинами?

    • Modicus говорит:

      Код будет выглядеть следующим образом:

      <a class="fancybox" rel="nofollow" href="/wp-content/uploads/2012/01/12.jpg"><img src="/wp-content/uploads/2012/01/22.jpg"></a>
      <a class="fancybox" rel="nofollow" href="/wp-content/uploads/2012/01/21.jpg"></a>
      <a class="fancybox" rel="nofollow" href="/wp-content/uploads/2012/01/1.jpg"></a>

      При этом class обязательно называется «fancybox», а rel может иметь любое название, но одинаковое для всех картинок в одной галерее. (rel отделяет галереи одну от другой, если, например на странице несколько разных галерей.)
      Кроме того, в настройках самого плагина в закладке «Galleries» должен быть выбран пункт «Do not group images in gallery automatically…» — тогда всё заработает! ;) Удач!

  4. novichek говорит:

    все равно не получается, похоже сам плагин не работает

    • Modicus говорит:

      Если по умолчанию при нажатии на картинку она открывается в «модном окошечке» — значит он работает. :)

  5. novichek говорит:

    как его правильно устанавливать? нужен какой то скрипт?

  6. Om Mandeep говорит:

    Все очень понятно и доступно объяснил. Спасибо!

  7. Владислав говорит:

    Здравствуйте.
    Все перепробовал ВСЁ =(

    открывает картинку в новом окне и всё тут

    что не так? ;(

  8. Максим говорит:

    Добрый день! Если кто-нибудь знает, помогите, пожалуйста!
    Я на WordPress установил тему «ElegantEstate» и сразу плагин «Fancybox for WordPress», который используется на демо сайте этого шаблона… При создании статьи есть у этой темы дополнительный пункт «Elegant Estate optios» или как-то в этом роде, там есть 9 полей для загрузки фото из библиотеки файлов, первые 8 из которых это эскизы для страницы, где сама статья и комментарии к ней, а последняя девятая используется, как миниатюра для анонса… на демо сайте все эти фото увеличиваются с помощью плагина «Fancybox for WordPress», и при увеличении под фотографией, над ней или на ней отображается атрибут title в качестве подписи… Но это на демо сайте… А на свой я установил есго сразу на чистый шаблон, создал статью засунул туда все эти 8 эскизов… Работает хорошо, увеличивается правильно… Но атрибут title не хочет отображаться… проверил в firebug от Mozilla Firefox и увидел, что в теге !начало тега! a href = “ссылка на фото” title = “тайтл” !конец тега! (Пишу раздельно, чтобы отобразить сам тег, а не его значение.)нет самого атрибута title, что он не отобразился (хотя я в библиотеке файлов прописал к этим всем фото все поля: Заголовок, Описание, Подпись и даже атрибут title), проверил в этом же firebug вставил в этот тег title=»подпись…» и сразу появилась подпись (конечно до обновления страницы, т.к. все изменения кода в firebug временные, т.е. до обновления страницы)… Вывод: где-то нужно прописать, что атрибут title должен брать для себя содержимое из одного из полей в библиотеке файлов у этих фото, чтобы он отображался… Но где, в каком файле и как это сделать нужно? Может кто-нибудь знает? Заранее спасибо за помощь!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *