Как увеличить размер картинки на сайте. Плагин lightbox-2 |

Время чтения: 4 мин.

Недавно мне надо было установить на одном сайте плагин для увеличения размера картинок (при клике по ним). Я остановил свой выбор на плагине lightbox-2.2.9.2. Скачал, установил и решил проверить, что же о нем пишут в Рунете. Я просмотрел весь Топ50 по этому запросу и был крайне удивлен.

Во-первых, не менее половины сайтов имеют попросту ворованный контент (если статьи читать, а не просто просматривать, это видно отчетливо).

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

Те немногие оставшиеся, кто об этом пишут, говорят как-то глухо и неявно, а между тем это – достаточно важно для работы плагина. Я написал «достаточно важно» потому что и тут есть один нюанс, который поколебал мою уверенность в вебмастерской науке :-). Исходя из этого рекомендую сначала дочитать статью до конца, а потом уже решить: чего Вам лучше придерживаться.

Работа с плагином необычайно проста. Я взял последнюю версию, закачал к себе на сервер. Можете его оттуда СКАЧАТЬ (Плагин скачан уже 868 раз). И сейчас я вместе с Вами установлю его на этот сайт.

Установка плагина ничего сложного не представляет, все, как обычно. После его активации никаких настроек делать не надо. Во вкладке Lightbox-2 Вы можете поменять цвет рамки и сжать большие изображения, чтобы поместилось несколько маленьких (последняя строчка настроек).

Но сначала, для того, чтобы было понятно, как работает плагин, посмотрите настройки своих медиафайлов:

плагин lightbox-2

Рис.1 (кликабельно)

Для нас неважно, какие размеры установлены, важно, чтобы все графы были заполнены. Постарайтесь запомнить цифры. Найдем подходящую картинку, размер ее должен быть больше, чем у Вас указано в максимальной ширине. Для примера я установлю в этой статье картинку с автомобилем, ее размер 800×600.

Плагин lightbox-2

Рис.2 (кликабельно)

Эту картинку мы как обычно закачиваем на сайт. Но! Когда у Вас появится окно «Добавить картинку»:

Рис.3 (кликабельно)

Не торопитесь вставлять картинку в запись. Сначала запомните имя файла, его размер и адрес.

Скопируйте адрес картинки, куда именно она закачалась, запись будет примерно такой -src=»http://novichkoff.ru/wp-content/uploads/2011/07/1288943463_187-500×375.jpg». Т.е. картинка закачалась в папку wp-content, в ней —  в папку uploads, и далее в папку для картинок этого года (2011) и месяца (сейчас июль). И только после этого нажимайте кнопку «Вставить в запись».

Теперь с помощью своего FTP –клиента заходим на сайт. Открываем папку с закачанной картинкой и смотрим: а картинок стало четыре!

плагин lightbox-2

Рис.4

Наш WordPress (умница) не только закачал оригинальную картинку, но и автоматически сделал еще 3 варианта картинки – шириной 150, 300 и 500 пикселей. Помните размеры изображений (см. рис.1)? Вот на этом свойстве WordPress’a и основана работа плагина. Но для того, что плагин понял, что от него требуется, в адрес картинки надо внести небольшое добавление:

rel=»lightbox»

У Вас должно получиться примерно так:

<a rel=»lightbox» href=»http://novichkoff.ru/wp-сontent/uploads/2011/07/1288943463_187.jpg

Другими словами, Вы должны поместить эту вставку между тегом а и href. Причем с обеих сторон должен быть пробел. Вставлять rel=»lightbox» надо в адрес каждой картинки, которую Вы собираетесь увеличивать. Вы можете определить любой размер картинки (см.рис.3), после опубликования ее и при нажатии на нее будет показываться картинка размером 800×600 пикселей.

Если Вы собираетесь довольно часто пользоваться этим плагином, рекомендую фразу rel=»lightbox» сохранить в блокноте.

P.S. Если Вам откровенно лень это делать,то можете это добавление в код не писать :-). Это не шутка. То, что я написал выше, это — «по науке». Но если Вы просто установите плагин и перейдете на сайт, то увидите, что при клике по картинке плагин все равно работает — он будет показывать оригинальный размер картинки, а не тот который Вы указали загружая ее.

Какой вывод из этого следует?

Можно загружать с компьютера картинку большого формата, WordPress создаст картинки разных размеров (смотрите в «Настройках» -«Медиафайлы», установите нужные размеры) и Вы всегда можете указать другой (не оригинальный) размер — меньший-  например, средний. Страничка будет открываться быстрее. И будет еще один эффект, о котором — ниже.

О слайд-шоу

Загрузив картинку на сайт, кликните по ней. Она станет большой и если Вы подведете курсор к одному из ее краев (правому или левому), то увидите стрелку. При нажатии на нее, откроется следующая картинка и тоже большого размера. Так, открывая одну за другой, Вы просмотрите все картинки, расположенные на этой странице. Попробуйте.

Вот тут и появляется обещанный нюанс. Если Вы сделаете все «по науке» (т.е. прописывая в коде rel=»lightbox»), то слайд-шоу НЕ БУДЕТ работать. А если обойдетесь без этой добавки к коду, то будет. Посмотреть это можно на примере другой статьи в этом блоге. Почему так происходит, я не знаю. Видимо, какой-то неожиданный, не запланированный автором плагина, эффект.

Вот и верь теперь науке :-). Практика гораздо важнее, не устаю это повторять.

Но если Вам и это лень — нажимать все время на стрелку, то можете обратить внимание на другой плагин lightbox-plus.  У него реализована функция автоматической прокрутки картинок и будут крутиться все картинки из этого поста. Время показа одной картинки указывается в настройках плагина. Но, поскольку одну картинку можно посмотреть за 2 секунды, а другую надо изучать несколько минут (например, какую-то таблицу), получается неудобно для пользователей.Из-за этого он мне и не понравился.

Удачи!

P.S. А вам нужны видеокамеры видеонаблюдения? Или видеокамеры для видеонаблюдения, не знаю, как правильно, но надеюсь Вы поняли о чем речь. Вчера посмотрел передачу про них по TV: оказывается дешевые видеокамеры = выброшенные деньги. Показывали это на различных преступлениях, которые совершены ПРЯМО под такими дешевыми камерами — ничего не разобрать! Вывод для себя я сделал такой: брать только хорошую, с цветным изображением.

Похожие записи по этой теме:

Раздел: Без рубрики