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

Вебдизайн с 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-редакторе или в Блокноте. В самом начале файла есть строчки с доступными настройками, которые можно менять:

Например, для показанного вверху статьи варианта каплевидной лупы (слева) использованы настройки по умолчанию, а для правого рисунка следующие:
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 г.

Ещё статьи по теме "Создание, оптимизация и раскрутка сайта":
• Как раскрутить сайт (серия статей)
• Создание фотогалереи на сайте
• Создание формы обратной связи на сайте
• Создание иконки для сайта
• Создание выпадающего меню
• Увеличение изображений. Программа Highslide JS
• Создание гостевой книги на сайте
• Фон для сайта
• Вывод текущей даты на сайте
• Создание бегущей строки на сайте
• Создание "схемы проезда" на сайте
• Ключевые слова и продвижение сайта
• Оптимизация и ускорение компьютера. Обзоры программ
• Отправка файлов через форму обратной связи
• Сжатие фотографий для интернета и электронной почты