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


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

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

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

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

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

Установка плагина ничего сложного не представляет, все, как обычно. После его активации никаких настроек делать не надо. Во вкладке 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 thoughts on “Как увеличить размер картинки на сайте. Плагин lightbox-2

  1. Галина Жилкина

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

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

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

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

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

    Reply
    1. admin Post author

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

      Reply
  2. Галина Жилкина

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

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

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

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

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

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

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

    Reply
    1. admin Post author

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

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

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

      Reply
  3. Юлия

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

    Reply
  4. Инна

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

    Reply
  5. Инна

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

    Reply
    1. admin Post author

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

      Reply
      1. admin Post author

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

        Reply
  6. Инга

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

    Reply
  7. Вика

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

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

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

    Reply
    1. admin Post author

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

      Reply

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

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