Увеличение изображения с эффектом лупы на jQuery

Большое количество интернет-магазинов присутствует сейчас в сети Интернет. Создавая и поддерживая свой сайт в будущем, необходимо продумать каждую его деталь.

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

Для того, чтобы немного украсить ваши фотографии, добавим им интересный эффект, в нашем случае – эффект лупы.

Для реализации поставленных целей мы будем использовать готовую библиотеку jQuery – OKZoom.

1. Для начала, если у вас отсутствует стандартная библиотека jQuery – подключите ее, например, от Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Сделать это желательно в секции HEAD.

2. Далее скачиваем архив в конце статьи. Распаковываем и содержимое грузим на ваш сайт по FTP или другим удобным для вас способом, после чего перед закрывающим тегом </body> подключаем библиотеку OKZoom и скрипт для ее вызова:

<script src="/js/okzoom.js" type="text/javascript"></script>

<script>

	$(function() {

		$("img").okzoom({ // img - применяем ко всем изображениям на сайте
			width: 180, // Ширина лупы
			height: 180, // Высота лупы
			background: "transparent", // Фон лупы
			border: "1px solid black", // Обводка лупы
			shadow: "0 0 4px #000" // Тень лупы
		});
		
	});

</script>

Установка закончена.

Помимо тех параметров, которые приведены в примере, есть еще несколько, о которых также напишу пару слов.

1. round: false – квадратная форма лупы (убирает закругление углов).
2. backgroundRepeat – выполнить повтор изображения в лупе. По умолчанию - no-repeat

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

Если вы столкнулись с трудностями – не стесняйтесь и задавайте вопросы в комментариях – мы обязательно постараемся вам помочь.