[JS]レスポンシブ対応の非常に美しい画像ギャラリーを実装する設置が簡単なスクリプト -least.js

サイト構築 -JavaScript

Post on:2013年5月20日

least.jsのデモ

デモはCSS3対応ブラウザでご覧ください。

least.js -デモ：幅1200pxで表示

グリッド状に配置されたサムネイル画像をクリックすると、CSS3アニメーションで拡大画像が表示されます。

least.js -デモ：画像の拡大時

画像はサムネイル時には見出しなどが表示され、拡大時には説明文なども一緒に掲載できます。

レスポンシブ対応なので、表示サイズに合わせて最適化されます。

least.js -デモ：幅780pxで表示

拡大表示時も、表示サイズに合わせて最適化されます。

least.js -デモ：画像の拡大時

least.jsの使い方

実装は非常にシンプルで、簡単です。

Step 1: 外部ファイル

head内に「jquery.js」と当スクリプト・スタイルシートを記述します。画像の遅延読み込みには「lazyload.js」を使用します。

<!-- 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.js" defer="defer"></script>

Step 2: HTML

ギャラリー部分のHTMLです。
リスト要素を使い、一つ目は大きい画像を表示するエリアを確保し、二つ目は各画像の大小やディスクリプション用です。

<section>
    <ul id="gallery">
        <li id="fullPreview"></li>
        
        <li>
            <a href="img/full/full_1.jpg"></a>
            <img data-original="img/thumb/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>
                    Monday, 14th April 2093:
                </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>