jQuery Gamma gallery 実装方法を教えてください。

お世話になります。

制作中のWEBサイトにフォトギャラリーを作ろうと思い、「Gamma gallery」という jQuery のスクリプトを実装しようとしているのですが、つまずいています。

これまでは、参考サイトを手がかりに、以下の手順で実装を試みました。

公式サイトからスクリプトをダウンロード
ダウンロードしたフォルダ内の「js」フォルダの中身を、自分の作業フォルダに移動。
ダウンロードしたフォルダ内の「images」フォルダを、自分の作業フォルダに移動。
作業フォルダ内の「index.html」に、以下のソースを記入。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>イメージギャラリー</title>
　<script src="common/js/jquery.js"></script>

  <!-- 以下のソースでダウンロードしたjsファイルを読み込んでいます。 -->
  <script src="common/js/gamma-gallery/jquery.masonry.min.js"></script>
  <script src="common/js/gamma-gallery/jquery.history.js"></script>
  <script src="common/js/gamma-gallery/js-url.min.js"></script>
  <script src="common/js/gamma-gallery/jquerypp.custom.js"></script>
  <script src="common/js/gamma-gallery/gamma.js"></script>
</head>
<body>

<!-- 参考サイトのコピペですが、画像のパスは通しています。 -->
<div class="gamma-container gamma-loading" id="gamma-container">
  <ul class="gamma-gallery">
    <li>
      <div data-alt="img01" data-description="<h3>Assemblage</h3>" data-max-width="1800" data-max-height="2400">
        <div data-src="common/js/images/xxxlarge/3.jpg" data-min-width="1300"></div>
        <div data-src="common/js/images/xxlarge/3.jpg" data-min-width="1000"></div>
        <div data-src="common/js/images/xlarge/3.jpg" data-min-width="700"></div>
        <div data-src="common/js/images/large/3.jpg" data-min-width="300"></div>
        <div data-src="common/js/images/medium/3.jpg" data-min-width="200"></div>
        <div data-src="common/js/images/small/3.jpg" data-min-width="140"></div>
        <div data-src="common/js/images/xsmall/3.jpg"></div>
        <noscript>
          <img src="common/js/images/xsmall/3.jpg" alt="img01"/>
        </noscript>
      </div>
    </li>
  </ul>
  <div class="gamma-overlay"></div>
</div>

<script>
  $(function() {
    var GammaSettings = {
      viewport : [ {
        width : 1200,
        columns : 5
       }, {
        width : 900,
        columns : 4
       }, {
        width : 500,
        columns : 3
       }, {
        width : 320,
        columns : 2
       }, {
        width : 0,
        columns : 2
       } ]
     };
      Gamma.init( GammaSettings );
   });
</script>

</body>
</html>

jsファイルは読み込んでいるし、画像のパスも通っていると思うのですが、ブラウザ上には何も表示されません。
何か手順が抜けているのだと思いますが、それが全く分からない状態です。

ヒントになりそうなことだけでも結構です。
どなたか知恵を貸していただけると、大変助かります。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

ブラウザの開発ツールのコンソールでエラーが出ているはずですね！
（↑　が、何のことだか分からない場合は、調べてくださいね。javascriptのコードを書くなら、これの使い方も覚えた方が良いです）

公式サイトからダウンロードしたzipファイルの中に、サンプルのindex.htmlが入っていたと思いますが、それと提示されたコードを比較した限り、表示されない原因は、読み込むjsファイルが足りていないことのようです。

サンプルのindex.htmlを見ると、大事そうなgammaなんちゃらのjsファイルの記述は</body>の直前にまとめて書かれているのですが、1つのファイルだけ<head>タグ内に書かれていて（不親切ですね^^;）、このjsファイルが読まれていないため、エラーが発生しているようです。

modernizr.custom.70736.js

このファイルの読込が必要なのだと思います。（jsフォルダに中にあるはず・・）

投稿2018/08/31 03:27

mix-peach

総合スコア1910

neko_cat

2018/08/31 06:27

mix-peachさま丁寧なご回答ありがとうございます。指摘して下さった js ファイルを、自分の index.html でも読み込んでみました。加えて、サンプルと同様に css ファイルも読み込んでみたところ、ようやく画像を表示させることができました。ただ、さらなる課題が出てきてしまいました、、、サンプルでは、ブラウザ幅に応じて表示する画像が変更される仕様になっているのですが、それがうまく実装できません。ブラウザのロード・リロード時は、ちゃんとブラウザ幅に合った画像が表示されるのですが、ブラウザ幅をリサイズしてもロード・リロード時と同じ画像が表示され続けてしまいます。ちなみに開発ツールのコンソールでは、ブラウザをリサイズすると以下のエラーが表示されました。 uncaught TypeError: Cannot read property 'apply' of undefined at jquery.masonry.min.js:10 （jquery.masonry.min.js に原因があるということなのでしょうか。ただ、サンプルと全く同じファイルを使用しているので、それは考えにくいのではと思っています）重ねての質問になってしまい恐縮ですが、ヒントになりそうなことなどがありましたら、お教えいただけると幸いです。

mix-peach

2018/09/03 01:33 編集

ブラウザ幅云々は、↓の記述が必要なのかと思います。ブラウザ幅をレスポンシブにする記述です。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> エラーについては、こちらの手元では確認ができないのですが、可能性としては大元のjqueryのバージョン違いによって発生しているのかもしれません。サンプルだと、1.8.2が使われていると思うのですが、neko_catさんが手元に用意して読み込んでいるjqueryファイルのバージョンも1.8.2でしょうか？

行動規範の内容に同意します