便利なjQueryのスライダープラグイン FlexsliderでAjaxで要素を追加 - 名古屋でホームページ制作、ECサイト制作なら花のや 名古屋のホームページ制作、web制作会社 花のや

複数の画像をカルーセル表示したりスライダー表示したりするプラグインは多くあります。

弊社での必要な機能の多くはスライダー＋カルーセル同期となるのですが
これが意外に少なく、設定も面倒だったりクロスブラウザでの表示やライセンス的に難があったりと様々です

• galleria
• carouFledSel
• flexSlider

などなどありますが、今回はflexSliderについて少々。

【flexslider】 http://www.woothemes.com/flexslider/

なぜ、flexSliderなのか？

色々と理由はありますが、まず、上に挙げた理由の

• 設定が比較的楽
• クロスブラウザでの検証で比較的優秀

この2点がまず挙げられます。

設定については案件毎に差があり、大変な部分もありますが、とかくjavascriptでのスライダーの設定は

1. 挙動の設定（javascript）
2. 要素の設定(HTMLのマークアップ）
3. 表示の設定（CSS）

と結構大変で、設定する内容が簡単であればあるほどブラウザ毎の違いに悩まされたり
不具合が出たりという面倒な部分が少なくて済みます。

また、flexSliderの売りとしての

• レスポンシブ対応
• スマートフォンなどのタッチ、スワイプ対応

というのも、なかなかに嬉しいおまけです。

ajaxにする理由

次になぜajaxにしなければいけないのか？という理由ですが、ここ数年でスマートフォンや
タブレットなどのデバイスが普及し、それに伴う通信環境の多様化という点が挙げられます。

今までの非同期通信の利点といえば、画面全体を書き換える遷移のわずらわしさの解消がおそらく一番に挙げられるでしょう。

今までであればPC、フューチャーフォンの2つを考えておけばよく、PCであれば通信速度はほとんど気にしなくても問題ないレベルのインフラ整備がなされておりました。
フューチャーフォンであれば性能上の問題でPCと同じ表示をすること自体無理があったため
専用のテキストベースのコンテンツを作成して対応しておりました。

しかし、スマートフォンなどの普及により、「表示」や「スペック」の壁が取り外され同時に通信速度もどんどん上がってきました。
ですが、無駄にトラフィックを増やすことはまだまだ時期尚早と言えます。
特にスライダーの場合は画像の大きさにもよりますが1枚1MB近くになる場合もありますので

必要な物は必要な時に！

ということでajaxです。

まずはどのように作るのか

最初にどのような動作をさせるのか、そのためにはどういうデータをどういう形で用意するべきか
という部分になります。
wordpressを絡めたものでしたので、最初に必要になると思われる記事のIDを配列としてjavascriptに渡します

var post_list = new Array(<?php
	$post_list = array();
	$first = true;
	if(have_posts()): while(have_posts()): the_post();
		if($first){
			$first = false;
			continue;
		}
		array_push($post_list,get_the_ID());
	endwhile;endif;
	echo implode(',',$post_list);
?>);
 
このように今後必要になる記事IDをjavascriptでもっておいて、

javascriptのギャラリー用IDの配列作成
次へ（前へ）のボタンを押した時にflexsliderに要素を追加
要素を追加したら追加に使用したIDを削除
YATTA!

という感じです。延々と追加するのでも動作的には問題ないのですが、今度はブラウザ側での

負荷が大きくなっていくので横着しないでおきました。
さて、次に要素を追加するタイミングです。

発火タイミングはFlexSliderに色々と用意されているので最初は安易に「次へ（前へ）ボタンをおした時でいいか」と思っていましたが、実際にやってみると罠だらけでした。

以下にハマった部分を羅列します。
1つしか画像がない状態だとそもそも「次へ（前へ）ボタン」が出ない！！！
startというタイミングでまず最初に1つ余分に読み込ませようにして対応しました。

親切設計が仇になった感じですね。
ボタンをおした時に追加してやればいいかと思ったら動かない！！！
before（「次へ（前へ）ボタン」を押して動作する前のイベント）を使用したらうまいこと動きませんでした。

after（「次へ（前へ）ボタン」を押して動作した後のイベント）に変更することで対応しました。

いわゆる先読みのような感じです。
連続で「次へ（前へ）ボタン」を押すと止まる！！！
これはもうタイミングとかそういう問題です。このあたりはブラウザによっても変わってくると思いますが

無理矢理の対応としてbeforeイベントでボタンを非表示、afterで要素を追加した後にボタンを表示

という形で対応しました。
このように迂余曲折ありながらの実装とあいなりました。

実際のコードは以下のようになっております。
	$('#mainslide').flexslider({
		animation: "slide",
		controlNav: false,
		prevText: "",
		nextText: "",
		slideshow:false,
		start: function(slider){
			if(post_list.length){
				$.get('/get_gallery_post.php',{i:post_list[0]}, function(data) {
					slider.addSlide(data);
					post_list.shift();
				});
			}
		},
		before: function(slider){
			$('#mainslide .flex-prev,#mainslide .flex-next').closest('li').css({display:'none'});
		},
		after: function(slider){
			if(post_list.length){
				$.get('/get_gallery_post.php',{i:post_list[0]}, function(data) {
					slider.addSlide(data);
					post_list.shift();
					$('#mainslide .flex-prev,#mainslide .flex-next').closest('li').css({display:'block'});
				});
			}else{
				$('#mainslide .flex-prev,#mainslide .flex-next').closest('li').css({display:'block'});
			}
		}
	});

 



Line1～6
通常通りのスライダーの設定です。mainslideというid要素に設置しました。


Line7～14
ここで最初に表示した時に一つ画像を余分に先読みします。一つしかないときの処理も忘れずに。


Line15～17
ここはボタンを連続で押された時に止まるのを防ぐため

ボタンを押した直後にボタン自体を非表示にしています。


Line18～28

ここで要素を追加します。

最初に、まだ、追加するべき要素があるかの判定をします。
・追加するべき要素がある場合

　追加するHTMLタグを書き出すプログラムにIDとともにわたします。

　帰ってきた値を「addSlide」というメソッドに渡して要素を追加します。

　（帰ってきた情報が有効かどうかの処理が入ってなかった）

　javascriptで持っているIDの配列から追加したidの要素を削除

　消しておいた「次へ（前へ）ボタン」を表示
・追加するべき要素がない場合

消しておいた「次へ（前へ）ボタン」を表示



大雑把ですが上記のような動きをさせる形になりました。
で、最終的に出来たものがこちら
【西尾石油店】 http://www.nishio-ss.com
まだまだベストプラクティスには程遠いと思いますが、いろんな要件を積み重ねていくことによって

より簡素に作っていけると思いますが現時点ではこのような感じになるのかと思います。