Как увеличить картинку - эффект лупы , на atready.ru

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

Здравствуйте, уважаемые друзья и гости блога! Сегодня расскажу вам и соответственно покажу и дам скачать исходные материалы, как уже водится. Вообщем полный пакет о том, как увеличить картинку без потери качества или по другому сделаем с вами эффект лупы на сайте, которая увеличивает картинку на сайте при наведении на нее курсора в определенной части картинки, то есть эффект – 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);
 });

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

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

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

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

Поставьте «лайк».

Сделайте ретвит.

Поделитесь этим постом с друзьями в социальных сетях.

И конечно же, оставьте свой комментарий ниже

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

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

Вы будете первым, кто поставит оценку!

Комментарии: 2

Константин 05.07.2016 в 23:44

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

Ответить
1. Валерий Бородин (автор) 06.07.2016 в 09:21
  
  Привет Константин! Уже готовый код можно скачать.
  
  Ответить

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