KingComp – веб-программист
График работы: 9:00 - 18:00 Пн - Пт
Содержание страницы:

Zoom Image позволит вам увеличить изображение при наведении на нее курсора. Дополнительный бонус зум-скрипта — картинка оформляется через фон штатной кнопки, при нажатии на которую можно выполнить различные действия. С помощью zoom-эффекта можно детально рассмотреть необходимое изображение. Скрипт лупы — незаменимый помощник при оформлении карточек товара, изображений схем, планов — всего, что будет смотреться громоздко в своем первоначальном формате. Эффект приближения дает возможность красиво оформить свой сайт, используя миниатюры изображений.

В работе скрипта использовалась библиотека http://www.elevateweb.co.uk/i`mage-zoom.

Исходный код

Скопируйте в BODY следующий код

Редактор

Добавьте Кнопку и задайте class=zoom

Zoom-image скрипт

Загрузите для кнопки фоновое изображение. Оно будет использовано как полноразмерная картинка для зума.

Увеличить изображение на сайте

Чтобы этот фон не сбивал с толку, можете выставить яркость на 100%

увеличение размера изображения

В настройках Кнопки выберите в качестве содержимого изображение и загрузите его

Зум картинки при наведении

Аналогично настройте все кнопки и опубликуйте страницу.

Пример

Пример работы Zoom Image (размер файла 1.5 Мб)