Увеличение картинки на сайте по клику

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

Как сделать увеличение картинки по клику для сайта работающем на вордпресс с помощью плагина «Аuto-highslide» и пойдет речь в этой статье.

Несколько лет на своих сайтах я использую плагин вордпресс «Аuto-highslide». Он настолько неприхотлив и безотказен, что я забываю о его существовании.Только собираясь написать о нем статью поинтересовался его автором и возможными обновлениями. В репозитории плагинов вордпресс я его не нашел, скорее всего автор прекратил его поддержку.

Но плагин то работает, совершенно не требует настройки, со своими задачами справляется прекрасно. Поэтому предлагаю использовать его и вам. Ссылка на скачивание будет в конце статьи.

 

плагин «Аuto-highslide». Он настолько неприхотлив и безотказен, что я забываю о его существовании.

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

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

Что бы изображение увеличивалось по клику необходимо при его добавлении в запись или на страницу указать в настройках ссылку на медиафайлЕсли это все вы сделали, то переходим на страницу смотреть что получилось. А получилось все замечательно. Над кликабельной картинкой курсор примет вид лупы с крестиком посредине, подсказывая посетителю что хорошо бы кликнуть по ней, и будьте уверены- он это сделает!

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

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

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

При помещении курсора над картинкой появляется подсказка «Кликните для закрытия, зажмите левой клавишей для перемещения, кликайте стрелкой «некст» для навигации

При помещении  курсора над картинкой появляется подсказка «Кликните для закрытия изображения, зажмите левой клавишей для перемещения, кликайте стрелкой «вперед » и «назад»  для навигации по всем изображениям на странице», язык подсказки увы- английский.

Но суть ясна. Если кликнуть по картинке и затем листать кнопкой некст, значит иметь возможность просмотреть все изображения на странице как в галерее. Так что не сомневайтесь нужно ли или нет- скачивайте, устанавливайте и пользуйтесь.

Скачать плагин «Аuto-highslide»  по прямой ссылке

 

Когда писал статью, то наткнулся на сайте www.scrollleiste.de   на аналогичный плагин, «highslide-integration_v2.2» очень похожий на первый, возможно авторство у них одно и тоже, я не уточнял. Забавно, но этого плагина так же нет в репозитории вордпресс. Плагин вордпресс «highslide-integration_v2.2» в принципе делает почти тоже самое что и «аuto-highslide» – увеличивает  изображение по клику, но в нем добавлено еще несколько фишек.

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

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

Мне не очень нравится когда панель навигации  перекрывает собой часть изображения и функция листания в записях мне тоже не очень нужна. Кроме того плагин «highslide-integration_v2.2»  потяжелел по весу в два раза по сравнению с «аuto-highslide» .

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

Если у вас возникнут вопросы по поводу этих двух плагинов, то пожалуйста обращайтесь

 

 

 

Cтатьи на похожие темы

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

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