Lightbox – Немного света

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

Начнем с самого простого, для обычного пользователя, примера. А именно плагина для Wordpress – Jquery Lightbox. Он привлек мое внимание своей простотой, плагины то все устанавливать на Вордпресс умеют. В использовании нет ничего сложного – после установки плагина, каждоe мини-изображениe, по клику на которое вы задумали показать в лайтбоксе его полную версию, нужно обернуть в теги гиперссылки (’a') и прописать в атрибуте к тегу ‘a’ ‘rel=”lightbox”‘ :

Подробнее на примере:

<a href="wp-content/uploads/2009/09/maxi_image.jpg" title="реальный размер картинки" rel="lightbox">
          <img src="wp-content/uploads/2009/09/mini_image.jpg" alt="маленькая картинка" />
</a>

Вот еще один способ реализации лайтбокса – jQuery Fullsize Plug-in. Он интересен своей задумкой – добавления нового атрибута к изображению в HTML5. Смысл идеи заключается в облегчении жизни веб-разработчиков путем сваливания всей работы лайтбокса на плечи браузеров. Выглядеть, по их мнению, все будет так:

<img src='mini.jpg' atl='img' fullsize='full.jpg'/>

То есть больше не придется скачивать, устанавливать и настраивать скрипты, а можно будет просто прописать к тегу ‘img’ атрибут ‘fullsize’ и указать в нем путь к реальному размеру картинки. Вы можете проголосовать за эту идею на их официальном сайте, если вы тоже мечтаете о таком светлом будущем.

Еще один интересный и простой вариант – плагин для Jquery BlockUI. Он не создан специально для показа изображений. С помощью этого плагина можно ‘выключать свет’ на сайте и показывать в светлом окне что угодно. ОН потрясающе прост в использовании – все примеры есть на официальном сайте.

И последний, самый интересный, пример реализации лайтбокса. У него есть одна особенность, которой нет ни у одного из других плагинов/скриптов. Он совершенно не использует JavaScript. Да, вы не ошиблись. Это значит, что даже те редкие пользователи, очень беспокоящиеся за свою безопасность и отключающие JavaScript на своих браузерах, смогут насладиться красотой лайтбокса! Найти код можно вот здесь. Способ, конечно не самый красивый, но кроссбраузерный и валидный.

Поделиться с общественностью на Твиттере.