Как увеличить картинку – эффект лупы

Как увеличить картинку без потери качества – эффект лупы на сайте

Здравствуйте, уважаемые друзья и гости блога! Сегодня расскажу вам и соответственно покажу и дам скачать исходные материалы, как уже водится. Вообщем полный пакет о том, как увеличить картинку без потери качества или по другому сделаем с вами эффект лупы на сайте, которая увеличивает картинку на сайте при наведении на нее курсора в определенной части картинки, то есть эффект – zoom картинки.

Если Вас это заинтересовало, тогда прошу Вас пройти далее и ознакомиться полностью с материалом, который я для Вас подготовил …

Zoom картинки или как увеличить картинку на сайте при помощи jQuery

Все о том, как увеличить картинку без потери качества с помощью jquery и добиться эффекта лупы на вашем сайте при наведении на нее курсора, Вы узнаете, если прочтете до конца данную статью.

Вот пример как увеличить картинку:

пример
пример

А также сможете скачать исходные файлы, которые вам помогут воспроизвести эффект лупы для картинки на вашем сайте. Но сначала посмотрите демонстрационные материалы:

ДЕМО ZOOM ЭФФЕКТ

Теперь давайте с вами разберемся, как работает лупа для сайта, чтобы увеличить картинку?!

Для начала нам нужно создать HTML документ:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Как увеличить картинку - эффект лупы | atready.ru - заработать в интернете</title>
<!-- Стили для лупы -->
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="screen" href="header.css"/>

</head>

<body>
<header>
<p>Как увеличить картинку - эффект лупы <a href="https://atready.ru/dlya-sajta/uvelichit-kartinku.html" class="stuts">Перейти к статье на<span>atready.ru</span></a></p>
</header>

<!-- Блок для изображений -->
<div id="wrap">

  <h2>Как увеличить картинку - эффект лупы</h2>
    
  <!-- Изображения -->
  <div class="product"><img class="magniflier" src="3yiC6Yq.jpg" width="300"/></div>
    <div class="product"><img class="magniflier" src="40Ly3VB.jpg" width="300"/></div>
    <div class="product"><img class="magniflier" src="00kih8g.jpg" width="300"/></div>
    
</div>

<!-- Подгрузим prefix-free для более удобного использования CSS3 -->
<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" type="text/javascript"></script>

<!-- Подключаем библиотеку jQuery -->
<script src="https://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

<!-- Скрипт лупы -->
<script src="script.js" type="text/javascript"></script>
</body>
</html>

И в нем мы с вами присвоим изображениям на которые будет распространяться эффект лупы:

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

Теперь подключаем 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;
  };

Еще нам нужно рассчитать положение лупы на картинке и присвоить стили CSS:

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

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

СКАЧАТЬ ИСХОДНИКИ

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

Если вам понравился материал пожалуйста сделайте следующее…

  1. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже :)

Спасибо за внимание!

Всегда ваш Валерий Бородин

Вы будете первым, кто поставит оценку!
Понравилась статья? Поделиться с друзьями:
Комментарии: 2
  1. Константин

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

    1. Валерий Бородин (автор)

      Привет Константин! Уже готовый код можно скачать.

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