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

HTML5+CSS3で実装する、レスポンシブ対応で各サムネイル画像をディスクリプション付きで拡大表示する画像ギャラリーを実装するjQueryのプラグインを紹介します。

サイトのキャプチャ

least.js

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>

Step 3: スクリプトの実行

は特にありません。Step 2までで動作します。

top of page

©2017 coliss