このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.slidescale.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery-ui.js"></script>
<script src="<PATH>/jquery.slidescale.js"></script>
<script>
	$(window).load(function(){
		$('#gallery').slidescale({
			photo_dir: 'PATH'
		});
	});
</script>
<div id="gallery">
	<ol id="galleryList">
		<li>
			<img src="<PATH>/img06.jpg" />
			<p>img01</p>
		</li>
		<li>
			<img src="<PATH>/img07.jpg" />
			<p>img02</p>
		</li>
		<li>
			<img src="<PATH>/img08.jpg" />
			<p>img03</p>
		</li>
		<li>
			<img src="<PATH>/img09.jpg" />
			<p>img04</p>
		</li>
		<li>
			<img src="<PATH>/img10.jpg" />
			<p>img05</p>
		</li>
		<li>
			<img src="<PATH>/img17.jpg" />
			<p>img06</p>
		</li>
		<li>
			<img src="<PATH>/img16.jpg" />
			<p>img07</p>
		</li>
		<li>
			<img src="<PATH>/img15.jpg" />
			<p>img08</p>
		</li>
		<li>
			<img src="<PATH>/img14.jpg" />
			<p>img09</p>
		</li>
		<li>
			<img src="<PATH>/img13.jpg" />
			<p>img10</p>
		</li>
	</ol>
</div>

SlideScaleについて

SlideScaleは、簡単に設置できる画像ギャラリーです。
機能自体はシンプルですが、オプションで見た目、動作を細かく設定できるのがポイントです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT or GPL v2
対応ブラウザ

関連するjQueryプラグイン

  • EasyGallery

    EasyGallery

    名前の通りイージーに設置できる画像ギャラリー

  • Craftyslide

    Craftyslide

    とても簡単に設置できる画像ギャラリー

  • Orbit

    Orbit

    画像の切り替えタイミングを見た目で表示できる画像ギャラリー

  • JustifiedGallery

    JustifiedGallery

    画像を隙間なく配置してくれる

  • cycle2

    cycle2

    非常に多機能な画像ギャラリー