lightbox – Блог Stafox'a https://stafox.cc О программировании и веб-разработке Sun, 20 Nov 2011 08:19:17 +0000 en-US hourly 1 https://wordpress.org/?v=5.8.2 Выбираем плагин для просмотра изображений https://stafox.cc/vybiraem-plagin-dlya-prosmotra-izobrazhenij/ https://stafox.cc/vybiraem-plagin-dlya-prosmotra-izobrazhenij/#comments Wed, 02 Nov 2011 10:03:59 +0000 http://stafox.ru/?p=1236 После того, как я и моя любимая решили принять участие в конкурсе «Девушка Блоггера 2011», я решил задуматься о том, как бы сделать более красивым и удобным просмотр конкурсных фотографий. Я уже был знаком с семейством плагинов LightBox, которые отличаются красивым визуальным оформлением, поэтому мой выбор пал именно на них. На примете у меня были

Сообщение Выбираем плагин для просмотра изображений появились сначала на Блог Stafox'a.

]]>

После того, как я и моя любимая решили принять участие в конкурсе «Девушка Блоггера 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 позволяет увидеть работу плагина с текущими настройками.

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


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

Сообщение Выбираем плагин для просмотра изображений появились сначала на Блог Stafox'a.

]]>
https://stafox.cc/vybiraem-plagin-dlya-prosmotra-izobrazhenij/feed/ 9