BOOK Studio947
狩野祐東・狩野さやか著書

サムネイルを繰り返し表示する

書籍Q&ACategory: 作りながら学ぶjQueryデザインの教科書サムネイルを繰り返し表示する
kumasin asked 10か月 ago

度々の質問失礼いたします
何点か疑問がございまして、ご教授頂きたく存じます
 
function doCarousel(btn, direction){
  var $btn = btn;  

 

var $carousel = $btn.closest(‘.carousel’);

 

var $imgContainer = $carousel.find(‘.thumbs’);

 

var move = direction * $carousel.width() + $imgContainer.position().left;

 

$imgContainer.filter(‘:not(:animated)’) 
  .animate({left: move},
  {
    duration:800,

    ①progress:function(){
      var $this = $(this);  
 
      var $imgList = $this.find(‘.thumbs-list’).first();
 
      //移動量がthumbs-listの幅を上回ったら.thumbsのポジションをリセット
      var resetPos;
 
      //[<]がクリックされた時   
      if(direction == 1 && 0 <= $this.position().left){
    ②resetPos = $this.position().left – $imgList.outerWidth();
        $this.css({“left”: resetPos});
      }

     

      //[>]がクリックされた時

      if(direction == -1 && $imgList.outerWidth() <= Math.abs
      ($this.position().left)){
     ③resetPos = $this.position().left + $imgList.outerWidth();
        $this.css({“left”: resetPos});

 
①ですが、CSSのプロパティ値が変更される度に呼び出されるということですが、これはクリックされてleft値が変わる時ということでしょうか?
そして$this.find(‘.thumbs-list’).first();は<li>のことですか?
②は上記前提が分からないので、何故 $this.position().left から$imgList.outerWidth();を引くのか、③は$this.position().left に $imgList.outerWidth();を足すのかが不明瞭になってしまいます。

 
if文は一度クリックすれば条件を満たしますよね?
この条件式によってサムネイル画像が途切れずに表出してるという理解で正しいですか?
 

 移動量がthumbs-listの幅を上回ったら.thumbsのポジションをリセット
    var resetPos;というのがそもそもよくわかりません

 
貴書の通りコードを書いて正しく動作しているのですが、動きをイメージ出来なく、また質問も混沌としているのですが、どうかもう少し詳しく教えて頂けないでしょうか?
 

2 Answers
狩野 祐東 Staff answered 10か月 ago

animate()はCSSの値を徐々に変更することでアニメーションを実現するメソッドです。1回のクリックでアニメーションの最終的な位置がleftプロパティに代入されるわけではありません。おそらく、animate()メソッド自体の動作をもう一度確認されるのがよいと思います(p.164、p.170)。

また、$imgContainerには同じサムネイルのセット(

    )が2つ含まれている、ということをいま一度思い返したうえで……


    progressプロパティの関数は、animate()メソッドがCSSプロパティを変更するたびに、このサンプルの場合はleftプロパティの値が更新されるたびに呼び出されます。この関数で行っていることは、leftプロパティが更新されるたびに$imgContainerの位置を確認して……

    $imgContainerの位置が左端に到達した(②の場合)、または右端に到達した(③の場合)ときに、大きくなりすぎた、または小さくなりすぎた$imgContainerのleftプロパティの値を

      ひとつ分元に戻しています。この辺の話はテキストp.297〜 に書かれていますので、もう一度確認してみてください。

kumasin answered 10か月 ago

ご回答賜りありがとうございます。
例えば「>」ボタンをクリックするとサムネイル画像は左にスライドします。
先生が仰っていたように$imgContainerには同じサムネイルのセットがclone()で2つ入ってます。この幅を超えてしまった時「  if(direction == -1 && $imgList.outerWidth() <= Math.abs($this.position().left))」が、サムネイル画像が途切れてしまう時ですから、resetPos = $this.position().left + $imgList.outerWidth();
 $this.css({“left”: resetPos});で0に戻しているという理解でよろしいでしょうか?
少し分かってきたように思います。
 
それともう一点教えて頂きたいのですが
当章.wrapper-galleryや他章でもございましたが、cssでpadding: 30px  4.166666%と指定されてまされてますが、これは40/960%の計算結果なのは分かるのですが、これは左右に指定するにどういった数値なのでしょうか?
 

狩野 祐東 Staff replied 10か月 ago

> 例えば「>」ボタンをクリックするとサムネイル画像は左にスライドし……

その理解であっています。

> それともう一点教えて頂きたいのですが

レスポンシブデザインに対応するために、左右パディングを固定数ではなく、割合で設定する必要があります。ここではPC表示で左右に約40pxのパディングを設けたいので、コンテンツが収まる全体の領域の幅(960px)からの割合を計算しています。.galleryなど、ほかの部分のパディング設定も考え方は同じです。