UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Показателем богатства является количество времени, которое человек может прожить не работая. © Жизнь

»

Введите код полученный после подписки

  • 4

  • 0

Исследование Интернет-Магазина WildBerries.ru. Увеличение масштаба изображения с помощью плагина ElevateZoom

Автор - Жур Артур | Добавлено - 2014-01-09 | Просмотров - 4881 | Скачено - 48

В этом уроке мы с вами реализуем увеличение масштаба изображений при наведении курсора на картинку с помощью специального плагина ElevateZoom.

1Подключение плагина JQuery и ElevateZoom

Первое что нужно это подключить плагин JQuery, скачать его можно тут. Разместите его на ваш сайт и подключите к страницам перед закрывающим тегом <head/>. Без этого плагина ElevateZoom работать не будет!

Подключение JQuery


Подключение ElevateZoom


Теперь нужно подключить код плагина ElevateZoom. Укажите его перед закрывающим тегом <head/> .Данный код для одиночной картинки.

 

2HTML код


Связываем плагин и картинку с помощью id zoom_image

  • src="image.jpg" - Маленькая картинка.
  • data-zoom-image="bigimage.jpg" - Большая картинка.

3Группа картинок

Код для галереи.

 

gallery:'gal1' - id блока с группой картинок.

HTML код галереи.




  • data-image - В этот атрибут указываем маленькую картинку
  • В <img/> указываем миниатюрную картинку.
  • data-zoom-image - В этот атрибут указываем большую картинку, которая будет появляться при увеличении.

С помощью id img_group связываем плагин и миниатюрные картинки.

Интересное

Комментарии