Занимаясь продажами товаров в интернете, всегда нужно уделять внимание мелочам. Ведь, как известно, именно нюансы и эти самые мелочи влияют на окончательное решение потенциального покупателя. Как же нам помочь посетителю нашего сайта детально рассмотреть его интересующий товар? На этот вопрос есть определённый ответ – это добавление эффекта лупы при наведении на картинку, о котором мы и поговорим в этой статье.
Эффекта лупы сегодня мы будем добиваться при помощи jQuery плагина okzoom. Особенностью его является простота и легкость установки. Мы просто подключим скрипт и применим новый метод к нужным нам изображениям. Перед тем как начать играться с 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(), что мы и делаем:
$(function(){
$("img").okzoom({
width: 180,
height: 180,
background: "transparent",
border: "1px solid black",
shadow: "0 0 5px #000"
});
});
Как видите, отработка плагина происходит после загрузки страницы, поэтому данный код можно добавить в любое место в HTML документе. А теперь, давайте разберем свойства, которые мы использовали в примере и те, что можно ещё применить.
- width, height – ширина и высота лупы;
- background – задний фон лупы (по умолчанию установлен белый цвет);
- border, shadow – рамка и тень лупы;
- round – вид лупы изначально с закруглёнными углами при изменении на false углы станут прямые;
- backgroundRepeat – повторение изображения, отображаемого в лупе (где это может примяться, я пока не представляю, но возможность есть);
- scaleWidth – при помощи этого свойства можно увеличить картинку (этот вариант подойдет, если вы не хотите привязывать стили к скрипту).
В заключении хочется отметить, что это небольшой скрипт. Его можно использовать не только на страницах интернет-магазина, хотя такой способ увлечения картинок подходит именно для него, а и в других дизайнерских целях.