LoginSignup
1
0

More than 5 years have passed since last update.

【JQuery】Swipeboxにおけるajax追加読み込み要素へのスライドショー効果適用

Last updated at Posted at 2016-07-14

自分用のメモ書き程度なので参考程度でお願いします。
後で加筆するかもしれません。

非常に便利なSwipebox。

<a href="###" class="swipebox" rel="gallery"></a>
クリックした画像で指定されたURLをモーダルウィンドウで開き、
relで指定したものをスライドショーにしてページ内で遷移することが出来る。

AJAXで追加読み込みした要素に効いてない

こちらを例えばWORDPRESSの記事一覧(画像サムネイルが記事に該当)ページ内で、
「MORE」ボタンをクリックするとajaxローディングで新しい要素(記事)が読み込まれた場合、
それらの要素はスライドショー内に入らず、指定URLの画像も表示されないといったトラブルがあった。
使用ライブラリとバージョンは下記の通り。


jquery-2.2.4.min.js
Swipebox v1.3.0.2


解決策

とりあえず、Swipeboxの現最新バージョン v1.4.4 を組み込んでみた。
それでも動かねえじゃねーかコノヤロウ。定番としてイベントをバインドするための記述に問題があるんじゃないかと見て、「jquery.swipebox.js」の299行目付近を修正で稼動した。
公式ではJQueryのバージョンは2.0.3を薦めているのにbindなのか・・・

$( 'body' ).bind( 'touchstart', function( event ) {

$( 'body' ).on( 'touchstart', function( event ) {

使用ライブラリとバージョンは下記の通り。


jquery-2.2.4.min.js
Swipebox v1.4.4


1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0