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

21 февраля 2016 Антон Кулешов 1341 0

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

Реклама

Эффекта лупы сегодня мы будем добиваться при помощи 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 – при помощи этого свойства можно увеличить картинку (этот вариант подойдет, если вы не хотите привязывать стили к скрипту).

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Прогресс бар заполнения формы

15 июня 2016 Антон Кулешов

Необходимость заполнения длинных форм, зачастую, очень не нравится пользователям. Чтобы как-то снивелировать негативный эффект можно прикрепить к форме анимированный прогресс бар её заполнения. Сегодня речь пойдёт об JavaScript библиотеке под названием fort.

Простой lightbox на JavaScript без jQuery

30 июля 2014 Антон Кулешов

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

Делаем форму обратной связи на PHP

8 ноября 2014 Антон Кулешов

Из этой статьи вы узнаете, как сделать форму обратной связи на PHP для своего сайта. Скрипт будет обрабатывать данные, введённые пользователем, и отправлять результат на нужную вам почту. Мы предусмотрим вариант в PHP, когда форма обратной связи отработает, но при отправке письма возникнет ошибка. В этом случае - всю введённую информацию запишем в файл.