シンプルな画像ギャラリーJavaScript「Slide Scale」

シンプルに画像を見せるためのギャラリーJavaScriptを紹介します。
jQueryプラグインのSlideScaleです。

使用方法

SlideScale Demo Pageの右上にある Code (Github)をクリックし、【Download Source】からダウンロードします。


<link rel="stylesheet" type="text/css" href="jquery.slidescale.css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.js"></script>
<script type="text/javascript" src="jquery.slidescale.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#id名').slidescale({
		images: [
        { photo_path: "画像パス",
          thumb_path: "サムネイル画像パス",
          text: "キャプチャー"},
        { photo_path: "画像パス",
          thumb_path: "サムネイル画像パス",
          text: "キャプチャー"}
        <!-- 以下枚数分 -->
		]
    });
});
</script>

上記記述した後は、idを表示させたいところに書けば完了です。
<div id="id名"></div>

サンプル

Javascriptサンプルページ一覧

skuare.net