【jQuery入門】フォトギャラリーのサムネイルリストをスクロール表示する

ソースコード

<img id="up" class="navi" src="https://placehold.jp/20x20.png" />
<img id="down" class="navi" src="https://placehold.jp/20x20.png" />
<div id="container">
  <ul id="list">
    <li><img src="https://placehold.jp/100x100.png" alt="外を眺めるハム" /></li>
    <li><img src="https://placehold.jp/110x110.png" alt="板の上のハム" /></li>
    <li><img src="https://placehold.jp/120x120.png" alt="上から見たハム" /></li>
    <li><img src="https://placehold.jp/130x130.png" alt="ガジガジするハム" /></li>
    <li><img src="https://placehold.jp/140x140.png" alt="同化するハム" /></li>
    <li><img src="https://placehold.jp/150x150.png" alt="眠るハム" /></li>
    <li><img src="https://placehold.jp/160x160.png" alt="上を見るハム" /></li>
    <li><img src="https://placehold.jp/170x170.png" alt="端っこのハム" /></li>
    <li><img src="https://placehold.jp/180x180.png" alt="振り返るハム" /></li>
    <li><img src="https://placehold.jp/190x190.png" alt="腕にのるハム" /></li>
    <li><img src="https://placehold.jp/200x200.png" alt="網をのぼるハム" /></li>
    <li><img src="https://placehold.jp/210x210.png" alt="顔を出すハム" /></li>
    <li><img src="https://placehold.jp/220x220.png" alt="眠そうなハム" /></li>
    <li><img src="https://placehold.jp/230x230.png" alt="しがみつくハム" /></li>
    <li><img src="https://placehold.jp/240x240.png" alt="のびるハム" /></li>
    <li><img src="https://placehold.jp/250x250.png" alt="遊ぶハム" /></li>
  </ul>
</div>
<hr />
<img id="big" />

$(function () {
  var l = $("#list");

　　// 上スクロール処理
  $("#up").click(function () {
    if (parseFloat(l.css("margin-top")) < 0) { // 上端以外であればスクロール
      l.animate(
        {
          marginTop: parseFloat(l.css("margin-top")) + 44 + "px"
        },
        1000
      );
    }
  });

　　// 下スクロール処理
  $("#down").click(function () {
    if (
      Math.abs(parseFloat(l.css("margin-top"))) <
      44 * ($("li", l).length / 5 - 1) // 下端以外であればスクロール
    ) {
      l.animate(
        {
          marginTop: parseFloat(l.css("margin-top")) - 44 + "px"
        },
        1000
      );
    }
  });

  $("#big")
    .on("error", function () {
      $(this).attr("src", "../images/noimg.jpg");
    })
    .attr("src", $("#list img:first-child").attr("src"));
  $("#list img").click(function () {
    var img = $(this);
    $("#big")
      .hide(1000, function () {
        $(this).attr("src", img.attr("src"));
      })
      .show(2000);
    //    $('#big')
    //      .hide(1000).
    //      .attr('src', img.attr('src'))
    //      .show(2000);
  });
});

#container {
  padding: 0px;
  height: 44px;
  width: 300px;
  overflow: hidden;
}

.navi {
  margin-top: 10px;
  float: left;
}

#list {
  margin: 0px;
  padding: 0px;
}

#list li {
  margin: 2px;
  height: 40px;
  list-style-type: none;
  float: left;
}

#list img {
  width: 55px;
  height: 40px;
}

hr {
  clear: both;
}

#big {
  width: 315px;
  height: 235px;
}

See the Pen
jQuery19-1 by shinjiezumi (@sezumi)
on CodePen.

サムネイルの一部だけが表示されるようにする

サムネイルリストをもう一つ上位の要素(<div id="container">)で囲んでいる。
高さを44pxとしているのは、画像の高さと上下マージンを加えた値だから。

div要素の配下で幅300pxを超えた分は折り返し表示され、overflowプロパティをhiddenにしているので、300pxx44pxを超えた分は非表示となり、ul要素の一部だけを表示する窓のようになっている

animateメソッドの基本

animateメソッドは、これまでに見てきたshow／hide、slideDown／slideUp、fadeIn／fadeOutメソッドに比べると少しだけ複雑。

$(セレクター).animate(
  {
    プロパティ名: 値
  },
 　時間,
  コールバック関数
)

コールバック関数はその他アニメーションメソッドと同じ。
animateメソッドでポイントになるのはプロパティの部分で、プロパティ名には値として数字を受け取るCSSのプロパティを指定できる。

例えば、height,width, margin, opacityなど。以下はdiv要素を5秒かけて、(500, 350)の位置に移動させる例。

$(function) {
  $('div').animate({
    marginTop: '350px',
    marginLeft: '500px'
  },
  5000)
}

要は、animateメソッドは、もともとの状態から指定された状態まで徐々に変化させていくメソッド。

サムネイルリストのスクロール機能を実装する

div要素の中でUl要素の上余白(margin-topプロパティ)を変化させることで、スクロールを実現させている。

えず

東京でフリーランスのWebエンジニアやっています。今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。当面の目標はDevOps寄りのオールラウンダー。