Плагин для увеличения изображения «Easy Zoom»
В этом уроке мы расскажем вам, как просто и быстро установить плагин для увеличения изображения «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.
Значение по умолчанию: «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.
- Adobe Photoshop (11)
- CMS (15)
- CSS (29)
- HTACCESS (4)
- HTML (18)
- Js / jQuery (22)
- MS Office (26)
- OS Windows (39)
- PHP / MySQL (16)
- Видео обои для Windows (7)
- Дополнения (9)
- Иконки (12)
- Интересные статьи (23)
- Обложки для AIMP (8)
- Обои для рабочего стола (8)
- Оформление Windows (11)
- ПК, ноутбуки и периферия (17)
- Программы (11)
- Шаблоны для сайтов (20)
- Исправляем ошибку «Failed to load library ‘dxva2.dll’» в Skype
- Восстановление системы Windows 7
- Форматирование жесткого диска с помощью командной строки
- Разблокировка Windows (удаление баннера)
- Сброс пароля администратора Windows 7
- Как включить виртуальную клавиатуру в Windows 7
- Как удалить пароль с документа MS Word