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

Загрузка полноразмерных изображений из превью с помощью 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

  • kolk

    обе библиотеки _не_удовлетворяют_ требованию “пользователю не приходится возиться с новыми окнами или нажимать кнопку “Назад”, чтобы вернуться обратно, после того, как в текущем окне открылась картинка.” И именно на это _неудовлетворение_ и тратятся десятки килобайт кода…

  • Sergiy Oliynyk

    Имелось в виду с _браузерными_ новыми окнами.
    В данном случае картинка появляется в текущем окне на фоне содержимого, к которому пользователь может вернуться сразу после того, как закроет картинку.
    А несколько десятков килобайт кода для сайтов с картинками не сильно ощутимы.

    Кстати, если у пользователя отключены скрипты, то картинки будут все равно работать.

  • Sergiy Oliynyk

    P.S. Kolk, когда ты себе блог заведешь? Чтобы я мог тебя, тоже, критиковать :-)

  • Иван

    Нормальная статья, спасибо за ссылки.