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

  • Orbit

    Orbit

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

  • ExcoloSlider

    ExcoloSlider

    シンプルなレスポンシブ対応の画像ギャラリー

  • PresentationCycle

    PresentationCycle

    画像の切り替わるタイミングをバーで表示できる画像ギャラリー

  • cycle2

    cycle2

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

  • least

    least

    印象的な画像ギャラリーを設置することができる