Gridderプラグインのデモページ

【jQuery】Google画像ライクなギャラリーを作るならGridderプラグイン

2015.03.16   744


Googleの画像ギャラリーは多くの写真や画像を一覧に見せているだけでなくその内容の説明を見せるには一つの完成されたUIだと思います。

今回はそんなGoogle画像ライクなギャラリーが簡単に作れるGridderプラグインを紹介します。

百聞は一見にしかず。まずはデモを見てみてください。

GRIDDERプラグインのオススメ/ポイント

  •   Google画像と同じようなUIが簡単に作れる
  •   カスタマイズオプションもバッチリ
  •   スマホにも対応

GRIDDERプラグインのデモ


GRIDDERプラグインのページ


GRIDDERプラグインの使い方

それではGRIDDERプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<div class="container">
    <ul class="gridder">
        <li class="gridder-list">
            <div class="gridder-thumb">
                <div class="image">
                    <img src="./img/photo1.jpg">
                </div>
            </div>
            <div class="gridder-content">
                <div class="row">
                    <div class="col-sm-6">
                        <img src="./img/photo1.jpg" width="100%">
                    </div>
                    <div class="col-sm-6">
                        <h2>By Nick Diamantidis</h2>
                        <p>ミニチュア風だね</p>
                    </div>
                </div>
            </div>
        </li>
        <li class="gridder-list">
            <div class="gridder-thumb">
                <div class="image">
                    <img src="./img/photo2.jpg">
                </div>
            </div>
            <div class="gridder-content">
                <div class="row">
                    <div class="col-sm-6">
                        <img src="./img/photo2.jpg"    width="100%">
                    </div>
                    <div class="col-sm-6">
                        <h2>By Josh Felise</h2>
                        <p>キレイな夜空や…</p>
                    </div>
                </div>
            </div>
        </li>

        <li class="gridder-list">
            <div class="gridder-thumb">
                <div class="image">
                    <img src="./img/photo3.jpg">
                </div>
            </div>
            <div class="gridder-content">
                <div class="row">
                    <div class="col-sm-6">
                        <img src="./img/photo3.jpg"    width="100%">
                    </div>
                    <div class="col-sm-6">
                        <h2>By Joseph Barrientos</h2>
                        <p>こんなとこに行きたいし、住みたい</p>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <!-- 以下画像の数だけ続く -->
        </li>
    </ul>
</div>

チェックポイント

ulでgridderクラスを指定するのがポイント。もちろんクラス名は任意で大丈夫です。

ちなみに今回のサンプルはBootstrapを使用していますので、rowとかcol-sm-6とかのクラス名を入れている点は注意です。

CSSコード

<!-- Gridderプラグイン本体CSS -->
<link rel="stylesheet" href="./dist/css/jquery.gridder.min.css">
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
img{width: 100%; max-width: 100%;}

/* 選択した以外の画像を透過 */
.gridder.hasSelectedItem .gridder-list{opacity: 0.5;}
/* 選択した画像は透過を元に戻す */
.gridder.hasSelectedItem .gridder-list.selectedItem{opacity: 1;}

.gridder-list{float: none; display: inline-block; width: 350px; vertical-align: top; margin: 0px;}
.gridder-list .gridder-thumb{cursor: pointer;}
.gridder-list .title{display: block; font-weight: bold; color: #111; font-size: 14px;}
.gridder-list .description{color: #575757; min-height: 30px; font-size: 12px;}
@media only screen and (max-width: 768px){
    .gridder-list{width: 48%;}
    .gridder-list .image{height: auto;}
}

.gridder-show{padding: 50px; margin-bottom: 20px; background: #242424; -webkit-box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, 0.16); -moz-box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, 0.16); box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, 0.16);}
@media only screen and (max-width: 768px){
    .gridder-show{padding: 15px;}
}

.gridder-navigation{position: absolute; right: 50px; top: 25px;}
.gridder-navigation a{color: #FFF; display: inline-block; background: #4A4A4A; border-radius: 5px; margin-left: 5px; padding: 5px; font-size: 12px;}
.gridder-navigation a:hover{text-decoration: none; background: #CCC;}
@media only screen and (max-width: 768px){
    .gridder-navigation{position: relative; right: auto; top: auto; margin-bottom: 15px;}
}

.gridder-expanded-content h2,.gridder-expanded-content h3{color:#fff;}
.gridder-expanded-content p{font-size: 14px; line-height: 150%; color: #8E8C8C;}
</style>

チェックポイント

Gridderの本体CSSは必須ですが、その他のCSSはお好みで設定してください。

Bootstrapは使用しなくても大丈夫です。サンプルで見た目良くしたかったから入れただけです。

JavaScriptコード

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Gridder本体JS -->
<script src="./dist/js/jquery.gridder.min.js"></script>
<script>
jQuery(document).ready(function($){

    // Call Gridder
    $(".gridder").gridderExpander({
        scrollOffset : 60,
        scrollTo : "panel", // "panel" or "listitem"
        animationSpeed : 400,
        animationEasing : "easeInOutExpo",
        onExpanded : function(object){
            $(".carousel").carousel();
        },
    });
});
</script>

チェックポイント

オプションのドキュメントが見つからず…。値を色々変更して試してみてください(/・ω・)/

プラグインへ一言

慣れてるUIだから使いやすいね!

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております