画像のスライドショー「jquery showcase」


jquery showcaseは画像内にサムネイルを表示してスライドショーなどを表示できます。
jQuery (version 1.3.2+) 、jquery.showcase.X.jsをダウンロード要。

配布元: jquery showcase:jquery.showcase 2.0.1

 

DEMO・・マックのメニューからサムネイルで3点のリストを右下に配置してオートフェード。

 

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>「jquery.showcase」デモ</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.showcase.2.0.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
	$("#demo").showcase({
	images: [
	{ url: "images/sample_img1.jpg",
description: "ソーセージエッグマフィン",
link: "http://www.mcdonalds.co.jp/quality/basic_information/menu_info.php?mid=4040"
target:"_blank" },
	 { url: "images/sample_img2.jpg",
description: "ベーコンレタスバーガー",
link: "http://www.mcdonalds.co.jp/quality/basic_information/menu_info.php?mid=1042"
target:"_blank" },
	 { url: "images/sample_img3.jpg",
description: "チキンフィレオ",
link: "http://www.mcdonalds.co.jp/quality/basic_information/menu_info.php?mid=1566"
target:"_blank" },
],
	width: "360px",height: "360px", //画像サイズ設定
	animation: { type: "fade", interval: 3500, speed: 1000 }, //アニメーション設定
	titleBar: { enabled: false } , //タイトルの表示設定
	navigator: {
	css: {
	border: "none",
	padding: "5px",
	margin: "0px",
	position: "absolute",
	"z-index": 1000;
	},
	position: "bottom-right", //サムネイルの配置設定
	orientation: "horizontal",
	item: {
		cssClass: null,
		cssClassHover: null,
		cssClassSelected: null,
		css: {
		width: "30px", height: "24px", //サムネイルの画像サイズ設定
		lineHeight: "10px",
		verticalAlign: "middle",
		backgroundColor: "#878787",
		margin: "0px 3px 3px 0px",
		border: "solid 1px #acacac",
		"-moz-border-radius": "4px",
		"-webkit-border-radius": "4px"
	},
	cssHover: {
		backgroundColor: "#767676",
		border: "solid 1px #676767"
	},
	cssSelected: {
		backgroundColor: "#ff0000",
		border: "solid 1px #acacac"
	}
},
	showMiniature: true}
	});
});
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
参考サイト: jquery.showcase.2.0 DEMO

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*