jquery slickとphotoswipeを連携する

javascript

前記事
jquery bxsliderとphotoswipeを連携する - 技術ブログ

bxsliderの挙動がスマホだといまいち(スワイプ中にスクロールしてしまう等)だったのでslickに変更。

http://kenwheeler.github.io/slick/
slick
http://photoswipe.com/
photoswipe

slickで画像をスライド表示させ、画像クリック時にphotoswipeで拡大表示させたい場合の話。
slickもliで画像を並べたい場合、bxsliderと同じように「FIGURE」を「li」に変更する。さらにslickで「dots:true」にするとドットをクリックした時にエラーが出るのでliに適当なクラスを指定して条件に追加する。

変更前 js

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

変更後 js

var clickedListItem = closest(eTarget, function(el) {
  return (el.tagName && el.tagName.toUpperCase() === 'LI' && el.className && el.className.indexOf('img-li') != -1);
});

html

<ul class="item-img my-gallery">
 <li class="img-li"><a href="large1.jpg" data-size="1024x1024"><img src="small1.jpg" /></a></li>
 <li class="img-li"><a href="large2.jpg" data-size="1024x1024"><img src="small2.jpg" /></a></li>
</ul>

もう一個やっかいなのが、slickはliタグの前後に余計なcloneタグを作ってしまい、photoswipeがそれも拾ってしまって表示した時にカウンターとスライドがおかしくなるため、slickのオプションに「infinite: false」を指定すること。(ただしこれを指定するとslickのループが無効になる)

$('.item-img').slick({
  infinite: false,
  dots:true
});

あっちが立てばこっちが立たない。汎用的なライブラリだとそんなんばっかり。妥協したくなければ結局自分で作るしかないってことだわ。

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