lightbox
Смотри также lightbox jquery галерея
Библиотека подключается элементарно просто. Для начала ее необходимо скачать с сайта автора:
Также там можно скачать разнообразные картинки для симпатичного оформления. После того как скачали, нужно:
1. Подключить lightbox.js к вашему сайту
<script type="text/javascript" src="lightbox.js"></script>
2. Добавить аттрибут rel="lightbox" ко всем ссылкам, где вы хотите использовать лайтбокс. Например:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Чтобы показывался заголовок можно использовать аттрибут title.
Также можно поменять цвета и вообще вывод:
1. Вот пример css:
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#lightbox img{ border: none; }
#overlay img{ border: none; }
2. Чтобы использовать эффект затемнения, необходим полупрозрачный PNG файл, а также немного CSS:
#overlay{ background-image: url(overlay.png); }
* html #overlay{
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}
3. Для того, чтобы показать пользователю ползунок загрузки, в самом верху lightbox.js поменяйте путь до картинки с ползунком.
var loadingImage = ‘loading.gif’;
4. Аналогично с кнопкой закрыть, путь до него меняется там же.
var closeButton = ‘close.gif’;