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

Картинка для увеличения по клику

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

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

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

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

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

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

<div class="image__wrapper">
  <img src="https://codernote.ru/files/keyboard.jpg" class="minimized" alt="клик для увеличения" />
</div>

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

/* картинка на странице */
.minimized {
  width: 300px;
  cursor: pointer;
  border: 1px solid #FFF;
}

.minimized:hover {
  border: 1px solid yellow;
}

/* увеличенная картинка */
#magnify {
  display: none;

  /* position: absolute; upd: 24.10.2016 */
  position: fixed;
  max-width: 600px;
  height: auto;
  z-index: 9999;
}

#magnify img {
  width: 100%;
}

/* затемняющий фон */
#overlay {
  display: none;

  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  z-index: 9990;
}

/* кнопка закрытия */
#close-popup {
  width: 30px;
  height: 30px;

  background: #FFFFFF;
  border: 1px solid #AFAFAF;
  border-radius: 15px;
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 15px;
}

#close-popup i {
  width: 30px;
  height: 30px;
  background: url(https://codernote.ru/files/cross.png) no-repeat center center;
  background-size: 16px 16px;
  display: block;
}

@keyframes rota {
 25% { transform: rotate(360deg); }
}

#close-popup:hover {
  animation: rota 4s infinite normal;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

и сам скрипт:

$(function(){
  $('.minimized').click(function(event) {
    var i_path = $(this).attr('src');
    $('body').append('<div id="overlay"></div><div id="magnify"><img src="'+i_path+'"><div id="close-popup"><i></i></div></div>');
    $('#magnify').css({
	    left: ($(document).width() - $('#magnify').outerWidth())/2,
	    // top: ($(document).height() - $('#magnify').outerHeight())/2 upd: 24.10.2016
            top: ($(window).height() - $('#magnify').outerHeight())/2
	  });
    $('#overlay, #magnify').fadeIn('fast');
  });
  
  $('body').on('click', '#close-popup, #overlay', function(event) {
    event.preventDefault();

    $('#overlay, #magnify').fadeOut('fast', function() {
      $('#close-popup, #magnify, #overlay').remove();
    });
  });
});

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

DEMO

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

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

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

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

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

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

    1. Можно, но, если на сайте уже подключен jQuery зачем цеплять еще одну библиотеку? Да и суть этой статьи рассказать как это работает 🙂

    1. Добрый день, Евгений!
      Получить alt или title: var i_title = $(this).attr('title');
      И потом добавить вывод после img:
      <img src="'+i_path+'">
      <p>'+i_title+'</p>

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

  3. Здравствуйте! Спасибо огромное!!! Идеальное решение для моей задачи! Хотелось бы только добавления в архив для скачивания html-файл. Ибо мне, а я дизайнер, сложновато было поставить все правильно. Спасибо!

  4. Доброго времени суток. Подскажите как в увеличенном режиме сделать кнопки переключения? Понимаю, что это будет похоже на слайдер, но нужно чтобы можно было листать. Заранее спасибо. Буду очень благодарен за помощь.

    1. Добрый день, Артём! Вариантов, как реализовать слайдер много, мне трудно ответить быстро на этот вопрос, потому что сам реализовать его не пробовал. У меня есть желание разобраться с реализацией, но сейчас, к сожалению совершенно нет на это времени 🙁

  5. Странная вещь…
    все, что тут написано = на одной странице сайта прекрасно работает
    правда в Ф12-консоль выдает такое:
    Uncaught TypeError: $(…).litezoom is not a function
    at index.php:899

    тут же перенесенное на другую страницу = не работает вовсе
    кроме желтой рамки при наведении мыша никаких видимых процессов
    ф12-консоль выдает уже такое:
    Uncaught ReferenceError: $ is not defined
    at litezoom.js:1
    разница в тесте страниц только / нет, убираю разницу — все равно то же самое…

    1. Добрый день, Михаил!
      Мне кажется что эти ошибки возникают из-за конфликта с другими плагинами jQuery, либо не установлена сама библиотека

      1. я скопировал все фрагменты кода
        CSS -> CSS
        JS -> JS
        вызов компонента в низ страницы
        тэг — вокруг картинки
        на первой страничке все прекрасно заработало в первый же момент

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

  6. Добрый день!
    Помогите применить данную функцию на yandex картах?

    Создал специальную карту yandex для компании. В каждой метке есть картинка, вот необходимо ее так же увеличивать при клике. Возможно ли реализовать такую функцию?

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

  8. Добрый день.
    Спасибо большое за решение.
    При реализации столкнулся с такой проблемой, Картинки разноразмерные и при фиксированной ширине одни сжимаются другие растягиваются, можно ли как то сделать что бы открывался оригинал а не подстраивать под фиксированное окно?

    1. Станислав, в моём примере всплывающая картинка встраивается в блок с максимальной шириной 600px. Самой картинке задаётся ширина 100%, а высота устанавливается пропорционально. С такой реализацией описанная вами ситуация у меня не моделируется, вы ни чего не меняли в коде? 🙂

      1. Спасибо, Разобрался.
        Задал значение max-width: «auto» . Получил то что хотел, картинки открываются в оригинальном размере.

  9. Спасибо за дельный совет с реализацией, искал что то подобное, и здесь нашел.
    Устраивает тем, что на сайт подгружаю изображения с другого хостинга, обрабатываю его своим класом и тегом , потребовалась доработка. что бы можно было увеличить изображение.Воспользовался Вашей подсказкой.
    Немного модернизировал под себя, скрины работы
    https://skr.sh/s226vcjjndL
    https://skr.sh/s22ZO0qLYbE

  10. Объясните пожалуйста вот эти строчки кода
    , для чайника)
    left: ($(document).width() — $(‘#magnify’).outerWidth())/2,
    top: ($(window).height() — $(‘#magnify’).outerHeight())/2

    1. Ирина, этот код отвечает за центрирование увеличенного изображения на экране. Позиционируется (задаются координаты) верхний левый угол изображения. Поэтому, для того, чтобы изображение было в центре нам нужно (на примере центрирования по горизонтали) взять ширину экрана, вычесть ширину изображения (получим сумму отступов справа и слева от изображения до края экрана) и поделить на 2. По вертикали тоже самое. left — центрируем по горизонтали, top — по вертикали.

  11. shift+ctrl+j -> мобильный режим, картинка при первом клике криво встает, потом выравнивается

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

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