Всплывающие окна на JavaScript
Итак, перед нами очередная очень распространенная задача – по клику на эскиз изображения (который фактически является ссылкой) красиво развернуть оригинальную картинку. Красиво – это в нашем случае что-то отличное от target=”_blank” и с каким-нибудь “вау-эффектом”.
Все скрипты, выполняющие данную задачу принято называть лайтбоксами (lightbox). В поисках неплохих решений, мною были запытаны более двух десятков скриптов, но в результате в копилку были включены только нижеследующие.
1. Fancy box
Скрипт представляет собой плагин к jQuery.
Возможности:
- Подгоняет размеры изображений под разрешение монитора;
- Пририсовывает тень к всплывающему окошку;
- Поддерживает возможность группирования объектов и их просмотр в виде галереи в одном окне;
- Выведет для вас не только изображения, но и inline-элементы, а также HTML-контен в iframe;
- Конечно же, все это благолепие можно конфигурировать, а также экспериментировать с CSS.
Теперь о размерах, а точнее, весе скрипта (вопрос немаловажный):
- непосредственно jquery.fancybox-1.0.0.js – 12 Кб
- сам jQery (jquery-1.2.3.pack.js) – 29,1 Кб
- дополнительный скриптик jquery.pngFix.pack.js – 2,52 Кб
- CSS – около 4 Кб
- изображения – 17 Кб
Подключение и использование скрипта не представляет никакой сложности:
1. Сначала подключаем скрипты и CSS:
/* обязательно */ <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.fancybox.js"></script> /* опционально */ <script type="text/javascript" src="js/jquery.pngFix.js"></script> <script type="text/javascript" src="js/jquery.metadata.js"></script> /* цепляем CSS */ <link rel="stylesheet" href="css/fancybox.css" type="text/css" media="screen">
2. Берем подопытную картинку:
<a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
примечание: можете использовать атрибут title для отображения подписи к изображению, а также rel – для группировки обектов.
Заключаем картинку в какое-нибудь оформление (p, div, span – без разницы) с определенным ID. Например, так:
<p id="”test1”"><a href="image_big.jpg"><img src="image_small.jpg" alt="" /></a></p>
3. Инициализируем плагин:
$(document).ready(function() { $("p#test1 a").fancybox(); });
Готово. В данном случае по щелчку на изображение появится всплывающее окошко с оригиналом изображения. Все параметры окна будут по умолчанию Но вы можете использовать дополнительные опции при вызове плагина, например:
$(document).ready(function() { $("p#test2 a").fancybox({ 'hideOnContentClick': true }); });
Параметр ‘hideOnContentClick’: true – делает возможным закрытие всплывающего окна не только по нажатию на специальную кнопку, но и по щелчку на свободной области.
Со всеми возможными настройками можете ознакомиться на официальном сайте плагина, где также можно скачать архив и полюбоваться на примеры работы скрипта .
2. iBox v2
Самостоятельный скрипт, не являющийся чьим-либо плагином, и мало того, поддерживающий создание своих собственных плагинов.
По умолчанию iBox поддерживает несколько типов объектов для вывода:
- Изображения
- Документы
- Inline – контейнеры
- YouTube – видео
Если вам нужно что-то совсем необычное – можно написать свой собственный плагин к iBox, который будет реализовывать какой-нибудь оригинальный механизм обработки и вывода данных.
Принцип подключения и инициализации iBox:
- прописываем скрипты:
- производим настройку глобальных параметров скрипта:
- используем – для определения «своих» ссылок применяем не id или class элементов-контейнеров, а атрибут rel=«ibox» (или, например, ibox&target=’index.php?page=&my-js-document’ – если нужны какие-то дополнительные параметры).
В разделе «Quick Start» официального сайта приведен перечень глобальных и локальных (прописываемых непосреlственно в rel=«») опций, которые можно использовать при работе скрипта.
Теперь про особо приятные моменты:
- не смотря на богатую функциональность, скрипт весит порядка 27 Кб, что не может не радовать;
- в архиве с iBox вы найдете readme, demo-html, а также две «шкурки»;
- существует реализация скрипта в виде плагина для WordPress.
Перейти на страницу скачивания.
3. Lightbox v2.0 и Litebox
Lightbox v2.0 – работает при помощи Prototype Framework и Scriptaculous Effects Library.
Работает только с изображениями – т.е. никаких inline-объектов, iframe и прочего. Но с поставленной задачей справляется великолепно.
Использование:
1. Подключаем скрипты:
<script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script>
2. Подключаем CSS:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3. Добавляем атрибут rel=”lightbox” к ссылкам.
<a title="my caption" rel="lightbox" href="images/image-1.jpg">image #1</a>
title – используется для вывода подписи к изображению. Если вам необходимо вывести галерею изображений – включите в атрибут rel название группы в квадратных скобках. Вот так:
<a rel="lightbox[roadtrip]" href="images/image-1.jpg">image #1</a> <a rel="lightbox[roadtrip]" href="images/image-2.jpg">image #2</a> <a rel="lightbox[roadtrip]" href="images/image-3.jpg">image #3</a>
И будет вам счастье ). Единственным минусом использования данного решения является необходимость использования достаточно тяжелых библиотек Prototype и Scriptaculous. Но если в вашем проекте уже используется Prototype – не стоит даже задумываться ).
Скачать Lightbox
Litebox – маленькая, аккуратная модификация Lightbox v2.0, работающая с использованием облегченной версии Prototype (урезана до 4 Кб) . Общий вес скриптов составляет всего 24,2 Кб. Выглядит и работает не хуже своего старшего брата. ) Советую обратить внимание. Скачать архив.
4. ThickBox 3.1
Достаточно мощный скрипт, построенный на базе библиотеки jQuery. ThickBox можно использовать для:
- показа одиночного изображения или группы картинок;
- отображения inline-объектов;
- отображения контента в iframe;
- создания модальных диалоговых окон и отображения результатов ajax-запросов внутри всплывающего окна.
Использование:
1. подключаем скрипты:
<script src="path-to-file/jquery.js" type="text/javascript"></script> <script src="path-to-file/thickbox.js" type="text/javascript"></script>
2. подключаем CSS:
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
3. в зависимости от типа выводимых объектов руководствуемся теми или иными правилами (которые подробно описаны на официальной страничке скрипта).
Коротко о синтаксисе вывода изображений:
а. вывод одиночного изображения
<a class="thickbox" title="здесь_заголовок" href="images/single.jpg"><img src="images/single_t.jpg" alt="Single Image" /></a>
b. галерея изображений:
<a class="thickbox" title=" здесь_заголовок " rel="gallery-plants" href="images/plant1.jpg"><img src="images/plant1_t.jpg" alt="Plant 1" /></a> <a class="thickbox" title=" здесь_заголовок " rel="gallery-plants" href="images/plant2.jpg"><img src="images/plant2_t.jpg" alt="Plant 2" /></a> <a class="thickbox" title=" здесь_заголовок " rel="gallery-plants" href="images/plant3.jpg"><img src="images/plant3_t.jpg" alt="Plant 3" /></a>
Для группировки изображений используется атрибут rel=”gallery-plants”
Итак, нам потребуется:
- библиотека jQuery (31 Кб)
- thickbox.js (12 Кб) или thickbox-compressed.js (6 Кб)
- ThickBox.css (4 Кб) и картинка-анимация loadingAnimation.gif (5,74 Кб)
И всё.) Море удовольствия весом в 45 Кб.
5.1 Плагины к Motools: ReMooz и SqueezeBox
Некоторая информация относительно SqueezeBox содержится вот в этой статье. В заметке рассмотрен пример реализации одной из возможностей плагина – осуществление ajax-запроса и вывод результата в iframe.
Вцелом, ReMooz и SqueezeBox очень похожи и являются детищами одного и того же автора (Harald Kirschner).
Разработчик позиционирует ReMooz как скрипт, идеально подходящий для создания pop-up окошек с картинками, а SqueezeBox – инструмент более широкого профиля. В выше упомянутой статье вы найдете описание возможностей SqueezeBox и требований к его использованию, а сейчас рассмотрим ReMooz.
Как вещает автор данного творения – этот плагин рекомендуется использовать при создании лайтбоксов с изображениями. Скрипт позволяет не просто выводить оригинал изображения, но и настраивать вывод: так, например, мы можем определить, какой процент от размера экрана может занимать выводимая картинка (при необходимости ReMooz уменьшит ее размеры ), добавлять ли к ней прозрачность и нужно ли рисовать тень. За подробностями о настройках плагина – на офсайт, там же – примеры и интструкция к использованию. А если в двух словах, то для работы с ReMooz нам понадобиться:
1. MooTools JavaScript Framework (обязательно 1.2 версии) со следующими включенными методами:
- Element.Dimensions
- Fx.Tween
- Fx.Morph
- Selectors
- DomReady (facultative)
2. ReMooz.js
3. ReMooz.css
4. несколько изображений, участвующих в оформлении всплывающего окошка (найдете на странице описания)
Итого: получаем примерно 55 Кб скриптов и чуть-чуть картинок.
Далее, нам нужно подцепить скрипты и CSS.
После этого заключаем изображения в какой-нибудь подходящий элемент с заданным ID или CLASS:
<div id="demo-photos"> <a title="заголовок" href="оригинальное изображение.jpg"> <img src="эскиз.jpg" alt="" /> </a> </div>
Теперь прописываем примерно такой обработчик:
window.addEvent('load', function() { /** * Этот вариант является вариантом по умолчанию. Никаких дополнительных настроек */ ReMooz.assign('#demo-photos a', { origin: 'img' }); });
Или так:
window.addEvent('load', function() { /** * А это уже посложнее */ ReMooz.assign('#demo-photos a', { 'origin': 'img', 'shadow': 'onOpenEnd', // когда у нас должна появляться тень – прорисовка может происходить одновременно с загрузкой или же после нее 'resizeFactor': 0.8, // занять максимум 80% экрана 'cutOut': false, // не скрывать эскиз изображения при просмотре оригинала 'opacityResize': 0.4, // прозрачность 'dragging': false, // запретить перетаскивание окошка 'centered': true // окошко будет появляться в центре экрана, не зависимо от параметров элемента-конейнера }); });
Плагин готов к употреблению ).
5.2 Плагины к Motools: Multibox и Lightbox.
Данные два решения также являются творением одного автора. И опять-таки, одно из них (Lightbox) – «заточено» под вывод графической информации, а второе (Multibox) – призвано обеспечить работу с широким набором данных. Оба скрипта работают на базе Motools 1.11.
Lightbox не имеет каких-либо особенностей. Подхватывает картинки по rel=”lightbox”, а группы картинок по rel=”lightbox[название_группы]”. Инициализируется заклинанием типа:
Lightbox.init({descriptions: ‘.lightboxDesc’)
Имеет дополнительные настройки, с которыми можно ознакомиться на официальной страничке.
Multibox – более функциональный скрипт, работающий не только с изображениями, но и с flash, видео, mp3, html.
Механизм использования несколько отличается от Lightbox – ссылки для обработки определяются на основании CLASS-а контейнера, в котором они содержаться, а атрибут rel – используется для задания дополнительных параметров.
МОРАЛЬ: каждое из рассмотренных решений имеет право на существование. Что именно использовать – зависит от предпочтений разработчика и от конкретной ситуации использования. Например, если в проекте уже используется какая-либо ajax-библиотека, то логично и целесообразно было бы для решения задачи со всплывающими окнами использовать плагин именно для этой библиотеки.
Надеюсь, что данная статья поможет определиться с выбором подходящего решения.
Также жду ваших комментариев и сообщений (возможно, даже заметок) об интересных скриптах всплывающих окон.