Плагин для увеличения изображения «Easy Zoom»

26.02.16   Js / jQuery   1 324

jscriptВ этом уроке мы расскажем вам, как просто и быстро установить плагин для увеличения изображения «Easy Zoom» к себе на сайт.

Для начала нужно скачать исходные файлы.

Скачать архив можно по ссылке: easyzoom.rar.

Теперь, когда у нас есть все нужные файлы можно приступить к установке.

Шаг 1. Подключаем скрипты

Первым делом нужно подключить скрипты и добавить пару строк кода, для того, плагин начал работать. Для этого пишем код:

Шаг 2. Подключаем стили

Далее нужно подключить файл стилей. Для этого пишем код:

ID, который отвечает за внешний вид увеличенного изображения называется #easy_zoom и имеет следующий код:

#easy_zoom {
width: 500px;
height: 663px;
background: #ffffff;
top: 60px;
left: 350px;
overflow: hidden;
position: absolute;
border: 5px solid #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

Здесь вы можете оформить его как нужно вам. Что-то добавить, а что-то убрать.

Шаг 3. HTML-разметка

Далее нужно сделать HTML-разметку. Разметка будет простой:

Фото

Разметка состоит из простой ссылки и изображения. Ссылка ведет к изображению с оригинальным размером, а изображение – это миниатюра.

Опции плагина

У данного плагина также есть опции, которые вы можете настроить для своих нужд. Описал эти опции на русском языке сайт pcvector.net.

id

Значение по умолчанию: «easy_zoom»
ID вновь созданного зумом элемента. Можно использовать и собственное название, но не забыть его тогда подправить в CSS.

parent

Значение по умолчанию: «body»
Определяет DOM элемент в который будет вставлен элемент созданный зумом. Можно вставить в любое место DOM отредактировав это параметр.

append

Значение по умолчанию: «true»
Если установлено true (по умолчанию) вновь созданный элемент будет вставлен как последний дочерний элемент родительского элемента. Если установлено false, то вновь созданный элемент будет вставлен как первый дочерний элемент родительского элемента.

preload

Значение по умолчанию: «Loading…»
Сообщение появляющееся перед загрузкой большого изображения. Можно использовать любой текст. Если хотите использовать GIF картинку, то лучше внедрить её через background.

error

Значение по умолчанию: «There has been a problem with loading the image.»
В случае, если большое изображение не найдено или не может быть загружено, то появится это сообщение об ошибке. Можете отредактировать этот параметр по своему вкусу.

Данные опции нужно изменять в файле easyzoom.js в самом начале. В примере мы уже изменили некоторые опции: preload и error.

Финальный результат

Если вы все сделали правильно, то на данном шаге плагин должен начать работать. Для его проверки просто наведите курсор на миниатюру.

На этом урок окончен. Спасибо за внимание!

Автор урока: редакция REDSTAR
Материалы: pcvector.net и cssglobe.com

Урок для Вас подготовлен командой сайта red-star.pro.