Артём Мáлков

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

8 мар2 комм

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

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

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

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

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

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

Файл
Размер
Ссылка
okzoom.zip
1,87 Kb
Скачать с сервера
Рекомендуем к просмотру
jQuery PointPoint – плагин, позволяющий сделать акцент на элементе
Модули и скрипты
Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3
Модули и скрипты
Убираем эффект красных глаз на фотографии с помощью программы Adobe Photoshop
Статьи и советы
2
комментария
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 5
    1066
      •  Команда Pandoge
    10 мар в 01:03

    Мика, Через CSS мне кажется мало вероятно.

    Разве что с изменением HTML-структуры. Но плагин в этом случае облегчает работу.

    • 0
    766
      •  Гости
    8 мар в 20:32

    А через css никак? Видел эффект зума при наведении, но не понял как это делается.

Подняться наверх
«Pandoge» - помощник вебмастера