Авторизация



Напомнить пароль
Регистрация


РазработкаjQuery зуммеры, эффекты увеличения. Часть 1

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

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 плагин

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

8. jQuery плагин «Zoomy»

jQuery лупа

Эффект лупы для увеличения части изображения.

9. jQuery плагин «BeZoom»

Зуммер на jQuery

Зуммер на jQuery.

10. jQuery плагин «ImageLens»

Плагин jQuery Лупа

Эффект увеличительной лупы при наведении курсора мыши на изображение. Реализовано с помощью jQuery.

11. jQuery плагин «Magnifier»

jQuery зуммер

Эффект увеличения области изображения при наведении.

12. Зуммер изображений для интернет-магазина «jqZoom»

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

Можно использовать для реализации детального просмотра товара в интернет магазинах.

13. Просмотр большого изображения в ограниченной области

Навигация по большому изображению

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

14. AJAX-zoom плагин

Плагин для jQuery галереи

AJAX-zoom представляет собой плагин очень функциональной галереи, с большим набором функций. Плагин работает на JQuery и PHP и имеет более 250 вариантов отображения. В дополнение его функциональности — это очень гибкий плагин, который может быть интегрирован в любой сайт.

Подготовлено по материалам: efimov.ws

  • 0
  • Автор: efimov
  • Дата: 23 ноября 2011, 21:04
  • В избранное:


Комментарии (1)

rss свернуть / развернуть
Хорошая статья, добавте в нее еще и этот плагин zoomsl.tw1.ru Похож на Cloud Zoom, но совершенно бесплатен.
свернуть ветку
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.