Загрузка полноразмерных изображений из превью с помощью JavaScript

Старая диллема – как открывать полноразмерные изображения при клике на превью: в этом же окне или в новом? В последнее время часто используется третий вариант – подгружать полноразмерную картинку с помощью JavaScript. Если пользователю надо просто взглянуть на увеличенное изображение, это, на мой взгляд, самый оптимальный вариант: пользователю не приходится возиться с новыми окнами или нажимать кнопку “Назад”, чтобы вернуться обратно, после того, как в текущем окне открылась картинка.

Для одного из своих проектов я решил применить подход с JavaScript. Здраво рассудив, что для такой популярной задачи должен существовать уже написанный и отлаженный код, я занялся поисками. Через некоторое время я остановил свой выбор на двух вариантах (несколько вариантов было отброшено из-за непрезентабельного вида появляющегося окошка). Оба скрипта базируются на бесплатных JavaScript фреймворках.

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

Второй вариант, Lightbox 2, использует библиотеки Prototype и Scriptaculous Effects. На сайте Lightbox 2, также, есть подробное описание и примеры. К сожалению, упакованных скриптов скачать не предлагается, а неупакованные вместе весят около 100 килобайт (также, надо прибавить CSS файл). Я попытался уменьшить размер скриптов с помощью первого найденного сервиса. В результате объем скриптов уменьшился до 75 килобайт, но после упаковки код уже не работал (очевидно, упаковщик делает свою работу не совсем корректно).

Те блоггеры, которые, как и я, используют в качестве платформы для своих блогов Community Server, могут воспользоваться CSModule Qgyen.Lightbox. Этот модуль упрощает интеграцию скрипта Lightbox с блогом (плюс добавляет еще некоторый функционал, например, загрузка изображений из Flickr).

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

Рекомендую почитать  мой обзор популярной JavaScript библиотеки JQuery