Создадим инструмент-лупа для просмотра деталей крупных изображений. Примеры работы скрипта:

Подключаем скрипт и его инициализацию, указываем на какой элемент воздействует лупа. В примере ниже на класс demo

<script type="text/javascript" src="/wp-content/themes/tester/js/jquery.loupe.min.js"></script>
<script type="text/javascript">$('.demo').loupe();</script>

Плагин можно применить к двум типам html-шаблонам:

Миниатюра + полноразмерная:

<a class="demo" href="full_size_img.jpg">
<img src="min_size_img.jpg" width="191" height="240" />
</a>

Только полноразмерная:

 <img class="demo" src="full_size_img.jpg" width="191" height="240" >

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

Чтобы запустить плагин на требуемых изображениях, в первом случае, нужно будет вызвать метод плагина на объекте jQuery с элементом ссылки, а во втором случае, на элементе изображением:

// для первого случая:
$('a.demo').loupe();

// для второго случая:
$('demo').loupe(); // для изображений с классом demo

$('img').loupe(); // для всех изображений

Можно добавить css для лупы: увеличить, уменьшить, сделать круглой, добавить обводку, тень, !скрыть курсор.
И на всякий случай надо сбросить свойство max-width для изображения под лупой.

.loupe {
    width: 500px !important;
    height: 300px !important;
    /*border-radius: 50%;*/
    cursor: none;
}
.loupe img {max-width: none;}

Поделиться в соц. сетях: