Увеличение изображения по клику

увеличение изображения по кликуUPD от 04.05.2016 Если у вас нет желания разбираться с кодом, то приглашаю к тестированию моего плагина Litezoom!

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

Итак, суть идеи — скрипт должен работать с любыми изображениями с классом minimized на странице, не должно быть ни каких скрытых элементов (зачем засорять код страницы) и изображение должно выводиться в центр экрана.

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

  1. изображения, которые мы хотим увеличить, должны иметь класс minimized;
  2. при клике по изображению, перед закрывающимся тегом </body> будет добавляться <div> с классом magnify в который будет выводится наша картинка и центрироваться на странице и <div> с классом overlay, затемняющий фон
  3. при клике по кнопке закрытия или затемняющему фону, увеличенное изображение надо закрыть, а добавленные элементы удалить

Начнем. Сначала выведем изображение:

Теперь оформим:

и сам скрипт:

 

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

DEMO

12 комментариев

    1. Дмитрий, сама реализация в wordpress не будет отличаться от описанной мной. Тут больше упирается в знание движка вашего сайта и шаблона в частности. css необходимо дописать в ваш файл стилей, изображениям выставляем класс minimized, скрипт копируем в файл и подключаем. Но в случае, если шаблон будет периодически обновляться, придется каждый раз это проделывать, поэтому возможно оптимальнее написать простенький плагин.
      В рамках комментария подробно описать процесс трудно, но я могу в ближайшее время написать статейку или даже сам плагин.

  1. спасибо за статью. Как раз решил сделать у себя на сайте подобное. Только вы забыли здесь указать, что заместо $(document).height() надо использовать $(window).height(), иначе картинка в пампасы съедет. А для #magnify указать position: fixed;

    1. Марина, выдаются ли какие-нибудь ошибки в консоли (если нажать F12)? Как вариант — не подключен jQuery или подключена старая версия.

  2. было бы здоров чтоб ещё можно было листать картинки при условии что их несколько на странице. Т.е. например вываливается таблица с превьюшками, пользователь находит понравившуюся, кликает на неё, она увеличивается, и чтоб не заставлять его закрывать эту картинку и кликать на другую предусмотреть стрелки или иные элементы для пролистывания (уже увеличенных картинок) имеющихся на странице/галлерее. Весь блок превью можно заключить в ID что скрипт знал откуда подставлять фото.

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

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

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