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