• img01
    • img01

    img01の画像

  • img02
    • img02

    img02の画像

  • img03
    • img03

    img03の画像

  • img04
    • img04

    img04の画像

  • img05
    • img05

    img05の画像

  • img06
    • img06

    img06の画像

  • img07
    • img07

    img07の画像

  • img08
    • img08

    img08の画像

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

  • files
  • js
  • html
<link href="<PATH>/least.min.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/least.min.js"></script>
<script src="<PATH>/jquery.lazyload.min.js"></script>
<script>
	$(window).load(function(){
		$('#leastDemo').least({
			random: false
		});
	});
</script>

//オプション一覧
'random': true/false (default to true)
'lazyload': true/false  (default to true) jquery.lazyload.min.jsが必要
'scrollToGallery': true/false (default to true)
<ul id="leastDemo">
	<li id="fullPreview"></li>
	<li>
		<a href="<PATH>/img01.jpg"></a>
		<img data-original="[tempd]/images/jquery-plugin/img01.jpg" src="<PATH>/img01.jpg" width="200" height="125" alt="img01" />
		
		<div class="overLayer"></div>
		<div class="infoLayer">
			<ul>
				<li>img01</li>
			</ul>
		</div>
		<div class="projectInfo">
			<p>img01の画像</p>
		</div>
	</li>
	<li>
		<a href="<PATH>/img05.jpg"></a>
		<img data-original="[tempd]/images/jquery-plugin/img05.jpg" src="<PATH>/img05.jpg" width="200" height="125" alt="img02" />
		
		<div class="overLayer"></div>
		<div class="infoLayer">
			<ul>
				<li>img02</li>
			</ul>
		</div>
		<div class="projectInfo">
			<p>img02の画像</p>
		</div>
	</li>
	<li>
		<a href="<PATH>/img10.jpg"></a>
		<img data-original="[tempd]/images/jquery-plugin/img10.jpg" src="<PATH>/img10.jpg" width="200" height="125" alt="img03" />
		
		<div class="overLayer"></div>
		<div class="infoLayer">
			<ul>
				<li>img03</li>
			</ul>
		</div>
		<div class="projectInfo">
			<p>img03の画像</p>
		</div>
	</li>
	<li>
		<a href="<PATH>/img08.jpg"></a>
		<img data-original="[tempd]/images/jquery-plugin/img08.jpg" src="<PATH>/img08.jpg" width="200" height="125" alt="img04" />
		
		<div class="overLayer"></div>
		<div class="infoLayer">
			<ul>
				<li>img04</li>
			</ul>
		</div>
		<div class="projectInfo">
			<p>img04の画像</p>
		</div>
	</li>
	<li>
		<a href="<PATH>/img11.jpg"></a>
		<img data-original="[tempd]/images/jquery-plugin/img11.jpg" src="<PATH>/img11.jpg" width="200" height="125" alt="img05" />
		
		<div class="overLayer"></div>
		<div class="infoLayer">
			<ul>
				<li>img05</li>
			</ul>
		</div>
		<div class="projectInfo">
			<p>img05の画像</p>
		</div>
	</li>
	<li>
		<a href="<PATH>/img17.jpg"></a>
		<img data-original="[tempd]/images/jquery-plugin/img17.jpg" src="<PATH>/img17.jpg" width="200" height="125" alt="img06" />
		
		<div class="overLayer"></div>
		<div class="infoLayer">
			<ul>
				<li>img06</li>
			</ul>
		</div>
		<div class="projectInfo">
			<p>img06の画像</p>
		</div>
	</li>
	<li>
		<a href="<PATH>/img15.jpg"></a>
		<img data-original="[tempd]/images/jquery-plugin/img15.jpg" src="<PATH>/img15.jpg" width="200" height="125" alt="img07" />
		
		<div class="overLayer"></div>
		<div class="infoLayer">
			<ul>
				<li>img07</li>
			</ul>
		</div>
		<div class="projectInfo">
			<p>img07の画像</p>
		</div>
	</li>
	<li>
		<a href="<PATH>/img04.jpg"></a>
		<img data-original="[tempd]/images/jquery-plugin/img04.jpg" src="<PATH>/img04.jpg" width="200" height="125" alt="img08" />
		
		<div class="overLayer"></div>
		<div class="infoLayer">
			<ul>
				<li>img08</li>
			</ul>
		</div>
		<div class="projectInfo">
			<p>img08の画像</p>
		</div>
	</li>
</ul>

leastについて

leastは、印象的な画像ギャラリーを設置することができるプラグインです。
HTMLのタグ構成が若干複雑ですが、動き、見た目は印象的でインパクトのある画像ギャラリーを作れます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • EasyGallery

    EasyGallery

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

  • ExcoloSlider

    ExcoloSlider

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

  • desSlideshow

    desSlideshow

    一味違う画像ギャラリー

  • Orbit

    Orbit

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

  • ArtDesignSlider

    ArtDesignSlider

    ArtDesign Sliderはシンプルながらもクールなデザインの画像ギャラリー