jQuery.flexslider.jsでLoad時のリスト幅が「100px」になってしまう問題

jQueryMobileで追加したDOMにFlexSliderを適用したときに、イメージの入っている<li>の幅が勝手に「100px」になっている件。

どうやら「100%（デバイスの幅）」にしておくと、勝手に「100px」になるようなのですが、どこにも解決策が出ていない。


実は、同じような問題を指摘した人がいたけど、それに対する作者の回答がひでえ。
▼▼
https://github.com/woothemes/FlexSlider/issues/20

内容はこんな感じ。

質問：

“I am noticing on first load the slides are -100px off (not the -100 on the UL):
any ideas on how I can fix this? 
change the value to 0 in the web inspector fixes it...”

私がスライダーをロードすると（<li>タグが）初期状態で100pxになってます。
（もちろん<ul>タグに100pxは設定していないです）
なにかこの現象を解決する方法はありますか？


作者の回答：

“Sounds like a CSS issue, rather than something on the plugin end of things.”

むしろそれはプラグイン側の問題じゃなくてCSSの問題って感じ。

“Closing this issue because it is not related to the plugin itself.”

それはプラグイン自体には関係ないから、このスレを閉じるんで( ﾟдﾟ)ﾉ ﾖﾛ。

うーん…この作者ときたらwww

以前に、スライドショーがポーズ状態のままになってしまうという問題に対処した時もそうだけど（この記事のコメント欄）、この作者、親切設計だけどサポートはメンドクセェってタイプの人だね。


という訳で、「start: function(){}」オプションを使って自分で正しいサイズを適用することにしました。

$( '#page' ).live( 'pageinit',function(event){
  //スライダー始動
	$('.panels_slider').flexslider({
	animation: "slide",
	slideshow: true,
	slideshowSpeed: 4000,
	directionNav: false,
	controlNav: true, 
	animationLoop: true,
	slideToStart: 1,
	animationDuration: 300, 
	});
	$(".flex-control-nav").css({"top":"110px"});
});

▼▼修正後▼▼

$( '#page' ).live( 'pageshow',function(event){

    var img_width = $('ul.slides').width();
    
    //Slider始動
	$('.panels_slider').flexslider({
	animation: "slide",
	slideshow: true,
	slideshowSpeed: 4000,
	directionNav: false,
	controlNav: true, 
	animationLoop: true,
	slideToStart: 1,
	animationDuration: 300,
	start: function(){
	    $('ul.slides li').css({"width":img_width});
	    $(".flex-control-nav").css({"top":"110px"});
	}
	});

 });

要は、DOM取得とページ構築…さらにスライダーの始動のタイミングの問題だということです。

$( '#page' ).live( 'タイミング',function(event){}

の設定が悪かった…と。

「pageinit」（DOM読み込み完了）じゃなくて「pageshow」（追加DOM表示完了）のタイミングで「ul.slides」の幅（スライダーの表示幅）を取得して、「start: function(){}」オプションで適用するってコードに変更したわけです。

結果は…思ったとおり上手くいきました。

一応、これ覚えておいたほうがいいかもなので、メモ。

$( '#page' ).live( 'pagebeforehide',function(event){}
ページ遷移前に遷移元のページ上で発生

$( '#page' ).live( 'pagebeforeshow',function(event){}
ページ遷移前に遷移先のページ上で発生

$( '#page' ).live( 'ページ遷移の完了後に遷移元のページ上で発生',function(event){}
ページ遷移前に遷移元のページ上で発生

$( '#page' ).live( 'pageshow',function(event){}
ページ遷移の完了後に遷移先のページ上で発生

jQueryMobileを使ってAjaxでDOMを追加するとこういう問題にぶち当たるので、Ajaxを無効にする人が多いんだろうな…多分。


対処法は「そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか」あたりを読んでみるといいのかもです。