Эффект лупы для изображений

      jQuery

Здравствуйте, уважаемые читатели XoZbloga! В данной статье расскажу и покажу, один из способов реализации эффекта увеличительного стекла (лупы) для изображений на сайте. Автором данного решения является @_rishabhp. Для работы нам понадобится библиотека jQuery, а также будем использовать CSS3. То что получится в итоге Вы можете опробовать на демо странице или скачать исходники.

HTML разметка

Вся особенность разметки заключается в том чтобы присвоить, тем изображениям, у которых планируется использовать лупу, класс magniflier.

1
<img class="magniflier" src="image.jpg" width="300"/>

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

Стили CSS

Когда пользователь наводит курсор на изображение появляется увеличительное стекло. Эффект стекла достигается благодаря скругленным углам и тени.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.glass {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
 
  /* Создание эффекта стекла */
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
 
  /* Изначально скрыто */
  display: none;
}


Вот так выглядит лупа

Лупа, точнее блок div glass создается средствами jQuery, при наведении курсора выводится методом fadeIn. Но обо всем по порядку.

jQuery

И так, следующий код формирует блок div glass, который является увеличительным стеклом:

1
2
3
4
5
6
7
8
  // Добавляем увеличительное стекло
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);

    $('body').append(div);
  }

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

Для удобства помещаем эту функцию в переменную:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Определяем положение курсора
  var mouseMove = function(e) {
    var $el = $(this);

    // Получаем отступы до края картинки слева и сверху
    var magnify_offset = cur_img.offset();
   
    // Позиция курсора над изображением
    // pageX/pageY - это значения по х и у положения курсора от краев браузера
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;
   
    // Увеличительное стекло должно отображаться только когда указатель мыши находится над картинкой
    // При отводе курсора от картинки происходит плавное затухание лупы
    // Поэтому необходимо проверить, не выходит ли за границы картинки положение курсора
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0
      ) {
      // Если условие истинно то переходим дальше
      magnify(e);
    }
    else {
      // иначе скрываем
      ui.glass.fadeOut(100);
    }

    return;
  };

Следующим шагом является, расчет положения лупы над картинкой и положение изображения в лупе (т.к. увеличенная область изображения будет являться фоном для блока glass). После расчета полученные значения присваиваем CSS свойствам блока glass:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  var magnify = function(e) {

    // Основное изображение будет в качестве фона в блоке div glass
    // поэтому необходимо рассчитать положение фона в этом блоке
     // относительно положения курсора над картинкой
    //
    // Таким образом мы рассчитываем положение фона
    // и заносим полученные данные в переменную
     // которая будет использоваться в качестве значения
     // свойства background-position

    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
    var bg_pos = rx + "px " + ry + "px";
   
    // Теперь определим положение самого увеличительного стекла
    // т.е. блока div glass
    // логика простая: половину ширины/высоты лупы вычитаем из
     // положения курсора на странице

    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;
   
    // Теперь присваиваем полученные значения css свойствам лупы
    ui.glass.css({
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos
    });

    return;
  };


Увеличительное стекло в действии

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
  // Движение курсора над изображению
  $(ui.magniflier).on('mousemove', function() {
  // Плавное появление лупы
   ui.glass.fadeIn(100);
    // Текущее изображение
    cur_img = $(this);
    // определяем путь до картинки
    var src = cur_img.attr('src');
     // Если существует src, устанавливаем фон для лупы
    if (src) {
      ui.glass.css({
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'
      });
    }

    // Проверяем есть ли запись о первоначальном размере картинки native_width/native_height
    // если нет, значит вычисляем и создаем об этом запись для каждой картинки
    // иначе показываем лупу с увеличением

      if (!cur_img.data('native_width')) {
       
        // Создаем новый объект изображение, с актуальной идентичный актуальному изображению
        // Это сделано для того чтобы получить реальные размеры изображения
        // сделать напрямую мы этого не может, так как в атрибуте width указано др значение
     
        var image_object = new Image();

        image_object.onload = function() {
         
          // эта функция выполнится только тогда после успешной загрузки изображения
          // а до тех пор пока загружается native_width/native_height равны 0
       
            // определяем реальные размеры картинки
          native_width = image_object.width;
          native_height = image_object.height;

            // Записываем эти данные
          cur_img.data('native_width', native_width);
          cur_img.data('native_height', native_height);
       
            // Вызываем функцию mouseMove и происходит показ лупы
          mouseMove.apply(this, arguments);
          ui.glass.on('mousemove', mouseMove);
     
        };

        image_object.src = src;
     
      return;
      } else {
          // получаем реальные размеры изображения  
        native_width = cur_img.data('native_width');
        native_height = cur_img.data('native_height');
      }

    // Вызываем функцию mouseMove и происходит показ лупы
    mouseMove.apply(this, arguments);
    ui.glass.on('mousemove', mouseMove);
  });

На этом все. Эффект лупы для изображений готов. Для более детального знакомства и уж тем более использования рекомендую скачать исходники, так как здесь приведен не весь код ❗

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии, спасибо!

Источник статьи/урока: https://xozblog.ru

По материалам: http://codetheory.in/image-zoom-magnifying-glass-effect-with-css3-and-jquery/

Правила перепечатки

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Похожие статьи:

  1. Галерея изображений для сайта с эффектом лупы
  2. Галерея изображений в стиле Google Images
  3. Слайдер сравнения изображений (до и после)
  4. Эффект на Google Chrome Extension с помощью CSS3, jQuery и MooTools
  5. Галерея изображений на jQuery