10:45 | 21.11.2024
Web-разработка
Реклама

Зуммер изображений для интернет-магазина

jQuery плагины с эффектом увеличения части изображения. Очень часто похожие решения использут в интернет магазинах для организации детального просмотра товара. При наведении курсора на изображение область под курсором увеличивается и отображается в блоке поверх фотографии.

В заметке собрано 14 различных jQuery плагинов, использующих эффект увеличения.

1. Плагин jQuery лупа

jQuery лупа

Увеличение квадратной области.

2. Cloud Zoom

Плагин для jQuery Zoomer

Этот плагин по качеству реализации ни чем не уступает коммерческим скриптам по масштабированию изображений, например, такому как Magic Zoom. Много различных возможностей и совместимость с наиболее популярными браузерами. Рекомендую посмотреть этот скрипт в деле на демонстрационной странице. Я думаю, он не оставит вас равнодушными.

3. jQuery плагин для увеличения области текста или изображения под мышкой

JQuery плагин для увеличения области текста

Относительно гибкий скрипт. Отображаемые области легко настраиваются с помощью CSS. Плагин увеличивает небольшую зону, находящуюся под мышкой. Переключение между большим и малым размером всего содержимого осуществляется двойным кликом

4. jQuery плагин для увеличения изображения

jQuery плагин для увеличения изображений

Выполнен в виде экрана iPhone.

5. MooTools плагин «Zoomer»

Mootools плагин

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

6. jQuery портфолио с zoom-эффектом

jQuery портфолио с эффектом масштабирования

Интересная реализация портфолио, созданная путем взаимосвязи двух jQuery плагинов: Cloud Zoom и Fancybox. При наведении курсора мыши на миниатюру появляется увеличенная копия области, находящейся под курсором. При нажатии на миниатюру открывается Fancybox галерея, с помощью которой можно просмотреть несколько полноразмерных изображений для данного проекта в портфолио.

7. jQuery плагин «Easy Image Zoom»

jQuery плагин

Увеличение области, находящейся под курсором.


1

2