Masonryのギャラリーにフィルター機能を追加する

2015年10月29日

Masonryのギャラリーにフィルターを付けてみました。実行結果を見て頂ければ分かりますが、画像のギャラリーがまず表示されます。次に国名をクリックすると、その国名に該当する写真だけを抽出して表示します。
サンプルコードの実行結果はこちら

今回使用したjQueryプラグイン
・Masonry
・imagesLoaded
前回と同じプラグインです。

style.css

    *{margin:0;padding:0;}
    ul li{list-style-type:none;}

    .clearfix:before, 
    .clearfix:after { content: " "; display: table; }
    .clearfix:after { clear: both; }

    .pHeader{
        background-color:white;
        margin:0 auto;
        width:100%;
        position:fixed;
        z-index:5;
    }
    .inner{
        width:100%;
        padding: 8px 10px;
        margin: auto;
    }
    .main{
        margin:0 auto;
        padding: 100px 10px;
        width:100%;
    }

    .filterForm{float:right;}
    .filterForm label{
        font-weight:bold;
        cursor:pointer;
        margin-right:60px;
        padding:0 0.1em;
        -webkit-user-select:none;
    }
        label.ui-state.focus{outline:1px solid;}
        label .ui-icon{
            background:url(img/sprites.png) no-repeat 0 0;
            width:17px;
            height:17px;
            margin-right:0.5em;
            margin-top:2px;
            vertical-align:top;
            display:inline-block;
        }
        .filterForm label.ui-state-active .ui-icon{
            background-position:-20px 0;
        }

    .loadMore{
        background-color:white;
        border:1px solid #f0f0f0;
        display:block;
        padding:1em 0;
        width:100%;
        margin-top:10px;
    }

    .galleryItem{margin-top:10px;}
    .galleryItem a{display: block;}
    .galleryItem .caption{display:none;}

    .ui-helper-hidden-accessible {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
    }

*{margin:0;padding:0;}

ul li{list-style-type:none;}

.clearfix:before,

.clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.pHeader{

background-color:white;

margin:0 auto;

width:100%;

position:fixed;

z-index:5;

}

.inner{

width:100%;

padding: 8px 10px;

margin: auto;

}

.main{

margin:0 auto;

padding: 100px 10px;

width:100%;

}

.filterForm{float:right;}

.filterForm label{

font-weight:bold;

cursor:pointer;

margin-right:60px;

padding:0 0.1em;

-webkit-user-select:none;

}

label.ui-state.focus{outline:1px solid;}

label .ui-icon{

background:url(img/sprites.png) no-repeat 0 0;

width:17px;

height:17px;

margin-right:0.5em;

margin-top:2px;

vertical-align:top;

display:inline-block;

}

.filterForm label.ui-state-active .ui-icon{

background-position:-20px 0;

}

.loadMore{

background-color:white;

border:1px solid #f0f0f0;

display:block;

padding:1em 0;

width:100%;

margin-top:10px;

}

.galleryItem{margin-top:10px;}

.galleryItem a{display: block;}

.galleryItem .caption{display:none;}

.ui-helper-hidden-accessible {

border: 0;

clip: rect(0 0 0 0);

height: 1px;

margin: -1px;

overflow: hidden;

position: absolute;

width: 1px;

}

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Masonryギャラリーにフィルターの機能を付けてみる</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>
    
    <link rel="stylesheet" href="style.css">
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script src="js/masonry.pkgd.min.js"></script>
    <script src="js/galleryFilter.js"></script>

</head>
<body>
    
<header class="pHeader">
    <div class="inner clearfix">
        <h1><a href="#">Gallery Test</a></h1>

        <!--
            画像をフィルタリングするためのフォーム
        -->
        <form class="filterForm" id="galleryFilter">
            <span class="formItem">
                <input type="radio" name="filter" 
                id="filterAll" value="all" checked>
                <label for="filterAll">All</label>
            </span>
            <span class="formItem">
                <input type="radio" name="filter" 
                id="filterUz" value="Uzbekistan">
                <label for="filterUz">Uzbekistan</label>            
            </span>
            <span class="formItem">
                <input type="radio" name="filter" 
                id="filterKy" value="kirgis">
                <label for="filterKy">Kyrgis</label>
            </span>
            <span class="formItem">
                <input type="radio" name="filter" 
                id="filterKa" value="Kazakhstan">
                <label for="filterKa">Kazakhstan</label>
            </span>
            <span class="formItem">
                <input type="radio" name="filter" 
                id="filterRu" value="Russia">
                <label for="filterRu">Russia</label>
            </span>
        </form>
    </div>
</header>
    
    <div class="main">
        <ul class="gallery" id="gallery"></ul>
        
        <!--
            画像を追加で読み込むボタンを表示
        -->
        <button class="loadMore" 
               id="loadMore">More</button>
    </div>
    
</body>
</html>

<!doctype html>

<html>

<head>

<title>Masonryギャラリーにフィルターの機能を付けてみる</title>

</head>

<body>

<h1><a href="#">Gallery Test</a></h1>

<!--

画像をフィルタリングするためのフォーム

-->