FLEXSLIDER2の実装 jQuery Mobile でスライドショーをやってみる 

FLEXSLIDER2の実装 jQuery Mobile でスライドショーをやってみる 

PHP FrameworkのKohanaとjQuery Mobileを使ったPETiTPOWER BOOKS(まだ、発展途上)でスライドショーを実現したいと思うことはや3ヶ月。

いろいろと検索してみて探しまくってはトライ&エラーを繰り返し、できそうでできないとしばし放置状態だったんですが、ひさびさにグーグル先生にお願いしたところ↓のサイトが見つかりました。

参考サイト:12個のかっこいいjQueryスライドショープラグインまとめ

jQuery Mobileもベースは、jQueryだし行けるかも・・しかも12個も紹介されてるし1個ぐらいは大丈夫だろうってことでトライ。

まずは、簡単そうでかつ望んでるタイプのjQuery Sliderを試してみる。

結果:なんかJSエラーが出る。 ちなみにその時に利用していたのは、jQuery 1.7.1 jQuery Mobile 1.1.0だったはず。

じゃ、次ってことで選んだのは、A Simple jQuery Slideshow

なんかよくわからんってことで、挫折。そして、最後に選んだのがFLEXSILDER
実際には、今だとFLEXSILDER2になっていますが・・基本的な使い方は変わってない模様。

jQuery Mobile スライドショーの実例
jQuery Mobile スライドショーの実例


このFLEXSILDERは、紹介サイトでは「イメージ下部にキャプチョンが入れられます」と紹介されているところがポイントです。ってか、この紹介しかないのですが、個人的には今回のスライド機能にはこのキャプションというかイメージだけじゃなくて文章も入れたかったのでこれは重要なポイントでした。上の2つもできそうだったので試したんですがなんかjQueryのバージョンとか呼び出し方とかがあるようです。
javascriptをちゃんと勉強すれば解決できたのかもですが、今回はFLEXSLIDER2で解決!!

もうあとはあまり説明するまでもなく、サイトに書いてある通りだったりDEMOに入ってるソースをみてもらえばできちゃいます。

jQuery Mobileでスライドショーをしたい!けど、どのプラグインがいいんだろうって同じようにお悩みの方にFLEXSILDER2を是非どうぞ。

また、jQuery Mobile関連やkohana関連でぶち当たったプチ・ノウハウについても引き続きぶち当たり次第にアップします。

ってか、Wordpressも結構あったかも・・WP+OpenXネタでもそのうちに。

 

プッシュ通知を
%d人のブロガーが「いいね」をつけました。