Показать Меню
falbar Галерея Pirobox

Галерея на jQuery Pirobox

Галерея Pirobox

Галерея на jQuery Pirobox отлично работает во всех браузерах, включая даже IE6+. Плагин написан уже достаточно давно (в 2009 году), но до сих пор весьма актуален и удовлетворяет потребностям и требованиям современного дизайна страниц.

Хорош этот плагин ещё тем, что, кроме полноценной галереи, позволяет повесить lightbox и на одиночное изображение. Галерея на jQuery изначально разрабатывалась под версию библиотеки 1.3.1, но без проблем работаем и с последними версиями jQuery.

Начинаем с подключения библиотеки, плагина и таблицы стилей pirobox.css:

<link href="css/pirobox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/pirobox_packed.js" type="text/javascript"></script>

В head вносим несколько строк скрипта с настройками галереи:

<script type="text/javascript">
$(function(){

	// Это настройки
	$(".thumbs").piroBox({
		border: 10,
		borderColor: "#fff",
		mySpeed: 700,
		bg_alpha: 0.5,
		cap_op_start: 0.5,
		cap_op_end: 0.8,
		pathLoader: "#000 url(img/ajax-loader.gif) center center no-repeat;",
		gallery: ".gallery-1 li a",
		gallery_li: ".gallery-1 li",
		next_class: ".next_in",
		previous_class: ".previous_in"
	});
});
</script>

Остановимся на каждом пункте поподробнее:

  • border: задаём ширину рамки привью изображения в px;
  • borderColor: выбираем цвет для нашей рамки в формате #xxxxxx;
  • mySpeed: задаём скорость анимации появления lightbox и перелистывания картинок в миллисекундах, по умолчанию 700;
  • bg_alpha: устанавливает прозрачность фона под изображением у lightbox. Цвет самого фона можно изменить вручную в css файле, по умолчанию фон черный;
  • cap_op_start: устанавливает прозрачность фона подписи изображения до наведения на неё курсора мыши;
  • cap_op_end: прозрачность фона подписи изображения после наведения на неё курсора;
  • pathLoader: указываем фон, выравнивание и путь до изображения лоудера (та анимация, которую будет видеть пользователь пока будет грузиться файл основного изображения), параметры указываются аналогично свойству backgroung;
  • gallery: и gallery_li: в данных параметрах указываем селекторы элементов, в которых мы будем определять изображения для нашей галереи, соответственно: галерей на одной странице можно подключить несколько;
  • single: указываем класс для одиночного изображения, т.е. можем вызывать lightbox как для ряда изображений, так и для одиночного изображения. В нашем случае для всех элементов соответствующих селектору '.gallery li a' и для элементов с селектором '.single a';
  • next_class: указываем класс для элемента кнопки вперед;
  • previous_class: указываем класс для элемента кнопки назад, соответственно, можем установить свои стили кнопок.

Пример галереи из нескольких изображений: в div-блок с классом gallery-1 помещаем список, в элементах li которого находятся теги img с миниатюрами изображений. Сам же тег img помещен в ссылку с указанием пути на главное изображение:

<div class="gallery-1">
	<ul>
		<li>
			<a href="images/pirobox.jpg" title="Название картинки №1" >
				<img src="images/pirobox1_s.jpg" alt="Образец изображения галерея на jQuery" />
			</a>
		</li>
		<li>
			<a href="images/img2.jpg" title="Название картинки №2" >
				<img src="images/pirobox2_s.jpg" alt="Образец изображения галерея на jQuery" />
			</a>
		</li>
		<li>
			<a href="images/pirobox3.jpg" title="Название картинки №3">
				<img src="images/pirobox3_s.jpg" alt="Образец изображения галерея на jQuery" />
			</a>
		</li>
		<li>
			<a href="images/pirobox4.jpg" title="Название картинки №4" >
				<img src="images/pirobox4_s.jpg" alt="Образец изображения галерея на jQuery" />
			</a>
		</li>
	</ul>
</div>

Для одиночного изображения в тег с классом, указанным в параметре single, помещаем ту же конструкцию, состоящую из тега img обернутого ссылкой.

<div class="single_box">
	<span class="single">
		<a href="images/pirobox9.jpg" title="Название картинки №1">
			<img src="images/pirobox9_s.jpg" alt="Образец изображения галерея на jQuery" />
		</a>
	</span>
</div>

Вот такое старое, но очень хорошее решение которое можно использовать у себя на сайте, а на этом у меня всё.

Спасибо за внимание!

Источник
pirolab.it

Подписаться на обновления

Комментариев еще не оставлено