skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

デザインに優れた画像スライドショーJavaScript「JQUERY SLIDESHOW PLUGIN」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画像ギャラリーは多々ありますが、あまりデザイン的にいいものはありませんでした。
今回のJQUERY SLIDESHOW PLUGINはなかなかデザイン性に優れたものと言えるのではないでしょうか。

使用方法
JQUERY SLIDESHOW PLUGINからslideView.js、slideview.cssをダウロードします。
<link rel="stylesheet" type="text/css" media="screen" href="slideview.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="slideView.js"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
$("#slideshow").slideView();
});
</script>

上記を記述したらスライドショー部分を書き込みます。
<;div id="slideshow">
<ul class="slideView">
<li><a href="リンク先"><img src="画像パス" alt="キャプション" /></a></li>
// 画像分
</ul>
</div>

またサムネイルを「thumb_」と接頭語をつけ、別に用意しておく必要があります。
なお、以下のようにオプションで変更可能です。
thumbPrefix: "thumb_",
デザインに優れた画像スライドショーJavaScript「JQUERY SLIDESHOW PLUGIN」サンプル

記事作成：2009年03月09日

前の記事：ナンバリングされた脚注を簡単に作成できるJavaScript「jQuery Footnotes」
次の記事：jQueryベースで綺麗なLightBox風JavaScript「ColorBox」