Эффект лупы или как зумировать изображение на 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 класс лупы - для курсора и тд
});

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

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