Выбираем плагин для просмотра изображений

После того, как я и моя любимая решили принять участие в конкурсе «Девушка Блоггера 2011», я решил задуматься о том, как бы сделать более красивым и удобным просмотр конкурсных фотографий.

Я уже был знаком с семейством плагинов LightBox, которые отличаются красивым визуальным оформлением, поэтому мой выбор пал именно на них. На примете у меня были три плагина, которые явно выделялись среди других: SexyLightbox, LightBox 3 и LightBox Plus. На мой новый шаблон категорически отказался становиться SexyLightbox. Ну да ладно, не велика потеря. Следующий был Lightbox Plus — встал замечательно, огромный функционал, есть возможноость создание собственного CSS-стиля.

Спустя день смотрю, а изображения не открываются. Опыт подсказывал, что проблема в JavaScript’е. Спустя некоторое время поиска, обнаружить источник проблемы не удалось. Обидно… Но делать что-то нужно. Поэтому тут я вспомнил про 3-й вариант — LightBox 3. Плагин встал хорошо. Но это уже было не то, нет того функционала и отсутствие возможности настройки под себя. Даже для того, чтобы изменить текст «Image X of Y», мне пришлось копаться в коде.

Одним словом, после Lightbox Plus — я видел только разочарование в LightBox 3. Поэтому, во что бы то ни стало, я решил выявить и выщемить проблему из-за которой плагин отказывался работать. Первое, что я решил сделать, это вспомнить, какие изменения я внёс в шаблон после последней успешной работы плагина. И знаете что? Я вспомнил! Проблема таилась за ajax-комментариями, которые я решил прикруть. Они изначально стояли в моём прошлом шаблоне, и работали весьма исправно. Вывод для себя я сделал, если что-то изменил, проверь работоспособность всего, абсолютно всего, иначе потом можно голову сломать.

Раз уж я начал говорить о проблемах, то скажу сразу, что этот плагин может у Вас также отказаться работать, если в вашем шаблоне будет отсутствовать функция wp-footer();, которая должна вызываться перед закрывающимся тегом </body>. Ну а в остальном всё должно быть гуд.

А теперь расскажу немного о том, как пользоваться этим чудом. Заходим в админку и переходим на страницу настроек плагина, у меня она располагается в блоке Внешний вид. Первый блок настроек Lightbox Plus — General Settings. Общие настройки.

Отвечают за визуальное оформление плагина.
Lightbox Plus Style — Выбираем стиль оформления. Мой выбор остановился на Elegant
Use Custom Styles — Позволяет использовать произвольный файл стилей CSS. Для этого нужно поместить ваш файл стилей в директорию wp-content/lbp-css
Disable Lightbox CSS — Позволяет отключить встроенные стили CSS Lightbox Plus.
Как только нас всё устроит жмём Save Settings для сохранения настроек.

Далее перейдём к следующему блоку первичных настроек Lightbox Plus — Primary Lightbox Settings

Тут нас будут интересовать два подблока: Base Settings и Demo.
Первый содержит ряд параметров:
Transition Type — Тип трансформации. Пока из всего два. Это эластичный (elastic) и затухающий (fade)
Resize Speed — Скорость трансформации в милисекундах
Width — Позволяет явно задать длину лайтбокса
Height — Позволяет явно задать высоту лайтбокса
Inner Width — Позволяет явно задать внутреннюю длину лайтбокса
Inner Height — Позволяет явно задать внутреннюю высоту лайтбокса
Initial Width — Установить начальную длину, до загрузки контента
Initial Height — Установить начальную высоту, до загрузки контента
Maximum Width — Установить максимальную длину (можно задвать как в px, так и в %)
Maximum Height — Установить максимальную высоту (можно задвать как в px, так и в %)
Resize — Позволяет маштабировать изображение, рекомендуется для того, чтобы сжимать большие изображения
Overlay Opacity — Задаёт прозрачность
Pre-load images — Предзагрузка изображений.
Grouping Labels — Заголовки группы изображений
Previous image text — Текст ссылки «предыдущее изображение»
Next image text — Текст ссылки «следующее изображение»
Close image text — Текст ссылки «Закрыть»
Overlay Close — Позволяет закрывать просмотрщик при клике по фону.

Вот как выглядят мои настройки

Блок Demo позволяет увидеть работу плагина с текущими настройками.

Скачать плагин можно по этой ссылке


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

Stas Kuryan

Web developer. Перфекционист в написании кода.

9 комментариев

  1. Андрей     

    Здравствуйте, хотел узнать можно ли сделать кнопку(иконку) Принт, что бы в открывшемся «боксе» можно было по нажатию вывести картинку на печать? заранее спасибо

    • Stafox        Автор

      Думаю да, но для этого нужно будет похимичить в коде плагина. Добавить немного js, и возможно чуток css.

  2. Андрей     

    Можете ли вы мне в этом помочь? вы же используете на данный момент именно этот плагин? очень давно ищу хороший «лайтбокс» но еще бы хотелось иметь на нем такую фишку как распечатка…

    • Stafox        Автор

      Попробую помочь. Как только появится результат, сразу отпишу тут. Посмотрю, покручу завтра.

    • Stafox        Автор

      Всё оказалось намного сложнее, чем я предполагал. Там всё на ООП завязано, и сразу так я не сообразил, как бы так добавить возможность распечатать.

  3. Андрей     

    Спасибо за попытку:)
    Очень интересный блог кстати)

  4. Xstroy     

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

  5. Александр     

    Хорошая подборка плагинов. Установлю несколько. Попробую проверить какие лучше всего будут работать на моём шаблоне.

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

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