Недавно мне надо было установить на одном сайте плагин для увеличения размера картинок (при клике по ним). Я остановил свой выбор на плагине lightbox-2.2.9.2. Скачал, установил и решил проверить, что же о нем пишут в Рунете. Я просмотрел весь Топ50 по этому запросу и был крайне удивлен.
Во-первых, не менее половины сайтов имеют попросту ворованный контент (если статьи читать, а не просто просматривать, это видно отчетливо).
В-вторых, из оставшихся большинство пишут о необходимости лезть в код, приводят примеры, но не указывают самую главную вещь – в коде должно быть указано, что с этой картинкой должен работать плагин.
Те немногие оставшиеся, кто об этом пишут, говорят как-то глухо и неявно, а между тем это – достаточно важно для работы плагина. Я написал «достаточно важно» потому что и тут есть один нюанс, который поколебал мою уверенность в вебмастерской науке :-). Исходя из этого рекомендую сначала дочитать статью до конца, а потом уже решить: чего Вам лучше придерживаться.
Работа с плагином необычайно проста. Я взял последнюю версию, закачал к себе на сервер. Можете его оттуда СКАЧАТЬ (Плагин скачан уже 262 раз). И сейчас я вместе с Вами установлю его на этот сайт.
Установка плагина ничего сложного не представляет, все, как обычно. После его активации никаких настроек делать не надо. Во вкладке Lightbox-2 Вы можете поменять цвет рамки и сжать большие изображения, чтобы поместилось несколько маленьких (последняя строчка настроек).
Но сначала, для того, чтобы было понятно, как работает плагин, посмотрите настройки своих медиафайлов:
Рис.1 (кликабельно)
Для нас неважно, какие размеры установлены, важно, чтобы все графы были заполнены. Постарайтесь запомнить цифры. Найдем подходящую картинку, размер ее должен быть больше, чем у Вас указано в максимальной ширине. Для примера я установлю в этой статье картинку с автомобилем, ее размер 800×600.
Рис.2 (кликабельно)
Эту картинку мы как обычно закачиваем на сайт. Но! Когда у Вас появится окно «Добавить картинку»:
Рис.3 (кликабельно)
Не торопитесь вставлять картинку в запись. Сначала запомните имя файла, его размер и адрес.
Скопируйте адрес картинки, куда именно она закачалась, запись будет примерно такой -src="http://novichkoff.ru/wp-content/uploads/2011/07/1288943463_187-500×375.jpg". Т.е. картинка закачалась в папку wp-content, в ней — в папку uploads, и далее в папку для картинок этого года (2011) и месяца (сейчас июль). И только после этого нажимайте кнопку «Вставить в запись».
Теперь с помощью своего FTP –клиента заходим на сайт. Открываем папку с закачанной картинкой и смотрим: а картинок стало четыре!
Рис.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: оказывается дешевые видеокамеры = выброшенные деньги. Показывали это на различных преступлениях, которые совершены ПРЯМО под такими дешевыми камерами — ничего не разобрать! Вывод для себя я сделал такой: брать только хорошую, с цветным изображением.
Рад, что Вам пригодилось
Давно искала такой плагин, хорошо что к вам забрела,плагин сразу установила и о, чудо, он работает! Огромное спасибо!
Спасибо! Главное что он у меня после установки работал, точно так же с открытием увеличенной картинки в окне. И я не помню, когда перестал работать, поэтому я связала с обновлением. Но главное, что у меня и другие плагины по увеличению картинок тоже не работают (которые я пыталась после этого установить). Наверное действительно какой-то конфликт. Буду думать эту мысль))
Инна, сделал учебный сайт на поддомене, проверил работу плагина — работает. Правда, у меня на этом сайте почти нет других плагинов, но это значит, что у Вас, скорее всего, конфликт плагинов. Посмотреть его работу на 3.3.1 можете здесь — test331.novichkoff.ru/?p=10
Инна, сразу ответить не могу, на моих сайтах WP 3.2.1 этот плагин не установлен. Сегодня попробую, может чего хорошего и соображу. Точно знаю одно, многие плагины в версии WordPress 3.х.х не работают, из-за чего я и не спешу обновляться.
Обновилась до версии 3.3.1. и плагин работать перестал. Теперь получается только ждать обновления плагина? Что-то другой не могу найти.
Вика, я посмотрел Ваш блог — мне кажется, что у Вас работает не лайтбокс-2, а какой-то другой плагин, с похожим названием. Если это так, то попробуйте его отключить, потом установите лайтбокс-2.
Спасибо за статью! Давно искала информацию об увеличении картинок и о слайд шоу, потому что не могу его установить у себя на сайте (хотя в моей теме он есть). Буду пробовать.
Здравствуйте) У меня проблемка)
Я установила лайтбокс, он работает нормально все, только при нажатии на маленькую миниатюрку, он расширяется нуу...не намного, размеры,все проставлено, подскажите что делать?
(первый раз блог создала,буду благодарна за помощь)