Спешу поделиться свежей и симпатичной штуковиной для организации lightbox-ов или, выражаясь русским языком, всплывающих окон.
Штуковина представляет собой плагин к JQuery, очень легковесная и простая в использовании. Имя ей “PrettyPhoto”.
В отличии от некоторых своих собратьев по цеху, PrettyPhoto не является комбайном по отображению чего угодно во всплывающем окне. Плагин создан и работает только с целью показа изображений – как одиночных, так и в составе набора (галереи), но от этого не становится менее привлекательным.
Скрипт отлично уживается со следующими браузерами:
Распространяется по лицензии: 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> |
Внимание:
И, наконец, инициализируем плагин:
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> |
Расшифруем параметры.
Чтобы организовать переход между изображениями внутри лайтбокса, измените rel=”prettyPhoto” на rel=”prettyPhoto“ у каждого изображения из набора.
Демонстрация. Архив с исходным кодом примера.
Вот и всё. Удачи в разработках!
Приветствую! Я Чернова Ирина, автор этого блога. Здесь я пытаюсь писать о том, что в наибольшей степени меня интересует, а именно - веб-разработках и управлении ими. 
Блогово Зайсла © 2009 
 |
|
Интересный и полезный скрипт.
)
Но так как я только собираю сайты, используя готовые компоненты, модули, плагины, было бы здорово иметь все эти возможности в виде, к примеру, модуля или плагина для Joomla 1.5.x.
Понимаю, конечно, что такие сообщения писать – высшая степень наглости, но тем не менее…
)
А уважаемой Черновой Ирине большое спасибо за столь полезный и интересный блог.
Кстати, Ирина, свяжитесь, пожалуйста, со мной по e-mail или icq (268088191). Много Вашего времени не займу, хочу пообщаться по поводу разработки сайта на заказ.
Здравствийте !
Извиняюсь,за не очень умный вопрос наверное…)))
Подскажите пожалуйста в какои файл,и куда именно нужно вставить вот этот код
2
3
4
5
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
А то у меня никак не получается,картинка открывается просто переходом на другую страницу ! !
Заранее благодарен !
В общем сейчас потестил и другие подобные скрипты,куда эту строку с кодом вставлять уже разобрался !..
Но почему во всех подобных скриптах ,картинка у меня открывается в новом окне,а не как должно с затемнением, и т.д. ????……..
Огромное спасибо за статью))долго думал,как реализовать галерею,и благодаря Вам сделал её за 5 минут быстро и красиво)
Такой плагинчик для Joomla! уже существует, вот тут:
Добрый день, Ирина.
А вы сами занимаетесь разработкой скриптов на jQuery?
Использую PrettyPhoto постоянно в веб-разработке, хоть это и клон лайтбокса, но мне он кажется намного более удачным решением + к тому же любимый JQuery. Раньше были некоторые проблемы с Оперой, но в последних версиях все ок
А никто не обратил внимание на то, что если в title этого лайтбокса поместить не просто текст, а ссылку на сайт или текст с переносами на другую строку, то при наведении мыши на превьюшку показывается код этого title со всеми тэгами (href, br, etc.)
Пример – на самой нижней картинке по ссылке “Демонстрация”.
Если кто знает, как победить эту проблему – сообщите, плз…
Здравствуйте, спасибо за отличный скрипт.
Но есть одна проблема, которую никак не получается решить.
Сделал 2 слайд-шоу:
Первое
фото1 фото2 фото3
Второе
фото1 фото2 фото3
все отлично показывает, сделал третье,
Третье
фото1 фото2 фото3
не работает, хотя ничего не менял просто скопировал предыдущую группу картинок и поменял названия файлов.
Подскажите что и где поменять?
Спасибо
Добрый день, Ирина. Не понимаю, обязательно ли оформлять галерею как список с тегами ul и li? Вы об этом не пишете, но в вашем и в других демо галерея устроена именно так, а тег ul имеет класс gallery clearfix – это важно? Можно ли без этого обойтись? У меня галерея устроена как таблица, где каждая превьюшка находится в отдельной ячейке – не представляю, как совместить это с маркированным списком.. Заранее спасибо за совет. Наталья
Ирина, по-моему не обязательно все заключать в теги ul, я сделал в тегах указал класс gallery clearfix и все работает.
Только вот с предыдущим вопросом не могу разобраться.
Адиль, я не поняла, что значит “я сделал в тегах указал класс gallery”. Можно пример кода? Наталья
Я имел в виду теги “p” просто в предыдущем сообщении они не отобразились.
Кстати, со своей проблемой разобрался. Вопрос закрыт