site_make

縦スライドギャラリー

2015-03-07

スライドギャラリーといってもカルーセルのような自動で1つの画像が動くパターンもあればクリックしないと動かないパターンや何枚か同時に動かすパターンといろいろなスライドパターンがあります。
このパターンは縦方向に何枚かを同時に表示するスライドギャラリーです。

縦スライドはよくサイドに設置されていることが多いですよね。場所を小さく、多くの情報をユーザーに見てもらうことができます。
イラストギャラリーとしては新着イラストや作品が多くなりすぎてしまった場合に重宝します。

スライドギャラリー(縦)

tateSlide

今回は三枚づつ表示していきます。
ただし、汎用性を考えて「同時に見せる枚数」「一枚づつの追加対応」「スライドスピードの設定」を追加してみますので、変数が増えますが動きそのものは簡単ですのでゆっくり見ていきましょう。

実際には汎用性を無視して表示枚数の固定と中身の数が表示数倍数ならば半分以上短くなりますので使う条件によって変更してもいいでしょう。そこがオリジナルで作るいいところでもありますが今回は汎用型ですからね。

サンプル

up
  • sam02
    1
  • sam02
    2
  • sam02
    3
  • sam02
    4
  • sam02
    5
down

html


    <div id="up">up</div>
    <div id="window">
        <ul>
            <li><img src="イラスト01" alt="" />
            <li><img src="イラスト02" alt="" />
            <li><img src="イラスト03" alt="" />
            <li><img src="イラスト04" alt="" />
            <li><img src="イラスト05" alt="" />
        </ul>
    </div>
    <div id="down">down</div>

css

毎回失礼しますが、これは必要最低限の内容のみとなってますのでサイズやレイアウトはご自由に変更くださいね。


    #window {overflow:hidden;position:relative;}
    #window ul  {position:absolute;left:0;}
    #window ul li {width:**px;height:**px;}

jQuery

まずはjQueryの全体図です。


    $(function(){
        
        var data = {
                    "scrollSpeed":2000, //スライドスピード設定
                    "scrollLength":3, //表示枚数
        }
        
        
        
        var ul = $('#window').find('ul');
        var li = ul.find('li');
        var con = li.length;
        var boxH = ul.innerHeight();
        var contH = li.innerHeight();
        var ss = Number(data["scrollLength"]);
        var sp = Number(data["scrollSpeed"]);
        
        
        var foot = con - ss - 1; //イラスト枚数のラスト3枚のindex
        
        var lt = ul.find('li:lt('+ss+')').clone(); //より小さいindex
        var gt = ul.find('li:gt('+foot+')').clone(); //より大きいindex
        
        var move = ss * contH;
        var top = 0 - move; //初期位置
        
        $('#window').css('height',contH * ss + 'px');
        ul.append(lt).prepend(gt).css('top',top + 'px');
        
        var act = false; //スライドしてない
        
        $('#up').click(function(){
            if(act == false){
                
                act = true; //スライドした
                
                if(top <=  -boxH){ul.css('top',top + boxH + 'px');top = top + boxH;}
                
                ul.stop(true,true).animate({'top':top - move + 'px'},sp,function(){
                        top = top - move;
                        if(top <=  -boxH){ul.css('top',top + boxH + 'px');top = top + boxH;}
                        act = false; //スライド終わり
                });
            }
                
        });
        
        $('#down').click(function(){
            if(act == false){
                
                act = true; //スライドした
                
                if(top >= -move){ul.css('top',top - boxH +'px');top = top - boxH;}
                
                ul.stop(true,true).animate({'top':top + move + 'px'},sp,function(){
                        top = top + move;
                        if(top >= -move){ul.css('top',top - boxH +'px');top = top - boxH;}
                        act = false; //スライド終わり
                });
            }
        });
        
    });	

長く感じますが半分以上は初期設定です。

部分説明

まずは最初の設定部分ですが、ここで「スライドスピードの設定」と「同時に見せる枚数」を設定します。
「scrollSpeed」がスピード設定
「scrollLength」が見せる枚数です。


    var data = {
                "scrollSpeed":2000, //スライドスピード設定
                "scrollLength":3, //表示枚数
    }

ここは他のギャラリーでも同じですね。
innerHeight()はmargin・paddingを含んだ高さの取得です。
下の2行(数列にして格納)はいらないのですがNumber()は”文字列”ではなく数値となります。dataという配列から[“scrollLength”]という名前を引きだしています。


    var ul = $('#window').find('ul');
    var li = ul.find('li');
    var con = li.length; //初期のイラスト枚数
    var boxH = ul.innerHeight(); //初期の全体の高さ
    var contH = li.innerHeight(); //イラスト一枚の高さ
    
    var ss = Number(data["scrollLength"]); //スライドスピード設定を数列にして格納
    var sp = Number(data["scrollSpeed"]); //表示枚数を数列にして格納

ここからは表示の準備です。最初に表示されたときの状態を作ります。
まず最初にイラストの全体の上にラスト3枚をコピーして追加します。同様にイラストの全体の下にも最初の3枚をコピーして追加します。
これは最初のクリックや最後のイラスト表示の際に出てくる画像が途切れないためのゆとりになります。
最後の「var act = false;」はスライドしているかいないかの判断をします。


    var foot = con - ss - 1; //イラスト枚数のラスト3枚のindex
    
    var lt = ul.find('li:lt('+ss+')').clone(); //より小さいindexをコピー
    var gt = ul.find('li:gt('+foot+')').clone(); //より大きいindexをコピー
    
    var move = ss * contH; //イラストの移動量
    var top = 0 - move; //初期位置
    
    $('#window').css('height',contH * ss + 'px'); //表示窓を表示枚数分の大きさに
    ul.append(lt).prepend(gt).css('top',top + 'px'); //コピーを追加して初期位置に
    
    var act = false; //スライドしてない

ここがスライドするところです。
「#up」をクリックすると、まず初めに「act = true;」になります。動きだしました。

そして「top – move」(初期位置 – イラストの移動量)の分だけアニメーションします。
その後、現在位置「top」を読んで、次のイラストが足らないと同じイラストのある下のところに瞬間移動(css(‘top’,top + boxH + ‘px’))します。
そこの現在位置をまた取得してtopに格納。
最後に「act = false;」でスライド終わりを告げます。


        $('#up').click(function(){
            if(act == false){
                
                act = true; //スライドした
                
                if(top <=  -boxH){ul.css('top',top + boxH + 'px');top = top + boxH;}
                
                ul.stop(true,true).animate({'top':top - move + 'px'},sp,function(){
                        top = top - move;
                        if(top <= -boxH){ul.css('top',top + boxH + 'px');top = top + boxH;}
                        act = false; //スライド終わり
                });
            }
                
        });

ここでのポイントはクリックした瞬間です。
2行目で「act == false」かどうかをチェックします。動いているときにまたクリックされると嫌ですからw
それと4行目の「top <= -boxH」で次のイラストがあるかどうかのチェックもします。 ない状態だとカラッポが出てきてしまいます。(upとdownがあるために次のイラストがないときもあります。) 7行目と同じ内容ですね。

「#down」スライドもほぼ同じですが次のイラストのあるなしの判断数値が「top >= -move」になっています。

関連ページ

copyright 2019 eo
  プロフィール  PR:無料HP  免許合宿  プログラマー 専門学校  タイヤ 価格  中古ホイール 富山  タイヤ  Webディレクター 専門学校  パーツオフ  開運パワーストーン  児童心理学  投資顧問ベストプランナー 評価  エルグランド 中古  シアリス 通販