Приветствую всех!
В этот раз речь пойдет о нескольких плагинах для jQuery, которые помогают организовать просмотр больших изображений на сайте.
Думаю, с этой проблемой в какой-то момент сталкиваются все веб мастера.
Представьте, у вас есть высококачественные изображения с высоким разрешением (фотографии, скриншоты и т.п.) и их нужно показать на сайте. Понятно, что вставить их, не меняя размеры, не получится. Картинки просто «порвут» дизайн. Поэтому предварительно нужно их уменьшить, но и возможность просмотра полноразмерного изображения необходимо обеспечить.
Классическое решение этой задачи – сделать каждую миниатюру ссылкой на полноразмерное изображение. Т.е. использовать разметку вида.
<a href="1.jpg"><img src="1_thumb.jpg" /></a>
где 1_thumb.jpg – уменьшенное изображение 1.jpg.
Главный недостаток такого подхода – посетитель покидает страницу, а затем должен на неё вернуться с помощью кнопки «Назад».
На данный момент существует множество решений, которые позволяют получить более красивое решение этой задачи.
Для этого примера я решил остановиться на плагинах к библиотеке jQuery. Т.к. на данный момент она одна из самых популярных и, кроме того, аналоги можно найти для всех распространённых JS библиотек.
Хочу сразу отметить, что плагинов для работы с изображениями – сотни, и многие дублируют друг друга.
Я же хочу показать основные подходы с примерами для решения задачи и обсудить их достоинства и недостатки, а какой именно плагин использовать – решать вам.
Чтобы было нагляднее, все описанные здесь примеры я разместил на демонстрационной страничке
Вариант 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 посетитель сможет просмотреть полноразмерное изображение.
В заключение, хочу отметить, что в этой статье рассмотрены далеко не все варианты решения задачи. Я выбрал те, которые считаю наиболее универсальными (подходят для большинства сайтов) и простые в использовании.
Если вам приходилось решать подобные задачи, и вы хотите о нём рассказать, пишите, буду рад обсудить 😉
Интересно почитать
Как привлечь клиентов в кафе и убедить их заказать больше чем обычно?
