Статьи Веб-программирование jQuery lightBox plugin
| jQuery lightBox plugin |
| 11.11.2008 13:32 |
|
jQuery lightBox плагин - простой, элегантный, не требующий дополнительной разметки, он позволяет применять эффект lightbox к картинкам используя всю мощь и гибкость jQuery.
Как его использовать: jQuery lightBox плагин использует JavaScript библиотеку jQuery , поэтому в начале необходимо подключить эту библиотеку и lightBox плагин к странице: <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script> Затем добавьте CSS-файл отвечающий за внешний вид lightBox плагина: <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
Вам не нужно изменять HTML-разметку чтобы использовать jQuery lightBox плагин. Просто используйте мощь и гибкость jQuery и создайте набор связанных изображений. <a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
После этого выберите ссылки, вызвав jQuery Lightbox плагин. Например: <script type="text/javascript">
$(function() { // Используйте это пример, если... $('a[@rel*=lightbox]').lightBox(); // выбираете все ссылки которые содержат слово lightbox в аттрибуте rel // или. $('#gallery a').lightBox(); // выбираете все ссылки в контейнере с id#gallery // Используйте это пример, если... $('a.lightbox').lightBox(); // выбираете все ссылки с классом lightbox // Используйте это пример, если... $('a').lightBox(); // выбираете все ссылки на странице // ... Возможностей можество. Вы можете написать свой вариант или выбрать из представленных выше. }); </script> jQuery lightBox plugin имеет также множество настроек, с помощью которых Вы можете настроить плагин в соответствии с Вашими пожеланями. Например: <script type="text/javascript">
$(function() { $('a[@rel*=lightbox]').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.6, imageLoading: 'http://example.com/images/loading.gif', imageBtnClose: 'http://example.com/images/close.gif', imageBtnPrev: 'http://example.com/images/prev.gif', imageBtnNext: 'http://example.com/images/next.gif', containerResizeSpeed: 350, txtImage: 'Imagem', txtOf: 'de' }); }); </script> |
| Обновлено 22.12.2008 10:56 |
