Как увеличить картинку кликом

Добрый день коллеги!

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

Дело в том, что у каждого блога индивидуальный шаблон и не всегда можно разместить картинку так, чтобы и смотрелось красиво и, чтобы видно было все разборчиво. Часто такое происходит при вставке скриншотов, где информация в самой картинке написана мелким шрифтом и приходится прибегать к лупе или очкам. 

Методов решить эту проблему я нашел много и все перепробовал, но сработал только один. Наверное это особенность моего шаблона. Это увеличение картинки при клике. 

При нажатии на кнопку "Добавить медиафайл" добавляем, как обычно нужную картинку, в меню "Настройки отображения файла" выбираем один из меньших размеров, а во вкладке "Ссылка" выбираем "Медиафайл". При клике по изображению, картинка откроется в полном размере с затемненным фоном. Но перед этим вы должны установить плагин Wp Lightbox 2 и активировать его. Смотрим на пример

bloger

P.S. Через несколько обновлений моей темы, этот плагин перестал работать. Я решил не устанавливать больше плагины для увеличения картинок. И поэтому, воспользовался альтернативным методом, увеличение картинки при клике с помощью Javascript.

Для начала переходим по ссылке и качаем файл. Затем надо разархивировать его и открыть папку sbox. В ней будет 4 файла: imgs, simplebox.css, simplebox.js и simplebox_util. Все эти файлы нужно закачать в корень сайта с помощью FTP клиента. Корень сайта или корневая папка сайта это там где лежат файлы типа wp-admin, wp-content и т.д.

Следующее, что надо сделать, это добавить следующий код в файл footer.php, который находится в папке с вашей темой, перед закрывающим тегом </body>. И не забудьте вместо site.ru вписать ваш домен и сохранить.

Все готово! Теперь, когда вставляете в статью картинку и нажимаете кнопку "Добавить медиафайл", если вам нужно, чтобы при клике она увеличивалась, в настройках отображения файла нужно выбрать меньший или средний размер и в графе "Дополнительные настройки" в строке "Отношение" вписать "simplebox".

На этом все! Теперь, если читатель вашего блога кликнет на картинку, она увеличится до предельных размеров и это не создаст дополнительной нагрузки на сервер, как если бы это делалось с помощью плагина. Хотя метод с плагином работает эффектней. Выбор всегда за Вами!

\\\\\\\\\\\\\\\\ Самая выгодная банковская карточка│PAYEER® Platinum MasterCard
Сегодня на Zarabotokvseti.net поговорим о самой выгодной банковской карточке — платиновая Мастер Кард от Payeer. А так же, где и как можно её заказать. Все ...
\\\\\\\\\\\\\\\\ Как сделать содержание в статье блога
Сегодня на Zarabotokvseti.net мы научимся делать меню содержания статьи. Такое оглавление является очень удобным атрибутом, если ваш пост оказался непомерно большим по объёму. Часто, в ...
\\\\\\\\\\\\\\\\ Как раскрутить группу вконтакте бесплатно. Bosslike
Добрый день коллеги и гости моего блога! Сегодня хочу рассказать, о том как раскрутить бесплатно группу или любой паблик в популярных социальных сетях, таких, как Вконтакте, ...
\\\\\\\\\\\\\\\\ Бесплатный FTP клиент — Notepad++
Добрый день коллеги и гости моего блога! Все мы знаем, что такое "Notepad++". Конечно! Ведь это лучший текстовый редактор! Но не все знают, что его, ...
\\\\\\\\\\\\\\\\ Как создать подписную страницу бесплатно
Добрый день коллеги и гости моего блога! Сегодня я хочу рассказать Вам о том, как создать подписную страницу на вордпресс с помощью замечательного плагина. Почему ...

Комментарии 6

  • Максад, добрый день! Очень красивый, аккуратный и содержательный у вас сайт получился!
    Благодарю за статью, мне всегда было интересно, как же при клике увеличиваются картинки на сайтах, теперь знаю, как это можно сделать.

  • Максад, спасибо за подсказку. Кликабельность картинок меня тоже очень интересует. Пошла устанавливать плагин.smiley

  • А почему эффектнее с плагином? Я посмотрел, и с джаваскриптом не хуже. Себе все собираюсь такой вариант подачи картинок сделать, никак руки не дойдут. Ваш вариант мне нравится, возьму на заметку.

    • С плагином картинка увеличивается медленно и создается эффект некой мультипликации. А вообще, важен конечный результат. Тут я с Вами согласен Александр!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *