После того, как я и моя любимая решили принять участие в конкурсе «Девушка Блоггера 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 позволяет увидеть работу плагина с текущими настройками.
Скачать плагин можно по этой ссылке
Скоро Новый год, поэтому позаботьтесь о том, чтобы к этому празднику на страницах вашего сайта появилась парочка ёлок или даже Дед Мороз.
Здравствуйте, хотел узнать можно ли сделать кнопку(иконку) Принт, что бы в открывшемся «боксе» можно было по нажатию вывести картинку на печать? заранее спасибо
Думаю да, но для этого нужно будет похимичить в коде плагина. Добавить немного js, и возможно чуток css.
Можете ли вы мне в этом помочь? вы же используете на данный момент именно этот плагин? очень давно ищу хороший «лайтбокс» но еще бы хотелось иметь на нем такую фишку как распечатка…
Попробую помочь. Как только появится результат, сразу отпишу тут. Посмотрю, покручу завтра.
Всё оказалось намного сложнее, чем я предполагал. Там всё на ООП завязано, и сразу так я не сообразил, как бы так добавить возможность распечатать.
Спасибо за попытку:)
Очень интересный блог кстати)
Спасибо.
Вот и до меня добралась эта необходимость…
Скриншоты с текстом на блоге плохо читаются, поэтому нужно подгружать в полном размере.
Хорошая подборка плагинов. Установлю несколько. Попробую проверить какие лучше всего будут работать на моём шаблоне.