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