jquery bxsliderとphotoswipeを連携する

javascript

http://bxslider.com/
bxslider
http://photoswipe.com/
photoswipe

bxsliderで画像をスライド表示させ、画像クリック時にphotoswipeで拡大表示させたい場合の話。
普通に実装すれば問題無くできる。ただ注意するところとして、photoswipeはデフォルトだとfigureタグをリストさせる必要があるけど、これをliタグに変更したい場合、photoswipeの呼び出しスクリプトを以下のように変更する。

変更前

var clickedListItem = closest(eTarget, function(el) {
  return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});

変更後

var clickedListItem = closest(eTarget, function(el) {
  return (el.tagName && el.tagName.toUpperCase() === 'LI');
});

もう一つ、photoswipeでモーダル表示したときにbxsliderの左右のアイコンが浮き上がってしまうので、z-indexの値を大きくする。

photoswipe.css

/*z-index: 1500;*/
z-index: 10000;

参考サイト
jquery - How do I get Photoswipe to recognize entire gallery from list of thumbnail images - Stack Overflow

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html