Многие задаются вопросом о реализации всплывающих картинок в постах и страницах в движке WordPress. Решений множество. Причем есть как ручная реализация данного действия, так и автоматическая. Перечислять различные варианты в рамках данного поста я не буду. Поговорим именно о плагине Lightbox 2.
Какими преимуществами обладает плагин Lightbox 2? На мой взгляд преимущество одно, это автоматизация процесса. Вам совершенно не нужно ничего делать руками. Вы просто вставляете картинку в пост и всё. Система автоматически генерирует код вывода изображения. Так же если необходимо, можно у определенных изображений эффект всплывания убрать. Это делается в свойствах картинки. Просто удаляете ссылку картинки.
Плагин Lightbox 2 так же имеет настройки, благодаря которым мы можем настроить различные эффекты появления картинки, задать цвета затемнения.
На этом можно было бы и закончить рассказ о плагине Lightbox 2. Но многие задаются вопросом, как сделать различный вид миниатюр и оригинальной картинки.
Так как система работает автоматически. Она просто пропорционально уменьшает оригинальный рисунок и всё. И когда вы делаете небольшую галерею изображений, то она получает довольно изуродованный вид. Картинки разного размера смотрятся крайне удручающе. Так же на миниатюры, порой необходимо нанести какой либо графический элемент, например логотип компании. Или же на оригинал изображения вы хотите нанести водяной знак. В общем причины могут быть разные.
Здесь придется поработать руками и головой. Для начала необходимо выяснить какой код генерирует плагин Lightbox 2. Что бы это выяснить нужно в наш пост загрузить хотя бы одно изображение. Затем в редакторе, перейти в HTML-режим. И там ищем получившийся код.
Красным маркером выделен путь к оригиналу изображению, а желтым маркером выделен путь к миниатюре. Создаем нужную нам миниатюру, называем таким же именем, которое задает система. И не забываем в коде менять размеры WIDHT и HEIGHT, что бы не было искажения рисунка. И получившиеся рисунки закидываем по адресу который отмечен желтым маркером.
Пример подобной реализации, вы можете увидеть здесь.
Похожие посты:
