このエントリーをはてなブックマークに追加
Pocket

第2回のTERAKOYA勉強会では第1回と同じくHONOKA GRAPHICSの事務所をお借りして開催しました。

クライアントワークなどでjQueryは多用しますが、すべて自作ということはなく、プラグインを使う頻度も高いです。

出来の良いjQueryプラグインは、色々なオプション、メソッドが用意されているためjQueryが少し書けると、jQueryプラグインをうまく使うことができます。

今回はスライダーが簡単に実装できるjQueryプラグイン「bxSlider」とjQueryの文法を組み合わせて「bxSlider」を少しだけかしこく使う方法をやってみました。

 

 

Public method（パブリックメソッド）を使ってスライダーを操作する

パブリックメソッドとはプラグインの外側から呼び出せるメソッドです。

ざっくり言うとスライダーを操作する命令みたいなもんです。（多分）

 

bxSliderに用意されているパブリックメソッドは下記を参照ください

http://bxslider.com/options#onSlidePrev

 

サンプル

http://jsdo.it/Masaki.Nakamura/84JE

 

HTML


<ul class="slider">
    <li><img src="http://jsrun.it/assets/3/Z/P/7/3ZP7k.jpg"></li>
    <li><img src="http://jsrun.it/assets/x/M/Z/Z/xMZZz.png"></li>
    <li><img src="http://jsrun.it/assets/9/K/q/Y/9KqYE.jpg"></li>
</ul>

<ul class="thumb">
    <li class="thumb01"><a href="#"><img src="http://jsrun.it/assets/3/Z/P/7/3ZP7k.jpg"></a></li>
    <li class="thumb02"><a href="#"><img src="http://jsrun.it/assets/x/M/Z/Z/xMZZz.png"></a></li>
    <li class="thumb03"><a href="#"><img src="http://jsrun.it/assets/9/K/q/Y/9KqYE.jpg"></a></li>
</ul>

<br><br>

<p>
    <a href="#" class="click">スライドの2番めへ移動</a><br>
    <a href="#" class="prev">次のスライドへ移動</a><br>
    <a href="#" class="next">前のスライドへ移動</a>
</p>

 

JS


$(function(){

    var slider = $('.slider').bxSlider({
        slideWidth:200
    });

    //サムネイルをクリック
    $('.thumb li.thumb01 a').click(function(){
        slider.goToSlide(0);
        return false;
    });

    $('.thumb li.thumb02 a').click(function(){
        slider.goToSlide(1);
        return false;
    });

    $('.thumb li.thumb03 a').click(function(){
        slider.goToSlide(2);
        return false;
    });

    //テキストリンクをクリック
    $('a.click').click(function(){
        slider.goToSlide(1);
        return false;
    });

    $('a.prev').click(function(){
        slider.goToNextSlide();
        return false;
    });

    $('a.next').click(function(){
        slider.goToPrevSlide();
        return false;
    });

});

 

上記のサンプルでは、

  • サムネイルをクリックすると該当のスライドへ移動するように操作
  • テキストリンクでprev、nextなどスライダーを操作

しています。

bxsliderを実行したオブジェクトを変数「slider」へ代入して

  • slider.goToSlide(2);
  • slider.goToNextSlide();
  • slider.goToPrevSlide();

など


slider.パブリックメソッド

という書き方でスライダーを操作することができます。

 

 

おまけ

上記の書き方だとサムネイルの数だけ


$('.thumb li.thumb01 a').click(function(){
   slider.goToSlide(0);
   return false;
 });

を書かないといけないのですが「each」を使うとサムネイルの数がいくつでも対応できるようになります。

 

JS（eachサムネイルの数だけ書かなくてもいい書き方）


$(function(){

    var slider = $('.slider').bxSlider({
        slideWidth:200
    });

    //サムネイルをクリック
    $('.thumb li a').each(function( i ){
        $(this).click(function(){
            slider.goToSlide( i );
            return false;
        });
    });

});

 

スライダーがページ内に複数ある場合

スライダーがページ内に複数あるということもクライアントワークではよくあります。
複数ある場合はそれぞれスライダーとして実行したオブジェクトを別々の変数に入れるだけです。

 

サンプル

http://jsdo.it/Masaki.Nakamura/nlkP

 

HTML


<ul class="slider">
    <li><img src="http://jsrun.it/assets/3/Z/P/7/3ZP7k.jpg"></li>
    <li><img src="http://jsrun.it/assets/x/M/Z/Z/xMZZz.png"></li>
    <li><img src="http://jsrun.it/assets/9/K/q/Y/9KqYE.jpg"></li>
</ul>

<ul class="slider2">
    <li><img src="http://jsrun.it/assets/3/Z/P/7/3ZP7k.jpg"></li>
    <li><img src="http://jsrun.it/assets/x/M/Z/Z/xMZZz.png"></li>
    <li><img src="http://jsrun.it/assets/9/K/q/Y/9KqYE.jpg"></li>
</ul>

<br><br>

<p>
    <a href="#" class="click">スライド1の2番目のスライドへ移動</a><br>
    <a href="#" class="click2">スライド2の2番目のスライドへ移動</a>
</p>

JS


$(function(){

    var slider = $('.slider').bxSlider({
        slideWidth:200
    });

    var slider2 = $('.slider2').bxSlider({
        slideWidth:200
    });

    //テキストリンクをクリック
    $('a.click').click(function(){
        slider.goToSlide(1);

        return false;
    });

    $('a.click2').click(function(){
        slider2.goToSlide(1);

        return false;
    });

});

 

ライトボックスを作る続編

今回も後半はライトボックス作りです。
第1回イベントで作った簡易ライトボックスには以下の課題が残されているためさらに作りこんでいきます。

  1. 画像の読み込みが完了してから表示させる。
  2. 画像読み込み中はローディングバーなどを表示する。
  3. 画像の幅と高さを調べて中央へ表示。
  4. 画像がウィンドウよりも大きい場合はウィンドウからはみ出さないようにする。
  5. 画像以外の部分（.modal）をクリックしたら画像を閉じる。
  6. jQueryプラグイン化

 

今回は

  • 画像の幅と高さを調べて中央へ表示
  • 画像の読み込みが完了してから表示
  • 画像がウィンドウよりも大きい場合はウィンドウからはみ出さないようにする。

の3つにチャレンジしました。

 

できあがったコードはこちら

http://jsdo.it/Masaki.Nakamura/gPSg

 

詳しい解説は上記のコード内に書いてるので見てみてください。

 

重要ポイント

  • 画像をブラウザの中央に表示させるには、表示させる画像の幅と高さを調べる必要がある。
  • 画像が読み込まれていないと画像の幅と高さは取得できない。

 

残った課題

  • 画像の比率を考慮できていない（ヨコ長やタテ長の画像の場合、表示した画像の比率が変わってしまっている）

画像の比率が変わってしまいタテ長になってしまった。。

画像の比率が変わってしまいタテ長になってしまった。。

 

 

次回は画像の比率も保ったままブラウザの中央へ表示させる方法を学びまっす！

 

 

TERAKOYA中の風景

 

TERAKOYA中の風景

TERAKOYA中の風景

TERAKOYA中の風景

TERAKOYA中の風景

TERAKOYA中の風景

 

 

焼き鳥屋で打ち上がっている風景

 

焼き鳥屋で打ち上がっている風景

焼き鳥屋で打ち上がっている風景

焼き鳥屋で打ち上がっている風景