Написать тут послание автору сайта
Главная / Плагины / Fancybox for WordPress — красиво выводим изображения
Fancybox for WordPress

Fancybox for WordPress — красиво выводим изображения

Привет уважаемым читателям. Данная статья будет посвящена одному из самых популярных плагинов для вывода изображений  — Fancybox for WordPress. Вообще говоря, подобных плагинов существует целое семейство. FancyBoxEasy FancyBoxLightbox Plus ColorBox, Lightbox Evolution и прочие, как премиум так и бесплатные. Мы наверняка, еще в будущем, подробно рассмотрим некоторые из них.

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

Установка и активация ничем не отличаются от большинства прочих плагинов загружаемых wordpress.org. После активации плагина ищем в админке — Параметры — Fancybox for WordPress. Попадаем на страницу настроек, имеющую десять вкладок в верхней части первой страницы. Не пугайтесь их количества. Важных для вас — всего три.

Настройки плагина

Для большинства настроек предусмотрены стандартные чекбоксы типа default: on/off. В некоторых случаях они по умолчанию включены или выключены.

Fancybox for WordPress

Info

Информация о разработчиках и общие рекомендации по плагину Fancybox for WordPress.

Appearance

Border — настройка цвета и включение (по умолчанию выключена) рамки выводимых изображений. Close Button — настройка кнопки закрывания окна с изображением, ее положения (верху, внизу, слева, справа) и цвет для внутреннего отступа. Overlay Options — настройка (цвет и прозрачность) затемняющего, заднего фона во время вывода изображения. Title — заголовок и настройка его цвета и места вывода относительно картинки. Navigation Arrows — показ стрелок навигации (перелистывания).

Animation

Zoom Options — настройка скорости анимации и прозрачности выводимых картинок. Transition Type — тип (затухание или растягивание) используемых эффектов при закрытии и открытии изображения. Easing — подробный выбор одного из множества типов шаблонов для эффектов.

Behavior

Auto Resize to Fit  — автоматически растягивать изображение под размер экрана. Center on Scroll — центрировать картинку в центре экрана. Close on Content Click — закрытие картинки кликом в любом месте на ней. Close on Overlay Click — закрытие картинки кликом по фону. Close with «Esc» — закрывать картинку нажатием соответствующей клавиши на клавиатуре. Cyclic Galleries — зациклить показ картинок по кругу в рамках одной галереи. Mouse Wheel Navigation — листать картинки в галерее колесиком мыши.

Gallery

Gallery Type — выбираем один из способов показа галерей. По умолчанию выбран первый — прокрутка галереи всех изображений в одном посте. То есть, если у вас в одной записи присутствуют несколько изображений, то открыв любой из них вы можете листая, просмотреть и все остальные. Другие три пункта — для более тонкой настройки вывода изображений в галереях. Рекомендую оставить первый пункт.

Miscellaneuos

Dimensions — Автоопределение размеров и ручная настройка размера для выводимых изображений. Load JavaScript in Footer — дополнительная настройка для использования с плагином Parallel Load. Callbacks — включение функции обратного вызова.

Extra Calls

Здесь вы можете добавить вызовы FancyBox, с дополнительными настройками. Для получения информации используйте API FancyBox.

Troubleshooting

Рекомендации автора плагина по возможным проблемам. Суть сводится к известному методу поочередного отключения прочих плагинов для выявления причин конфликта.

Support

Поддержка плагина. Автор отсылает всех к FAQ на официальной странице плагина. Или просит отправлять ему сообщения о проблемах с указанием сайта и подробным описанием.

Uninstall

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

Самые необходимые настройки плагина Fancybox for WordPress как видите, собраны во вкладках Appearance, Animation и Behavior. Кстати, именно с помощью них можно добиться соответствия визуального оформления изображений с общим дизайном вашего сайта.
Остальные настройки автор рекомендует еще на странице Info, не трогать без особой необходимости и хорошего понимания своих действий.

Рекомендую так же ознакомится с обновленной статьей — Lightbox Plus ColorBox — выводим изображения

Страница плагина

28 комментарии

  1. Очень интересно звучит! В свое время искала какой бы плагин для галереи поставить, поскольку в некоторых статьях было много фото и хотелось, чтобы их можно было открывать не по одному, а пролистывать в увеличенном размере.

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

    В связи с этим вопрос, если я поставлю Fancybox не будет ли он конфликтовать с NextGENGalery? И может ли один плагин работать для одних статей, а другой, для других?

    Спасибо!

    В связи с этим вопрос, если

    • Здравствуйте. В настройках NG галереи есть раздел Options — JavaScript Thumbnail effect. В случае конфликта, можете выставить там — None. Тогда эффект будет выводить только плагин. Но скорее всего, все будет нормально работать и по умолчанию.

  2. Здравствуйте. Поставил такой вывод изображений.
    А вот как отключить базовый просмоторщик? Кликаешь на изображения, и оно открывается в обоих просмоторщиках. Базовый просмоторщик я так понимаю встроен в тему.

    • Евгений

      Похожая ситуация. Fancybox использую что бы выводить «поп-ап» контакт форму. Для просмотра картинок стоит Lightbox Gallery. Но когда добавляю галерею открывается два окна просмотра. Как отключить Fancybox от галерей?

      • Евгений

        Похожая ситуация. Fancybox использую что бы выводить «поп-ап» контакт форму. Для просмотра картинок стоит Lightbox Gallery. Но когда добавляю галерею открывается два окна просмотра. Как отключить Fancybox от галерей? Ну или можно как то отключить Lightbox Gallery от галерей.
        Если просто добавить картинку в пост, то все открывается норм. Только с галереями проблема.

        • Здравствуйте!

          У меня такая же проблема. Для просмотра картинок стоит Lightbox Gallery. Когда нажимаю на миниатюру в галереи, она открывается с помощью плагина Fancybox как мне и надо, но ещё на заднем фоне открывается эта же фотография на весь экран. как сделать чтоб на заднем фоне не открывались большие фотографии?
          если Вы смогли решить данную проблему, напишите, пожалуйста, как.

          • Здравствуйте. Попробуйте в настройках плагина, в разделе Gallery переставить на Do not group images in gallery automatically…

          • Переставила, но проблема не устранилась (

          • Тогда скорее всего, ищите решение в настройках вашей галереи.

    • По поводу открытия изображения в двух окнах — базового просмотрщика и fancybox. В настройках fancybox есть пункт images:autodetect. Нужно очистить это поле и сохранить настройки. Тогда fancybox будет работать для модальных окон, но не для изображений.
      Надеюсь кому-нибудь поможет)

  3. Добрый день. Прошу помочь советом. Обнаружил в работе Fancybox следующий «глюк». При показе изображений в ИЕ 10, сквозь фото проглядывает нагло swf файлик баннера (расположен справа на панели, рядом с картинкой.

    В «нормальных» броузерах окно Fancybox перекрывает swf, который оказывается под окном.

    Помогите решить проблему для ИЕ… ?

    • Не совсем понял, где именно у Вас и что проглядывает :) На всякий случай проверил IE и Fancybox на своем сайте — все работает нормально. А вообще, все проблемы с IE решаются заменой последнего на норм браузер.

      • Спасибо за ответ Дмитрий. Но мой вопрос точен и конкретен в своем семантическом ядре. Включите IE 10 (последняя версия Виндовса). Зайдите на свою страницу Бесплатные темы (http://wpnice.ru/download/free-themes/) и обратите на нее внимание.

        Сверху крутится флешбаннер — swf файл. Он гласит «Зайди сюда и т.д.» под баннером скриншот картинки темы HUMIX — Нажмите на него.

        Откроется Френси…. НО! Сквозь растянутую Френси картинку скриншота прступит флешбаннер. У меня даже в Гугль Хроме это произошло.

        Повторяю вопрос:»Есть ли метод все таки «спрятать» флешбаннер под Френси? Или это глюк «для всех юзеров» ?

        Спасибо, я очень признателен за Ваш ответ. Просто у меня есть Заказчик, который вынес мне мозг этой проблемой и я уже не знаю как спрятать Flasр под Френси… Жду ответ.

  4. Добрый день. В продолжение вопроса (см. ниже) нашел подобный эффект у Вас на сайте на страничке http://wpnice.ru/download/free-themes/ — откройте в ИЕ 10 … Баннер swf 468х60 прорежет картинку скриншота бесплатной темы…

    Можно ли это побороть для ИЕ 10? Благодарю за совет.

  5. Здравствуйте!
    Использую на сайте для оформления фото Slideshow Gallery. Вроде нравится, правда, притормаживает, мне кажется. Вот, решила также попробовать Fancybox, сейчас активировала и ковыряюсь в настройках… Появились некоторые вопросы. В частности, интересуют настройки способов показа галерей. Не пойму, как «зацикливать» только желаемые файлы…
    И еще, может, подскажете (это важно)
    Можно ли при просмотре слайда исключить возможность его сохранять или открывать в новом окне, т.е чтобы при нажатии прав кнопкой было невозможно «сохранить как»?
    Буду благодарна за совет. Спасибо.

    • Здравствуйте. По поводу Fancybox — я не думаю, что это возможно. То что вы описали это прерогатива слайдеров. Насчет картинок могу посоветовать плагин — http://wordpress.org/plugins/no-right-click-images-plugin/ Однако на мой взгляд, занятие это совершенно бессмысленное, потому что есть масса программ позволяющая сделать скриншот с экрана или с его части. Наиболее эффективно тут использование жирных ватермарков например.

      • Спасибо за ответ.
        Думаю, небольшого разрешения и копирайта будет достаточно. Запрет на правый клик не очень мне нравится… и посетителям наверное тоже :)
        Не совсем в тему, но возможно Вы посоветуете какой-нибудь бесплатный слайдер типа Slideshow Gallery, но чтобы была возможность вставлять по несколько слайдеров на одной странице? Не помню уж почему, но с Nivo «не подружились»… Я уже всю голову сломала, как качественно оформить портфолио, чтоб удобно и приятно смотреть было.
        Буду очень признательна за совет.

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

  7. Ошибочка: тег такой
    Пишу раздельно, чтобы отобразить сам тег, а не его значение.

    • !начало тега! a href=»Ссылка на фото» title=»lalala» !конец тега!

      • Проверьте в плагине в настройках — Apperance — Title наличие галки в чекбоксе. Ну и в самой картинке конечно должен быть прописан заголовок. Больше тут никаких секретов не должно быть.

  8. Там проблема немного прояснилась: на главной всё отображается как надо, но в статьях не хочет отображаться подпись… посмотрел в фаербаге title и alt есть, но в них ничего нет… тоесть я в коде прописал к ним чтобы они брали содержимое из библиотеки файлов, т.е. title из поля заголовок того фото под которым оно отображается, и с alt аналогично, только к полю alt. попробовал вместо title=»» написал просто title=»32132132131231″ и оно отобразилось… В итоге оно стирает код, но текст оставляет… Работаю на сайте тестовом, установлены только fancybox и тема для wordpress Elegant Estate… Может быть знаете, как обойти проблему? Сайт: http://wordpresik.hosting-test.org.ua

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Картинка