jquery.mb.bgndGalleryのデモ

pause
play

HTML


<body>
	<div id="wrapper">
		<h1>jquery.mb.bgndGalleryのデモ</h1>
		<div id="controls">
			<div class="pause">pause</div>
			<div class="play">play</div>
			<div class="prev">prev</div>
			<div class="next">next</div>
			<div class="counter"></div>
			<button onclick="$.mbBgndGallery.changeEffect('slideLeft')">effect slideLeft</button>
			<button onclick="$.mbBgndGallery.changeEffect('slideUp')">effect slideUp</button>
			<button onclick="$.mbBgndGallery.changeEffect('zoomBlur')">effect zoom</button>
		</div>

CSS


body {
	background: #ffffff;
	z-index:0;
	margin:0;
	padding:0;
}
#wrapper {
	position: relative;
	z-index:10;
	font-size:16px;
	margin:0;
	padding:0 8px;
	background-color:rgba(255,255,255,0.9);
}
.controls div{
	display:inline-block;
	padding:5px;
	margin:4px;
	color:#fff;
	border:1px solid #000;
	border-radius:4px;
	background:#000;
}
.controls div:not(.counter){
	cursor:pointer;
}
.controls div:hover:not(.counter) {
	color:#f00;
}
button {
	display:inline-block;
	font-size:14px;
	padding:10px;
	margin:4px;
	color:#fff;
	border:1px solid #000;
	border-radius:4px;
	background:#000;
	cursor: pointer;
}
button:hover {
	color:#f00;
}

jQuery


このサンプル用にmargin-topを(ウィンドウサイズ-128)pxにセットしています。
$(function(){
	$('#wrapper').css('margin-top', ($(window).height() - 128)+'px');
});
プラグインの初期化
$(function(){
	$.mbBgndGallery.buildGallery({
		containment:"body",
		timer:200,
		effTimer:8000,
		effect:"zoom",
		autoStart:true,
		images:[
			"./images/amazing-736877.jpg",
			"./images/amazing-736882.jpg",
			"./images/aurora-borealis-69221.jpg",
			"./images/castle-973157.jpg",
			"./images/farmland-768603.jpg",
			"./images/sunrise-1116985.jpg",
			"./images/woods-1072819.jpg"
		]
	});
});