このプラグインの実際の動きを確認したい場合は、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プラグイン

  • simpleGal

    simpleGal

    simpleGalはとてもシンプルは画像ギャラリー

  • EasyGallery

    EasyGallery

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

  • desSlideshow

    desSlideshow

    一味違う画像ギャラリー

  • FlowGallery

    FlowGallery

    簡単にインパクトのある画像ギャラリーを設置できる

  • Orbit

    Orbit

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