Случайный выбор победителя «Вконтакте»   •   Online-инструменты
562 просм
2 комм
Поделиться:

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

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

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

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

Увеличение изображения с эффектом лупы на 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>

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

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

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

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

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

ФайлРазмерСсылка
2
комментария
Мика
8.03 в 20:32
А через css никак? Видел эффект зума при наведении, но не понял как это делается.
  • 0
Мика, Через CSS мне кажется мало вероятно.

Разве что с изменением HTML-структуры. Но плагин в этом случае облегчает работу.
  • 5
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария