Увеличиваем изображение при помощи плагина
Приветствую вас, уважаемые читатели блога! В сегодняшней статье хотел бы разобрать проблему больших изображений на сайте, разместить которые полностью не позволяет шаблон. Поэтому изображение приходится уменьшать, но при этом оно плохо читается. К тому же отображение картинки меньшего размера смотрится более эстетично и позволяет странице быстрее загружаться. Но, как же быть, если мы хотим, чтобы посетитель увидел изображение в полном размере? Для этого существует плагин для увеличения изображения.
Плагин для увеличения изображения WP Featherlight
К сожалению стандартные способы и встроенная в движке WordPress функция просмотра больших изображений, не всегда являются хорошим решением. Потому как при нажатии на изображение пользователя перебрасывает на другую страницу, и ему приходится возвращаться к статье посредством нажатия на кнопочки «возврат» в браузере.
Вставка картинки в статью со ссылкой, на движке возможна двумя способами: в виде Медиафайла и Страницы вложения.
При выборе ссылки медиафайл, посетителям сайта, после нажатия на картинку, открывается новое окно с изображением в реальном размере. В случае если мы задаем ссылку как страницу вложения, открывается страница созданная WordPress автоматически для каждого медиафайла.
И в том и в другом случае, посетителей перенаправляет на другую страницу, и в результате, они скорее всего покинут ваш сайт.
Более удобным способом будет показ изображения большого размера во всплывающем окне, чтобы посетитель при этом никуда не уходил с сайта. А сделать это функционально нам поможет специальный плагин, который называется WP Featherlight.
Примечание: в некоторых темах может быть встроена такая функция, поэтому перед тем как устанавливать плагин, проверьте возможность просмотра увеличенных изображений у себя на сайте.
Хочется отметить почему я выбрал именно этот плагин среди многих, схожих по функционалу:
- увеличенная картинка легко закрывается при помощи крестика в правом верхнем углу;
- при клике на изображение оно быстро увеличивается, в то время как остальная часть экрана затемнена;
- помимо того, что появляется крестик для закрытия, плагин предусматривает возможность выхода из режима нажатием по области, где нет картинки;
- плагин весьма легок, с минимальным количеством кода, тем самым не увеличивает нагрузку на блог.
Вам потребуется всего лишь установить плагин и затем активировать его, никаких настроек делать больше не придется, он начнет сразу выполнять свою функцию.
Примечание: вы должны будете при добавлении картинки в графе ссылка присваивать ей параметр медиафайл, чтобы плагин смог ее увеличить.
Так как у плагина нет никаких настроек, то он требует минимальных ресурсов. Отсутствие настроек приводит к тому, что его кодировка минимальна, что, как я уже упоминал, позволяет не бояться, что тем самым ваш сайт будет медленнее работать, либо долго грузиться.
А вот как выглядит увеличенное изображение при помощи плагина на компьютере:
Увеличиваем картинку без плагина
Плагин для увеличения изображения это хорошо, но что если мы хотим добиться эффекта увеличения изображений вообще без плагина? Для этого можно воспользоваться специальным скриптом, который создает такой же эффект по увеличению картинок на сайте. Проверить его работу можно если нажать по картинке слева:
Не правда ли интересно смотрится. Как и в случае с плагином кликаем по изображению, но открывается оно не в отдельном окне браузера, что не очень удобно, а в виде всплывающего окна, во весь размер, ограненный рамкой с крестиком в правом верхнем углу, да еще и можно подписывать картинку, как это показано у меня.
Если такой эффект по увеличению картинок пришелся вам по душе, то можете смело им воспользоваться! Делается он с помощью специального скрипта, о настройке которого я собираюсь написать ниже.
Продолжим. Делается все действо в три несложных шага:
- Качаем скрипт и заливаем его на свой хостинг
- В файле footer.php прописываем небольшой код
- Добавляем нужное изображение в статью блога
Итак поехали! Качаем тот самый скрипт. Далее его нужно скопировать в корневую часть блога. Корень блога это то место, где находятся такие папки как wp-admin, wp-content и другие. Отлично, первый шаг сделали!
Теперь вам нужно будет перенести код, который я привел ниже в файл footer.php той темы блога, которая установлена у вас в данный момент на блоге. А вот и сам код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript" src="http://example.com/simplebox_util.js"></script>
<script type="text/javascript">
(function(){
var boxes=[],els,i,l;
if(document.querySelectorAll){
els=document.querySelectorAll('a[rel=simplebox]');
Box.getStyles('simplebox_css','http://example.com /simplebox.css');
Box.getScripts('simplebox_js','http://example.com /simplebox.js',function(){
simplebox.init();
for(i=0,l=els.length;i<l;++i)
simplebox.start(els[i]);
simplebox.start('a[rel=simplebox_group]');
});
}
})();</script> |
Примечание: не забудьте заменить example.com на ваше доменное имя сайта. Этот код следует вставить перед закрывающимся тегом файла footer.php
ОК! Предварительные настройки мы сделали. Теперь перейдем к тому, как вставлять картинки, чтобы они увеличивались при нажатии. Для этого как обычно добавляем картинки в статью, нажимая в текстовом редакторе на «Добавить медиафайл»:
Далее в настройках отображения файла выбираем ссылку в виде «Медиафайл»:
и нажимаем на кнопку «Вставить в запись». Затем открываем окно редактирования изображения в визуальном редакторе:
Здесь настраиваем размер изображения, чтобы картинка соответствовала нужному размеру и влезала в область статьи. Далее переходим в раздел Дополнительные настройки, находим графу «Отношение» и прописываем в нее simplebox, как это показано на картинке:
Вот и все! Теперь ваше изображение будет красиво появляться во всплывающем окне увеличенного размера. При этом не нужно устанавливать плагин для увеличения изображения, который может давать дополнительную нагрузку на блог.
По моему так будет даже проще. Но, если что-то из описания было вам не понятно, пишите вопросы в комментариях, постараюсь ответить. При этом я могу давать эффект всплывания картинок не всем, а только тем, которые сам выбираю для себя. Остальные картинки можно оставить прежнего размера. На этом буду прощаться, всех благ!
