てるてるブログ

てるてるぼうずの日常やらお勉強やら

シンプルな画像のスライドショー「jQuery.Showcase」

Posted on | 8月 22, 2011 | No Comments

シンプルなスライドショーjQueryプラグイン「jQuery.Showcase」。
jQueryでのスライドショーは簡単に見栄えのいい動きのあるページが作れるのがいいところ。
ついでに、サムネイルも自動で表示され画像の切り替わりも色々と設定出来るのが便利で、設置が比較的楽なのもいいところ。

トップページでスライドショー的な見せ方をしたいってときに、Flashでの作り込みを考える前に試してみるにはいいんじゃないでしょうか?

↓以下設置メモ

まずはjQuery.Showcaseでプラグインをダウンロード。
詳しい説明ページは、英語ですが開設ページがデモも含めて詳しいです。
画像の切り替わりなどの詳しい設定は上記ページの「Documentation」に詳しく開設あり。

サムネイル表示のサンプルがないので↓にコードをメモ。
詳しくはサンプルの方もご覧下さい。

$(function() {
	$("#showcase").showcase({
    css: { width: "500px", height: "300px" },//画像サイズ設定
    animation: { type: "fade" },//アニメーション設定
    images: [
        { url:"画像のパス1", description: "画像の説明1" },
        { url:"画像のパス2", description:"画像の説明2" },
		],
	titleBar: {
	css: { height: "25px"} ,
	position:"top"
	},
    navigator: { //サムネイル表示設定
		showMiniature: true, //サムネイル表示on
		css: { padding: "6px", margin: "0px 0px 0px 0px"},
	item: {cssClass: null,
		cssClassHover: null,
		cssClassSelected: null,
		css: {
		width: "50px", height: "50px", //サムネイルの画像サイズ設定
		lineHeight: "10px",
		verticalAlign: "middle",
		backgroundColor: "#878787",
		margin: "3px 3px 3px 0px",
		border: "solid 1px #acacac",
		},
		cssHover: {
		backgroundColor: "#767676",
		border: "solid 1px #ff0000"
		},
		cssSelected: {
		backgroundColor: "#ff0000",
		border: "solid 1px blue"
		}
		},
			position: "bottom-right" //サムネイルの配置設定
			}

});
});

参考にさせていただきました。

トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin