とってもクールな仕掛けのイメージギャラリーを設置出来るjQueryプラグイン

もはやプラグインっていっちゃっていいのかわかんないレベルなんですけどね。

なによりこの手軽に設置出来る感が素晴らしいです。

このクールなギャラリーの特徴

ちなみにどんな感じにクールかといいますと、まずギャラリーが並んでおります。

例えば上段の真ん中の女性の写真をクリックしてみると・・・

こちらをクリックすると以下のようにギャラリーが下に下がっていきます。

つまりギャラリータイルが下に下がって、背景にクリックした画像が拡大されたものが現れる仕組みです。

ね、中々ですよね。

導入方法

ヘッダー部分

<!-- least.js CSS-file -->
<link href="css/least.min.css" rel="stylesheet" />
<!-- jQuery libary -->
<script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script>
<!-- least.js JS-file -->
<script src="js/least.min.js" defer="defer"></script>
<!-- Lazyload JS-file -->
<script src="js/jquery.lazyload.min.js" defer="defer"></script>

Body部分

<section>
 <ul id="gallery">
 <li id="fullPreview"></li>

 <li>
 <a href="img/full/1.jpg"></a>
 <img data-original="img/thumb/1.jpg" src="img/effects/white.gif" width="240" height="150" alt="Ocean" />

 <div class="overLayer"></div>
 <div class="infoLayer">
 <ul>
 <li>
 <h2>
 Ocean
 </h2>
 </li>
 <li>
 <p>
 View Picture
 </p>
 </li>
 </ul>
 </div>

 <div class="projectInfo">
 <strong>
 Day, Month, Year:
 </strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
 </div>
 </li>
 </ul>
</section>

<script>
$(document).ready(function(){
    $('#gallery').least();
});
</script>

という感じ。

最後の

$(‘#gallery’).least();

にて、section内の ul id=”gallery” を呼び出しています。
実際に触ってみるとすぐに分かるかと思います。

ダウンロードは以下から。是非おためしを。
least.js is a Random & Responsive jQuery, HTML 5 & CSS3 Gallery with LazyLoad