Как сделать лупу на сайте

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


HTML разметка

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

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

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

Стили CSS

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

.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, который является увеличительным стеклом:

  // Добавляем увеличительное стекло
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);
    $('body').append(div);
  }

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

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

// Определяем положение курсора
  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:

  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;
  };


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

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

  // Движение курсора над изображению
  $(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+. Не забывайте оставлять комментарии, спасибо!


Источник: http://xozblog.ru/2012/11/image-zoom/

Закрыть ... [X]

Эффект лупы для изображений XoZblog - Уроки и статьи по созданию Как сделать лягушку в огород

Как сделать лупу на сайте Эффект лупы или как зумировать изображение на jQuery
Как сделать лупу на сайте Эффект лупы для изображений с помощью jQuery RUDEBOX
Как сделать лупу на сайте Ответы надо сделать лупу как на сайте
Как сделать лупу на сайте Скрипт эффекта лупы Сайт на WordPress
Как сделать лупу на сайте Zoomy лупа на jQuery
Как сделать лупу на сайте Cached
Как сделать лупу на сайте XSD to WSDL - создание веб сервиса / Java /
«Сонник Земля приснилась, к чему снится во сне Земля» Вязание руками: техника и рекомендации. Что такое Известные и малоизвестные мифические существа мира Как сделать Пуфик Своими Руками Идеи для Как сделать кнопку на сайте ссылкой. Как создать кнопку для Костюм маленькой разбойницы. Как сделать костюм маленькой Мотоблок своими руками - чертежи, фото. Инструкции как Самые крутые фразы - m