Спешу поделиться свежей и симпатичной штуковиной для организации lightbox-ов или, выражаясь русским языком, всплывающих окон.
Штуковина представляет собой плагин к JQuery, очень легковесная и простая в использовании. Имя ей “PrettyPhoto”.
В отличии от некоторых своих собратьев по цеху, PrettyPhoto не является комбайном по отображению чего угодно во всплывающем окне. Плагин создан и работает только с целью показа изображений – как одиночных, так и в составе набора (галереи), но от этого не становится менее привлекательным.
Скрипт отлично уживается со следующими браузерами:
- Firefox 3.0 (Mac/PC/Linux)
- Firefox 2.0 (Mac/PC)
- Safari 3.1.1 (Mac)
- Opera 9+ (Mac/PC)
- Internet Explorer 6.0 (PC)
- Internet Explorer 7.0 (PC)
Распространяется по лицензии: Creative Commons Attribution 2.5.
В действии плагин можно посмотреть вот здесь.
Как использовать
Все как обычно:
Подключаем JQuery, сам плагин и его CSS.
1 2 3 | <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> |
В случае, если вам жизненно необходимо поддержать несчастный IE6 в его попытках выглядеть как браузер и отображать прозрачность в PNG, то понадобится еще прописать такую конструкцию:
1 2 3 4 5 6 | <!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.7a-min.js"></script> <script> DD_belatedPNG.fix('.pp_left,.pp_right,a.pp_close,a.pp_arrow_next,a.pp_arrow_previous,.pp_content,.pp_middle'); </script> <![endif]--> |
Далее добавляем к нужным ссылкам на изображения атрибут rel=”prettyPhoto”.
Т.е., если сначала было:
1 | <a href="images/fullscreen/1.jpg" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a> |
Теперь станет:
1 | <a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a> |
Внимание:
- если вы хотите отображать описание к изображению – помещайте текст описания в значение атрибута ‘title' ССЫЛКИ;
- если вы хотите отображать заголовок у окошка с изображением – текст заголовка помещайте в значение атрибута ‘alt’ ИЗОБРАЖЕНИЯ;
И, наконец, инициализируем плагин:
1 2 3 4 5 | <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); </script> |
Для любителей наприменять различные настройки, инициализация может выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'normal', padding: 40, opacity: 0.35, showTitle: true, allowresize: true, counter_separator_label: '/', theme: 'light_rounded' }); }); </script> |
Расшифруем параметры.
- animationSpeed – скорость анимации. Возможные варианты: 'fast', 'slow', 'normal'
- padding – padding для изображения
- opacity – коэффициент прозрачности области, заполняющей все пустой пространство. Значение может быть в интервале от 0 до 1.
- showTitle – показывать/не показывать заголовки. Варианты: ‘true’, 'false'
- allowresize – разрешить или запретить скрипту изменять размеры изображения и тем самым подстраиваться под размер окна браузера. Возможные вариатны: ‘true’, 'false'
- counter_separator_label – разделитель в счетчике изображений в галерее. Например, «3/5» - третье изображение из пяти. Вот значок "/» вы можете заменить на что-нибудь другое.
- theme – тема оформления. Возможные варианты: ‘light_rounded’, 'light_rounded', 'dark_rounded', 'light_square', 'dark_square'.
Чтобы организовать переход между изображениями внутри лайтбокса, измените rel=”prettyPhoto” на rel=”prettyPhoto“ у каждого изображения из набора.
Демонстрация. Архив с исходным кодом примера.
Вот и всё. Удачи в разработках!
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
Сообщения
0 коммент.
Отправить комментарий