jQuery----ギャラリーページの作成

ギャラリーページの作成

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、VSCodeの拡張機能から「Live Server」をインストールしているものとする。
jqueryのCDNは jquery-3.7.1.min.js及び、 modernizr.min.js

【Javascriptライブラリ】
・Masonry→レスポンシブ対応のグリッドレイアウトが出来る
・imagesLoaded→すべての画像の読み込みが終わった後に処理を実行できるため、Masonryのレイアウト崩れを防げます。

【Webデザイン】

サムネイルをクリックすると、大きなぁ画面になる

■ギャラリーパージの主な機能
今回は「フォットグラファーが自分の作品を紹介するポートフォリオサイト」を想定して、最終的には以下の要件を満たす機能を実装していきます。

・サムネイル画像を自動的にグリッド状に並べて表示する。
・各サムネイル画像がクリックされると、より大きなサイズの画面を表示する。
・外部ファイルからデータを取得する
・表示するアイテムを絞り込める「フィルタリング機能」を加える
【プロブラム】
フォルダー

【index.html】



【CSSフォルダー】
main.cssファイルにコードを書く

@charset "UTF-8";

/* Base */

html {

     "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN",

      "Meiryo", sans-serif;

      font-size: 14px;

      line-height: 1.5;

    }

body {

     background-color: rgb(245, 245, 245);

      color: rgb(0, 0, 0);

    }

h1 {

     font-size: 100%;

      margin: 0;

    }

img {

    vertical-align: middle;

}

/* Page header */

.page-header {

    background-color: rgb(255, 255, 255);

    border-bottom: 1px solid rgb(230, 230, 230);

    padding: 32px 0;

    width: 100%;

}

.page-header ＞ .inner {

    width: 950px;

    padding: 8px 10px;

    margin: auto;

}

site-logo {

    line-height: 1;

}

/* Page main */

.page-main {

    margin: auto;

    padding: 0 10px 100px;

    width: 950px;

}

/*

 * Gallery

 */

.gallery {

    margin: 0;

    padding: 0;

}

.gallery-item {

    list-style: none;

    margin-top: 10px;

}

/* 画像の読み込み中は見えないように */

.gallery-item .is-loading {

    /*要素の不透明度を設定*/

    opacity: 0;

}

【JSフォルダー】
main.jsファイルにコードを書く

$(function () {

    /*

     * ギャラリー

     */

    $('#gallery').each(function () {

        // #gallery 要素がギャラリーのコンテナーになる

        var $container = $(this);

        // オプションを設定し Masonry を準備

        $container.masonry({

            columnWidth: 230,

            gutter: 10,

            itemSelector: '.gallery-item'

        });

        // JSON ファイルをリクエストし、成功したら処理を実行

        $.getJSON('./data/content.json', function (data) {

            // ループで生成した DOM 要素を一時的に保存する配列宣言

            var elements = [];

            // JSON の配列 (data) の要素 (item) ごとにループ処理

            $.each(data, function (i, item) {

                // 配列の要素から HTML 文字列を生成

                var itemHTML =

                        '＜li class="gallery-item is-loading"＞' +

                            '＜a href="' + item.images.large + '"＞' +

                                '＜img src="' + item.images.thumb +

                                    '" alt="' + item.title + '"＞' +

                            '＜/a＞' +

                        '＜/li＞';

                // HTML の DOM 要素を取り出して、itemHTML配列に追加する

                elements.push($(itemHTML).get(0));

            });

            // DOM を挿入

            $container.append(elements);

            // 画像の読み込みが完了したら Masonry レイアウト

            $container.imagesLoaded(function () {

                $(elements).removeClass('is-loading');

                $container.masonry('appended', elements);

            });

        });

    });

});

【Dataフォルダー】
✘.jsonは,データ形式の1つであり、JavaSrriptに限らす広く利用されている

content.jsonは全体が[  ]で囲まれた配列です。配列の各要素は｛｝で囲まれた部分です。

[

   

    {

        "title": "A Day in the Life",

        "images": {

            "thumb": "img/thumb-1-1.jpg",

            "large": "img/large-1-1.jpg"

        }

    },

    {

        "title": "A Hard Day’s Night",

        "images": {

            "thumb": "img/thumb-1-2.jpg",

            "large": "img/large-1-2.jpg"

        }

    },
｛、、、、、}

]

【imgフォルダ】
下図のような写真が入ってる

 

以上