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


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

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

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

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

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

Установка плагина ничего сложного не представляет, все, как обычно. После его активации никаких настроек делать не надо. Во вкладке 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: оказывается дешевые видеокамеры = выброшенные деньги. Показывали это на различных преступлениях, которые совершены ПРЯМО под такими дешевыми камерами — ничего не разобрать! Вывод для себя я сделал такой: брать только хорошую, с цветным изображением.

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

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

  1. Сергей Васильевич, как жаль, что я не регулярно бываю у Вас, а то бы знала, что не стоит спешить с обновлением WordPressа.

    Ну да что ж теперь поделать. Назад откатываться уже боюсь, вдруг опять чего-нибудь нарушится. Плагин lightbox-2, который я благодаря Вам установила, мне очень нравится. Он даже лучше того, что был у меня раньше WP-Slimbox2 — у меня много документов для моих консультантов на сайте для скачивания и с предыдущим плагином их можно было скачать только открыв в новом окне, а не все внимательно читают предупреждения и просто нажимали на ссылку — окно зависало. С Вашим плагином всё очень классно.

    Теперь вот буду ждать когда вы найдете плагин для видео.

    Спасибо ещё раз Вам огромное. Буду сейчас почаще к Вам заглядывать.

    С уважением. Галина Жилкина.

    • admin пишет:

      Галина, я решил обойтись на блоге при установке видео без плагинов. Почитайте статью — «Как вставить видео на сайт без плагинов»

  2. Здравствуйте, Сергей Васильевич! БОЛЬШОЕ ВАМ СПАСИБО за этот пост. У меня стоял плагин

    WP-Slimbox2 и было так всё замечательно, пока я не обновила версию WordPress до 3.4.1

    И перестал работать и этот плагин и WP-lightpop, который красиво открывает видео с Ютуба.

    И вот благодаря Вам у меня опять красиво открываются картинки.

    Сергей Васильевич, а можете подсказать какой плагин поставить, чтобы с видео тоже всё вернуть (у меня много видео на сайте и многие я устанавливала ссылками, расчитывая на работу плагина WP-lightpop. И теперь это не очень хорошо смотрится galinaizobilie.ru/zimnjj-krugosvetka

    И ещё поделитесь, как часто Вы обновляете версии WordPress? И надо ли вообще их обновлять?

    С уважением. Галина Жилкина.

    • admin пишет:

      Да, Галина, не повезло не только Вам, но и мне, и всем кто обновился до версии 3.4.1 — очень глючная версия, многие плагины не работают. В Интернете полно советов как откатиться на более старые версии. Мне тоже об этом пишут. Да я и сам об этом подумываю.

      Из видеоплагинов у меня стоит Video Embedder, но он тоже работает очень плохо: не работает полноэкранный режим. Обнаружил это я благодаря Вам. Сейчас начну искать в репозитарии какой-нибудь плагин, совместимый с WP 3.4.1. Найду, проверю, потом напишу Вам.

      Об обновлении WordPress. Я стараюсь обновляться как можно реже и как раз из-за подобных проблем. Этот блог несколько лет работал на 2.9.2, но появилось много плагинов, которые работают только на 3-й ветке WP. Поэтому я и обновился. Надо было бы перейти на 3.3.1, но поленился обновляться вручную, захотелось автоматики, а она обновляет только на самую последнюю версию. Теперь жалею об этом.

  3. Юлия пишет:

    Давно искала такой плагин, хорошо что к вам забрела,плагин сразу установила и о, чудо, он работает! Огромное спасибо!

  4. Инна пишет:

    Спасибо! Главное что он у меня после установки работал, точно так же с открытием увеличенной картинки в окне. И я не помню, когда перестал работать, поэтому я связала с обновлением. Но главное, что у меня и другие плагины по увеличению картинок тоже не работают (которые я пыталась после этого установить). Наверное действительно какой-то конфликт. Буду думать эту мысль))

  5. Инна пишет:

    Обновилась до версии 3.3.1. и плагин работать перестал. Теперь получается только ждать обновления плагина? Что-то другой не могу найти.

    • admin пишет:

      Инна, сразу ответить не могу, на моих сайтах WP 3.2.1 этот плагин не установлен. Сегодня попробую, может чего хорошего и соображу. Точно знаю одно, многие плагины в версии WordPress 3.х.х не работают, из-за чего я и не спешу обновляться.

      • admin пишет:

        Инна, сделал учебный сайт на поддомене, проверил работу плагина — работает. Правда, у меня на этом сайте почти нет других плагинов, но это значит, что у Вас, скорее всего, конфликт плагинов. Посмотреть его работу на 3.3.1 можете здесь — test331.novichkoff.ru/?p=10

  6. Инга пишет:

    Спасибо за статью! Давно искала информацию об увеличении картинок и о слайд шоу, потому что не могу его установить у себя на сайте (хотя в моей теме он есть). Буду пробовать.

  7. Вика пишет:

    Здравствуйте)У меня проблемка)

    Я установила лайтбокс, он работает нормально все, только при нажатии на маленькую миниатюрку, он расширяется нуу...не намного, размеры,все проставлено, подскажите что делать?

    (первый раз блог создала,буду благодарна за помощь)

    • admin пишет:

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

Оставить комментарий

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>