Примеры использования zAccordion

Пример 1

• 
• 
• 
• 
• 

Каждый слайд имеет размеры 600х270 пикселей. Мы установили ширину аккордеона до 960 пикселей и ширину слайда до 600 пикселей. Размер вкладки будет вычислен автоматически.

$(document).ready(function() {
	$("#example1").zAccordion({
		timeout: 4000,
		slideWidth: 600,
		width: 960,
		height: 270
	});
});
			

Пример 2

• 
• 
• 

Тут опять каждый слайд имеет размеры 600х270 пикселей. Ширину аккордеона установили до 780px, а ширину таба 150px. Размер слайдов будет рассчитан автоматически. При загрузке отображается слайд с номером 1 (слайды нумеруем так 0, 1 и 2), то есть средний. Аккордеон не имеет автовоспроизведения. Смена слайдов происходит по наведению курсора мыши.

$(document).ready(function() {
	$("#example2").zAccordion({
		startingSlide: 1,
		auto: false,
		speed: 100,
		tabWidth: 150,
		width: 780,
		height: 270
	});
});
			

Пример 3

Ну и наверно самый практичный пример. Каждый слайд имеет свой собственный класс и свое фоновое изображение. Тут мы поместили внутри каждого слайда текст, который показывается только тогда, когда слайд активен. И ниже JavaScript и CSS код:

$(document).ready(function() {
	var accordion = $("#example3").zAccordion({
		slideWidth: 600,
		width: 900,
		height: 270,
		timeout: 3000,
		slideClass: "frame",
		slideOpenClass: "frame-open",
		slideClosedClass: "frame-closed",
		easing: "easeOutCirc"
	});
	$("#thumbs .thumb-0").click(function(){
		accordion.start();
		return false;
	});
	$("#thumbs .thumb-1").click(function(){
		accordion.click(0);
		return false;
	});
	$("#thumbs .thumb-2").click(function(){
		accordion.click(1);
		return false;
	});
	$("#thumbs .thumb-3").click(function(){
		accordion.click(2);
		return false;
	});
	$("#thumbs .thumb-4").click(function(){
		accordion.click(3);
		return false;
	});
	$("#thumbs .thumb-5").click(function(){
		accordion.stop();
		return false;
	});
});
			

#example3 ul {list-style:none;}
#example3 h3 {color:#fff;text-transform:uppercase;font-size:24px;}
#example3 p {color:#fff;}
#example3 .frame-1 {background:url(images/1.jpg) top left repeat;}
#example3 .frame-2 {background:url(images/2.jpg) top left repeat;}
#example3 .frame-3 {background:url(images/3.jpg) top left repeat;}
#example3 .frame-4 {background:url(images/4.jpg) top left repeat;}
#example3 .frame-content {width:360px;padding:100px 120px;}
#example3 .frame-closed .frame-content {display:none;}
#example3 .frame-open .frame-content {display:block;}
#thumbs a {border: 1px solid; padding: 4px;}