аватар Автор: Сергей Касаткин | 19 июня 2014 11:00

Статьи / jQuery /

Эффект лупы или как зумировать изображение на jQuery


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

Размечаем изображение: два способа


Можно использовать разметку использующую два изображения: оригинал и уменьшенную миниатюру. Оригинал указывается в атрибуте ссылки, а миниатюра в теге img:

<a class="demo" href="img1.jpg">
     <img src="img1_short.jpg" width="240" height="180" />
</a>


Можно использовать и сокращённую версию - только изображение

<img class="demo" src="img2.jpg" width="240" height="180" />


CSS


Добавляем стили.

a.demo { float:left; } 
a img { border:none; }
img.demo { float:right; }
.demo { 
     position:relative;  
     }
.loupe { 
     background-color:#444;
     background:rgba(0, 0, 0, 0.25);
     border:5px solid rgba(0, 0, 0, 0);
     }


Подключаем jQuery и пишем скрипт


Подключаем удалённо jQuery библиотеку

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


Подключаем плагин лупы (зуммирования)

<script type="text/javascript" src="jquery.loupe.min.js"></script>


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

<script type="text/javascript">
$('.demo').loupe();
</script>


Параметры лупы


$('.demo').loupe({
  width: 200, // ширина лупы
  height: 150, // высота лупы
  loupe: 'loupe' // установить css класс лупы - для курсора и тд
});


Демонстрация Скачать исходники


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



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


Комментарии к статье (vk.com)