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

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

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

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

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

      1. Замудрёно с плагином. Я твоим кодом несколько раз пользовался. Все коротко и работоспособно.
        Тем у кого уже картинки на сайте, что б каждой руками класс не добавлять,

        $(“#ID.CLASS IMG”).addClass(“minimized”);

        Если “путь” до картинки правильный, то должно работать.
        Или так

        $(“#ID-1.CLASS-1 IMG, #ID-2.CLASS-2 IMG”).addClass(“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 -> мобильный режим, картинка при первом клике криво встает, потом выравнивается

  12. Здравствуйте, у меня почему-то в браузере Chrome большая картинка сдвигается вниз, когда я проверил DT там в а в FireFox и Internet Explorer все нормально работает. Как мне решить эту проблему?

    1. Акбар, вы говорите про мою демо страницу? У меня проблем в Chrome нет, когда я там тестирую. Вообще не очень понятно что вы имели в виду под фразой “… когда я проверил DT там в а в”?

      1. Да да я про эту страницу имею ввиду, <… когда я проверил developer tools там а в ireFox и Internet Explorer все нормально т.е. >
        <div id="magnify" style="left: 10.5px; top: 161px; display: block;">
        а в FireFox и Internet Explorer все нормально т.е.
        <div id="magnify" style="left: 13.5px; top:1,16px; display: block;">

        Что же мешает мне, никак не понимаю.

        1. В этой статье, изображение позиционируется по центру экрана. Координаты верхнего левого угла высчитываются в зависимости от размера окна. Может быть, когда вы открываете страницу в Chrome он у вас в свернутом режиме находится? При той же открытой панели developer tools такой эффект может быть.

  13. Подскажите пожалуйста как можно сделать для всех картинок на странице без подстановки класса к картинкам. Что бы обернуто было к примеру в какой то id блок в нем все картинки при клике увеличивались.
    Спасибо за решение.

  14. Алексей, вопрос от полного ламера:
    Делаю родословное дерево, портрет лица слаборазличим, хочется, что бы при нажатии лицо увеличилось до хорошо различимого размера.
    Возможно ли каким-то образом сделать увеличение картинки jpg, в картинке jpg или другом формате?

  15. Здравствуйте, такой вопрос, как можно сделать эту же схему с увеличением картинки только по нажатию не на саму картинку а на лупу с id=”zoom” например. Лупа стоит в углу картинки с position: absolute, left:0, top:0 а по нажатию на нее как раз появлялась в popup данная картинка.
    Спасибо!

    1. Добрый день, Евгений. В принципе ни чего сложно тут нет. Сейчас событие срабатывает по клику по изображению, после чего по атрибуту src получается ссылка на изображение и выводится в popup. В вашем случае нужно знать где именно в html расположен элемент с id=”zoom” относительно маленького изображения, чтобы “добраться” до ссылки. У вас есть пример?

      1. Здравствуйте Алексей

        <a href="#" rel="nofollow ugc">
        <i></i>
        </a>
        <a href="#change" rel="nofollow ugc"></a>

  16. Рекомендация – сделать это на чистом js, чтобы снести нафиг библиотеку jquery, из которой сложно достичь высокой скорости загрузки, чтобы угодить гуглу.

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

    Дело в том, что, если оставить скрипт в неизменном виде, то:
    1. При первом клике по маленькому изображению увеличенное изображение смещается вниз от центра (при повторном клике центрируется правильно).
    2. Если браузер распознает изображения в формате .webp, то на странице маленькое изображение размещается в формате .webp, но при клике увеличенное изображение получается уже в формате .jpg
    Вот Ваш скрипт

    $(function(){
    $(‘.minimized’).click(function(event) {
    var i_path = $(this).attr(‘src’);
    $(‘body’).append(‘‘);
    $(‘#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’, ‘#magnify, #overlay’, function(event) {
    event.preventDefault();
    $(‘#overlay, #magnify’).fadeOut(‘fast’, function() {
    $(‘#magnify, #overlay’).remove();
    });
    });
    });

    Спасибо.

    1. Извините, не знаю почему, но сам тег почему-то с текста вопроса был удален.
      Дополняю свой вопрос тегом, для которого надо доработать скрипт увеличения картинки.

    2. Попробую еще раз. Видимо форма Комментария не позволяет размещать html-коды.
      Меня интересует доработка скрипта под тег picture с несколькими форматами изображений (webp, png, jpg) на выбор браузера.
      picture
      source srcset=”webp/img.webp” type=”image/webp”
      img src=”img/img.jpg” alt=”—” class=”minimized”
      /picture

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

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