www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Вебдизайн с jQuery - это очень просто!

• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery

jLoupe - красивый имитатор лупы

В предыдущей статье был рассмотрен плагин увеличения изображения Zoomy, имитирующий реальную лупу. В некоторых случаях его использование неудобно, так как лупа перекрывает основную картинку и затрудняет фокусировку на нужном участке. Для точного позиционирования точки увеличения можно использовать другой вариант лупы - jLoupe. Этот плагин для бесплатной библиотеки скриптов jQuery разработан веб-дизайнером Крисом Юфером (Chris Iufer). Он имеет значительно больше настроек и позволяет создавать красивые эффекты, имитирующие лупу, выводя увеличенный фрагмент изображения рядом с курсором-указателем.

Три варианта работы плагина jLoupe показаны на рисунке. Слева - лупа каплевидная и является ссылкой на вывод полномасштабного изображения, в центре - лупа прямоугольная без ссылки, справа - лупа в виде окружности. К сожалению, скругление, так же как и в рассмотренном ранее плагине лупы Zoomy, не работает в браузерах IЕ6 - IЕ8. Поэтому в них лупа всегда прямоугольная, а правый вариант, вообще, сплошное безобразие.

Примеры работы плагина jLoupe

Установка плагина лупы jLoupe

Сначала скачиваем архив. Затем, как всегда, чтобы избежать путаницы, создадим на сайте новую папку, назвав её jloupe, и распакуем в неё скачанный архив. У нас получится три файла:
jquery-1.8.3.min.js, jquery.jloupe.js и вспомогательное изображение для круглой лупы loupe-trans.png.

Далее добавляем в заголовок страницы, на которой мы планируем использовать эффект лупы, внутрь тега <head>...</head> следующие две строчки, указывающие пути к новым файлам:

<script type="text/javascript" src="jloupe/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jloupe/jquery.jloupe.js"></script>

Для работы плагина достаточно задать для изображения class="jloupe", а сам вывод лупы можно организовать несколькими способами:
1. Создать два изображения - основное (image.jpg) и увеличенное (image_big.jpg). В теге изображения, размещенного на странице, указать путь к увеличенному варианту с помощью атрибута data-original:
<img src="image.jpg" data-original="image_big.jpg" class="jloupe" alt="Книга" width="200" height="200" />.
2. Использовать только одно увеличенное изображение, а для его уменьшения в браузере задать нужные размеры на странице при помощи атрибутов width и height. Только не забывайте, что масштабирование, выполненное браузером, обычно ухудшает качество картинки:
<img src="image_big.jpg" class="jloupe" alt="Книга" width="200" height="200" />.
3. Если необходимо дать ссылку на открытие большого изображения или на другой объект, то используйте следующую форму:
<a href="image_big.jpg"><img src="image.jpg" class="jloupe" alt="Книга" width="200" height="200" /></a>.

На этом установка плагина jLoupe закончена, и вы можете посмотреть его работу, открыв страницу с изображением в браузере.

Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>.
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.

Настройка параметров плагина jLoupe

Основные настройки лупы jLoupe задаются в файле jquery.jloupe.js. Для их изменения откройте его в любом HTML-редакторе или в Блокноте. В самом начале файла есть строчки с доступными настройками, которые можно менять:

Свойство	Установка по умолчанию	Описание настройки лупы
width	200	ширина
height	200	высота
margin	6	отступ вокруг лупы
cursorOffsetX	10	горизонтальное расстояние от курсора
cursorOffsetY	10	вертикальное расстояние от курсора
color	false	разрешить использование цветов
borderColor	'#999'	цвет границы
backgroundColor	'#ddd'	цвет фона
radiusLT	0	верхний левый радиус скругления лупы
radiusLB	100	нижний левый радиус скругления лупы
radiusRT	100	правый верхний радиус скругления лупы
radiusRB	100	правый нижний радиус скругления лупы
image	false	адрес внешней картинки для лупы (image url) - определяет вид лупы. В правом примере - это изображение круга loupe-trans.png
repeat	false	повторение background image
fade	true	использование затемнения при выводе лупы
fadeIn	true	время затемнения при открытии (ms)
fadeOut	true	время затемнения при закрытии (ms)

Например, для показанного вверху статьи варианта каплевидной лупы (слева) использованы настройки по умолчанию, а для правого рисунка следующие: radiusLT: 100, margin: 12, borderColor: false, backgroundColor:'#ffffee', image: 'jloupe/loupe-trans.png'

Для варианта прямоугольной лупы (в центре) внешняя картинка не требуется (image: false): radiusLT: 0, radiusRT: 10, radiusRB: 0, radiusLB: 10, width: 300, height: 150, borderColor: '#f2730b', backgroundColor: '#000', fade: false, image: false

О других программах увеличения изображений, а также создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".

8.07.2013 г.

Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru