Медиа

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

[wp-pic type=»plugin» slug=»fancybox-for-wordpress» align=»right» ]

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

Support

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

Uninstall

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

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

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

 

Похожие

38 Комментов

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

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

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

    Спасибо!

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

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

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

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

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

      2. Здравствуйте!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      2. Согласен с вами. Сейчас посмотрю как он работает на мобильных устройствах. Их то не заменишь!

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

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

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

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

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

      2. Попробую Slideshow. Уже поглядывала на него))) Очень похож на тот, что использую сейчас… WOW-Slider уже тестила, очень понравился, НО в б/п версии напрягает ссылка на ресурс… Пока не раскошелюсь на платную версию, будем искать варианты)))
        Дмитрий, у Вас очень приятный блог. Много полезных статей нашла.
        Спасибо!

  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 должен брать для себя содержимое из одного из полей в библиотеке файлов у этих фото, чтобы он отображался… Но где, в каком файле и как это сделать нужно? Может кто-нибудь знает? Заранее спасибо за помощь!

    1. Не проще спросить у авторов на форуме поддержки elegantthemes? Они Вам точно расскажут, где чего править. А так, без шаблона, без ссылки на сайт — телепат нужен 🙂

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

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

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

  9. Что то у меня не работает этот плагин. Какие могут быть проблемы?

  10. Здравствуйте! Недавно перешла с Nextgen gallery на Fancybox for WordPress. Установлен только Fancybox for WordPress. Все хорошо, но имеется только одна проблема: не появляется описание картинки, хотя при вставке галереи на страницу я прописываю отдельно название для каждого изображения. Не знаете случайно, с чем это может быть связано? Заранее благодарю за ответ.

    1. Анна, там много настроек. В том числе и для галерей. Изучайте внимательно.

  11. Помогите пожалуйста!!! Установил fancybox for wordpress плагин установился в движок wordpress но не знаю как применить fancybox for wordpress к фото и не каких намеков как настроить чтобы фото открывалось (увеличивалось) Спасибо всем кто откликнется!

  12. А в чем может быть косяк что картинка и с плагином и без не открывается. Вообще не кликабельна. Только через ПКМ открыть в новом окне

  13. Выше уже поднималась тема, когда сразу открываются и Fancybox и NextenGallery, PhotoGallery или любая другая галерея. Так и не разобралась как устранить эту проблему. Не вижу нигде этого: images:autodetect. Такие настройки есть только в Easy Fancybox и все равно это не помогает! И видео и фото, ранее добавленные через галерее открываются вместе с Fancybox. Может кто-то объяснить как это исправить человеку, далекому от скриптов и тому подобного?

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button