Показать Меню
falbar Эффекта лупы на jQuery

Увеличение картинки с помощью эффекта лупы на jQuery

Эффекта лупы на jQuery

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

Эффекта лупы сегодня мы будем добиваться при помощи jQuery плагина okzoom.js. Особенностью его является простота и легкость установки. Мы просто подключим скрипт и применим новый метод к нужным нам изображениям. Перед тем как начать играться с okzoom добавлю, что это не первый скрипт на Фалбаре. Ранее я уже рассматривал плагин под названием loupe, и если сегодняшнее решение Вам не подойдет, то попробуйте воспользоваться им.

И так, приступим и начнем, как и всегда, с подключения скриптов. Нам понадобиться jQuery библиотека и сам плагин. Всё это мы прописываем в шапку HTML документа:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="okzoom.js" type="text/javascript"></script>

Теперь добавляем на страницу нашу картинку:

<img src="img.jpeg" alt="image" />

При помощи стилей изначально уменьшаем её размеры:

img{
	height: 320px;
}

Это необходимо, так как эффект увеличения происходит путём показа оригинального изображения при наведении на уменьшенный вариант. Нам только осталось воспользоваться методом okzoom(), что мы и делаем:

<script type="text/javascript">
	$(function(){

		$("img").okzoom({
			width: 180,
			height: 180,
			background: "transparent",
			border: "1px solid black",
			shadow: "0 0 5px #000"
		});
	});
</script>

Как видите, отработка плагина происходит после загрузки страницы, поэтому данный код можно добавить в любое место в HTML документе. А теперь, давайте разберем свойства, которые мы использовали в примере и те, что можно ещё применить.

  • width, height – ширина и высота лупы;
  • background – задний фон лупы (по умолчанию установлен белый цвет);
  • border, shadow – рамка и тень лупы;
  • round – вид лупы изначально с закруглёнными углами при изменении на false углы станут прямые;
  • backgroundRepeat – повторение изображения, отображаемого в лупе (где это может примяться, я пока не представляю, но возможность есть);
  • scaleWidth – при помощи этого свойства можно увеличить картинку (этот вариант подойдет, если Вы не хотите привязывать стили к скрипту).

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

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено