2023-08-08(Tue)追記: 役目を終えたので配布を終了しました。
リニューアル前の「はりぼてミュージアム」ではアルバムジャケットの拡大表示にThickBoxを使っていたのですが、これはjQuery Mobileとの共存が考慮されておらず組みこんでみたところ使えませんでした。かなり古いライブラリなのでしかたがありません。
Webを検索して「jQuery Mobileを使った、タップで拡大するシンプルなイメージギャラリーを構築する際のサンプルコード」などを参考にして自作しましたが、せっかくだからとjQueryプラグイン化したので公開することにします。次のURLからZIPファイルをダウンロードできます。
https://www.dbc-works.org/feedback/resource/jqm/jquery.eastimageslide.201304.zip
使いかたは簡単です(デモとそのソースもご覧ください)。
- ZIPファイルに同梱したHTMLから末尾のsection要素(data-role属性に“dialog”が指定してあるもの)をコピーしてください。IDやテーマなどは自由に変えてもらってかまいません。
- スライドの対象とするイメージをa要素でマークアップしてください。こんな感じ:
<a href="#ImageDialog" data-transition="pop" data-rel="dialog"> <img src="slideimage1.jpg" alt="" title="説明" width="240" height="240" border="0" /> </a> <a href="#ImageDialog" data-transition="pop" data-rel="dialog"> <img src="slideimage2.jpg" alt="" title="説明" width="240" height="240" border="0" /></a>
- mobileinitイベントでコピーしたsection要素に対しeasyimageslideメソッドを呼びだしてください。こんな感じ:
$('#ImageDialog').easyimageslide({ target: 'img' });引数の'target'は対象とするイメージを絞りこむjQueryセレクタです。
イメージの前後関係は同一の要素の子要素かで判定しています。そのためa要素が並ぶ必要はありません。
ThickBoxとくらべるとささやかな機能しかありませんが、その分構造もシンプルなので、適当にカスタマイズして使ってもらえればと思います。