www.Litecode.ru – Сборник рецептов для создания сайтов

Плагин ColorBox для отображения фотогалереи

ГлавнаяJavaScript → Плагин ColorBox для отображения фотогалереи

ColorBox - это одна из разновидностей лайтбокса, на jQuery, с более продвинутым функционалом чем у традиционных. Первое - этот плагин практически не глючит и фото всегда по центру экрана. Как и все аналоги, имеет кучу настроек для управления прозрачностью фона, скоростью показа, эфектами, размерами, надписями и т.д. ColorBox имеет несколько интерфейсов. Кроме того, в данном плагине, предусмотрен показ html-кода во всех возможных вариантах.

Пример:


Ну как, впечатляет? Вроде очень даже ничего, даже можно смело сказать - отлично! Посмотреть все демо и скачать исходники можно на официальном сайте проекта. Там же документация.

Пример показанный выше запускается очень просто: качаем colorbox.js, colorbox.css и картинки со стрелочками.

Затем такой код:

<link href="/colorbox.css" rel="stylesheet" type="text/css" />;
<script src="/colorbox.js" type="text/javascript"></script>
<script>
	jQuery(document).ready(function(){
		jQuery("a[rel='box']").colorbox();
	});
</script>

<ul>
<li><a href="/demo/img/colorbox/1.jpg" rel="box"><img src="/demo/img/colorbox/1_min.jpg" alt=""/></a></li>
<li><a href="/demo/img/colorbox/2.jpg" rel="box"><img src="/demo/img/colorbox/2_min.jpg" alt=""/></a></li>
<li><a href="/demo/img/colorbox/3.jpg" rel="box"><img src="/demo/img/colorbox/3_min.jpg" alt=""/></a></li>
</ul>

Удачи!