Slimbox для Joomla

Информация о материале: Категория: HTML, CSS, javascript, PHP; Опубликовано: 23 мая 2010

Для организации slimbox эффекта нужна библиотека mootools.js и js slimbox-а. mootools.js скорее всего уже подключен, если нет то:

JHTML::_('behavior.mootools');

Добавляем slimbox код и ccs для него:

<script type="text/javascript" src="js/slimbox.js"></script>
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

C помощью кода Joomla можно добавить так:

JHTML::script( "js/slimbox.js", "js" );
JHTML::stylesheet( "slimbox.css", "css" );

Второй параметр - путь к файлу.

В HTML коде slimbox эффект организовывается с помощью ссылки на изображение. Внутри ссылки можно разместить эскиз этого изображения.

<a href="example.jpg" rel="lightbox" title="Beautiful, isn't it?">Щелкните здесь</a> чтобы увидеть изображение в slimbox

Ключевое слово тут:

rel="lightbox"

Чтобы организовать просмотр набора изображений добавляем к слову lightbox префикс:

<a href="example1.jpg" rel="lightbox-img1" title="Beautiful, isn't it?">Щелкните здесь</a>
<a href="example2.jpg" rel="lightbox-img2" title="Beautiful, isn't it?">Щелкните здесь</a>
<a href="example3.jpg" rel="lightbox-img3" title="Beautiful, isn't it?">Щелкните здесь</a>

Сам slimbox.js выглядит так:

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
Slimbox.scanPage = function() {
	$$($$(document.links).filter(function(el) {
		return el.rel && el.rel.test(/^lightbox/i);
	})).slimbox({/* Put custom options here */}, null, function(el) {
		return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
	});
};
window.addEvent("domready", Slimbox.scanPage);

Вместо {/* Put custom options here */} можно вставить свои настройки, например:

{
	overlayOpacity: 0.6,
	resizeTransition: Fx.Transitions.Elastic.easeOut,
	captionAnimationDuration: 0,
	counterText: "Image {x} sur {y}",
	closeKeys: [27, 70],
	nextKeys: [39, 83]
}

Возможны такие настройки:

loop: Логический; если true навигация будет по кругу. По-умолчанию false
overlayOpacity: Прозрачность Цвет можно поменять в CSS файле. По-умолчанию 0.8.
overlayFadeDuration: Время проявления и затухания изображения в миллисекундах. Задайте 0 чтобы отключить эффект анимации. По-умолчанию 400.
resizeDuration: Время разворачивания в миллисекундах. 0 чтобы отключить эффект. По-умолчанию 400.
resizeTransition: Задает эффект изменения размера изображения По-умолчанию для Mootools sineInOut. Можно задать свое значени, например, Fx.Transitions.Elastic.easeOut.
initialWidth: Ширина в пикселах. Default is 250.
initialHeight: Высота в пикселах. Default is 250.
imageFadeDuration: Время затухания изображения. 0 - изображение появляется сразу. Default is 400.
captionAnimationDuration: Время для анимации заголовка. 0 - появляется сразу. Default is 400.
counterText: Текст, позволяет настроить, перевести или отключить количество изображений. Чтобы отключить - false или "" . Default is "Image {x} of {y}".
closeKeys: Клавиши навигации для закрытия key codes . Default is [27, 88, 67] : Esc (27), “x” (88) and “c” (67).
previousKeys: Клавиши для перехода к предыдущему изображению key codes . Default is [37, 80] : Left arrow (37) and “p” (80).
nextKeys: Клавиши для перехода к следующему изображению key codes . Default is [39, 78] : Right arrow (39) and “n” (78).

Подробнее о настройках Slimbox и API для него

HTML, CSS, javascript, PHP

Slimbox для Joomla