jQuery и плагины: решения для просмотра больших изображений

Владимир | | CSS, HTML, JavaScript, Web дизайн, Web разработка.

jquery img zoom

Приветствую всех!

В этот раз речь пойдет о нескольких плагинах для jQuery, которые помогают организовать просмотр больших изображений на сайте.

Думаю, с этой проблемой в какой-то момент сталкиваются все веб мастера.

Представьте, у вас есть высококачественные изображения с высоким разрешением (фотографии, скриншоты и т.п.) и их нужно показать на сайте. Понятно, что вставить их, не меняя размеры, не получится. Картинки просто «порвут» дизайн. Поэтому предварительно нужно их уменьшить, но и возможность просмотра полноразмерного изображения необходимо обеспечить.

Классическое решение этой задачи – сделать каждую миниатюру ссылкой на полноразмерное изображение. Т.е. использовать разметку вида.

<a href="1.jpg"><img src="1_thumb.jpg" /></a>

где 1_thumb.jpg – уменьшенное изображение 1.jpg.

Главный недостаток такого подхода – посетитель покидает страницу, а затем должен на неё вернуться с помощью кнопки «Назад».

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

Для этого примера я решил остановиться на плагинах к библиотеке jQuery. Т.к. на данный момент она одна из самых популярных и, кроме того, аналоги можно найти для всех распространённых JS библиотек.

Хочу сразу отметить, что плагинов для работы с изображениями – сотни, и многие дублируют друг друга.

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

Чтобы было нагляднее, все описанные здесь примеры я разместил на демонстрационной страничке

Demo

Вариант 1. Предпросмотр при наведении мышки на изображение.

Есть несколько разновидностей таких плагинов, которые различаются в основном визуальными эффектами. В простейшем случае, для реализации подойдет любой плагин создания подсказок (tooltips). Например, Image Preview.

Использовать его не сложно. Размещаете на странице миниатюры со ссылками на полноразмерные изображения, подключаете jQuery и плагин, добавляете несколько CSS стилей и всё, можно пользоваться.

Рассмотрим пример.

Разметка страницы

<a href="images/1.jpg" class="preview"><img src="images/1t.jpg" alt="image 1" /></a>
<a href="images/2.jpg" class="preview"><img src="images/2t.jpg" alt="image 2" /></a>
<a href="images/3.jpg" class="preview"><img src="images/3t.jpg" alt="image 3" /></a>

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

Подключение JS файлов:

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="tooltip.js"></script>

И CSS стили:

a img {
    border: none;
}

#preview {
    background: none repeat scroll 0 0 #333333;
    border: 1px solid #CCCCCC;
    color: #FFFFFF;
    display: none;
    padding: 5px;
    position: absolute;
}

Их вы можете поменять. Главное – сохраните абсолютное позиционирование для блока предпросмотра (position: absolute). Иначе полноразмерная картинка будет вставлена внутрь страницы и испортит дизайн.

Теперь о достоинствах и недостатках.

Взгляните на демонстрационную страничку (первый ряд изображений).

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

Второй недостаток в том, что посетитель не всегда ожидает такого поведения и может случайно навести мышку на миниатюру, в результате часть текста окажется закрытой картинкой, а это раздражает.

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

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

Вариант 2. Увеличение картинки на весь экран.

Реализовать можно с помощью плагинов для создания галерей. Пример для этой статьи я сделал с помощью плагина Fancy Zoom.

В данном случае, при клике по миниатюре она увеличивается до размеров окна браузера (плагин контролирует эту величину), а остальная часть страницы затеняется.

Подключение и настройка плагина достаточно простые.

Разметка страницы должна позволять выбрать нужные изображения с помощью jQuery селекторов. Например, так:

<div id="fancy">
    <a href="images/1.jpg"><img src="images/1t.jpg" alt="image 1" /></a>
    <a href="images/2.jpg"><img src="images/2t.jpg" alt="image 2" /></a>
    <a href="images/3.jpg"><img src="images/3t.jpg" alt="image 3" /></a>
</div>

После этого, нужно подключить JS скрипты и передать плагину ссылки на полноразмерные изображения.

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.shadow.js"></script>
<script type="text/javascript" src="jquery.ifixpng.js"></script>
<script type="text/javascript" src="jquery.fancyzoom.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#fancy a').fancyzoom();
	});
</script>

Плагины shadow и ifixpng используются для создания тени вокруг полноразмерного изображения и исправления проблем IE при работе с png изображениями, соответственно.

Fancy Zoom имеет несколько полезных настроек, на которых я останавливаться не хочу, т.к. они достаточно подробно описаны в документации.

Теперь о достоинствах и недостатках.

Кликните по любому изображению во втором ряду на демонстрационной страничке. Картинка плавно увеличится и в правом верхнем углу появится кнопка «Закрыть».

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

Кроме того, ни о каких случайных срабатываниях тут речь не идёт. Картинка будет увеличена только в ответ на явное действие пользователя – клик мышкой.

Но читать текст на странице уже не получится. Т.е. посетитель может смотреть либо на картинку, либо – на содержимое страницы.

Вариант 3. Увеличение картинки в отдельном блоке.

Для демонстрации этого решения я выбрал плагин jqZoom.

Посмотреть как он работает можно на демонстрационной страничке (последний ряд). Когда вы наводите указатель мыши на изображение на нём появляется полупрозрачный прямоугольник, показывающий какая именно область картинки сейчас увеличена. Справа появится блок с увеличенным фрагментом изображения. Естественно, плагин не растягивает миниатюру, а просто показывает фрагмент полноразмерной картинки.

Разметка страницы для использования этого плагина не отличается от предыдущих вариантов.

<a href="images/2.jpg" class="jqzoom" title="image 2">
	<img src="images/2t.jpg" alt="image 2" />
</a>

Для использования плагина нужно подлкючить библиотеку jQuery, сам плагин, найти нужные изображения и вызвать для них метод jqzoom().

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jqzoom.pack.1.0.1.js"></script>
<script type="text/javascript">
	$(function() {
		$(".jqzoom").jqzoom();
	});
</script>

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

Теперь подумаем, что даёт использование такого плагина.

На мой взгляд, его можно воспринимать как компромиссное решение между двумя первыми вариантами.

Возможность просмотра полноразмерного изображения сохраняется, требуется минимум действий от пользователя, и при этом не будет закрыт ни один элемент на странице.

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

И, конечно, использование этого плагина потребует изменения дизайна страницы. В нём должна быть предусмотрена область для просмотра увеличенной картинки. Предыдущие плагины можно просто подключить к любой странице, и они никак не повлияют на её дизайн.

Обратите внимание. Все три решения используют стандартную разметку (картинка внутри ссылки). Такой подход гарантирует, что при отключённом JavaScript посетитель сможет просмотреть полноразмерное изображение.

В заключение, хочу отметить, что в этой статье рассмотрены далеко не все варианты решения задачи. Я выбрал те, которые считаю наиболее универсальными (подходят для большинства сайтов) и простые в использовании.

Если вам приходилось решать подобные задачи, и вы хотите о нём рассказать, пишите, буду рад обсудить 😉

Интересно почитать

Как привлечь клиентов в кафе и убедить их заказать больше чем обычно?

  • darkBox в коллекцию

  • mimoprohodil

    пример с jqzoom не работает в chromium

    • Он работает в хроме, но как-то «через раз». Я так понял здесь описано, как решить эту проблему (у самого пока руки не дошли проверить…): http://stackoverflow.com/questions/2539673/jqzoom-not-working-on-safari

      • deeserge

        Попробуйте вот этот плагин http://zoomsl.tw1.ru. Похож на Cloud Zoom v3.0, но совершенно бесплатен. Работает во всех браузерах, даже в ие8 поддерживается плавность анимации, чего не скажешь про другие бесплатные плагины.

    • Спасибо, исправил.
      Использовал это решение.

      • Странно, но все равно в хроме как-то не хочет работать.
        Из аналогичных есть еще плагин «Cloud Zoom» (http://www.professorcloud.com/mainsite/cloud-zoom.htm), судя по всему, он ведет себя стабильнее и возможностей там больше.

        • Какой версией хрома вы пользуетесь?
          У меня в 8.0.552.224 все нормально.

        • У меня такая же версия. Уже и кэш почистил, и Adblock отключил, но на демонстрационной страничке все равно пример не работает. Захожу через FF – все хорошо.
          Не работает как-то странно, при наведении справа появляется увеличенная область, но она не движется (хоть мышью при этом двигаю по изображению), т.е. отображается все так, будто мышь навели на верхний левый угол изображения и не двигают ею. Интересно, что если успеть навести на изображение мышь до того как оно появится (обновляя страницу через Ctrl+F5), под курсором появляется картинка и тогда палагин работает в штатном режиме, но как только вывести мышь за пределы изображения, а потом вернуть обратно, то опять работает «криво» как описывал выше.

        • Все равно не получается повторить ошибку. Какая у вас ОС?

  • Fancybox — мой любимый плагин

  • Привет! Хорошая статья, хотел бы еще дополнить плагином, который я вчера нешел http://vremenno.net/examples/jquery-zoomy-plugin/

  • Привет! Хорошая статья, хотел бы еще дополнить плагином, который я вчера нешел http://vremenno.net/examples/jquery-zoomy-plugin/

    • Красиво получается. Спасибо за ссылку, раньше я этого плагина не видел.

  • Mega7star

    Очень понравился первый пример! Написано все понятно, но как сделать, чтобы увеличенное изображение было немного меньше, чем настоящие большое???

    • В идеале — создать миниатюру нужного размера на стороне сервера. Есть довольно много готовых библиотек, разработанных для таких целей. Но можно сжать и средствами html — указать width и height для тега img. В этом случае реально будет загружаться полноразмерное изображение, а на странице оно будет уменьшено браузером.

      • Mega7star

        Владимир, я имею ввиду изображение которое подгружает плагин, а не то которое вставляется в html

        • Давайте рассмотрим мой пример. Плагин подгружает изображение 1.jpg (атрибут href ссылки), а миниатюра (1t.jpg) вставлена с помощью тега img. Оба эти рисунки могут быть миниатюрами какого-то большого рисунка. Т.е. если оригинал имеет размер 2000x2000px, то можете создать две миниатюры, например, с размерами 1500х1500 и 150х150 и использовать их.

        • Mega7star

          Владимир, а можете мне показать пример кода, а то сам как-то сообразить не могу, буду очень вам благодарен.

        • Есть много готовых библиотек, предназначенных для создания миниатюр.
          Например, phpThumb. Для создания миниатюры используйте метод resize (с нужными размерами в качестве параметров).
          Кроме того, у них очень неплохая документация.

  • Прикольно получается — вечно с картинками морочусь

  • отличные решение, пригодиться

  • Grimm

    А не проще ли сделать как у меня в блоге http://grimm.pp.ua/ изображения просто увеличиваются. Просто данный вариант очень не эргономичен. Он нарушает юзабилити сайта

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

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

  • Валерий

    А Вы не в курсе, как «Вариант 1» поправить так, чтобы при наведении на картинку, если она не вмещается в видимую область экрана, то увеличенная картинка смещалась влево относительно миниатюры? А такое много раз видел, причем на JQuery, но все готовые скрипты, которые я скачал и опробовал, смещают изображение в какую-то одну сторону… 🙁 Нужно, чтобы при наведении мышкой на миниатюры, которые находятся слева и увеличенное изображение вмещается в видимую область экрана — открывались вправо, а если не вмещается — влево. Это как-то просто делается, но никак не могу понять, как именно это сделать 🙁

    • Не уверен на счет готовых плагинов. Возможно, Вы сможете подобрать подходящий.

      Но если Вы пишите свой плагин, то задача решается достаточно просто.

      Получаем ширину окна

      var windowWidth = $(document).width();

      После этого проверяем координаты курсора и на их основании определяем положение подсказки.

      Я написал небольшой пример в jsFiddle. Проведите курсором над серыми квадратами, вы увидите, что зеленый квадратик будет появляться либо справа, либо слева от курсора.