Date().getTime();if(instance.group.length<2||current.opts.wheel===!1||(current.opts.wheel==="auto"&&current.type!=="image")){return}e.preventDefault();e.stopPropagation();if(current.$slide.hasClass("fancybox-animated")){return}e=e.originalEvent||e;if(currTime-prevTime<250){return}prevTime=currTime;instance[(-e.deltaY||-e.deltaX||e.wheelDelta||-e.detail)<0?"next":"previous"]()})}})})(document,jQuery);制作メモとか、趣味とか、雑記。2021.03.16主に商品詳細ページで使う。v5を触ってみた以前から結構経った気がしたけどそうでもなかった。画像スライダーを作って、クリック時にはポップアップで拡大表示、当然レスポンシブ。いうのを作りたいってなったとき、兼ね備えたプラグインとかライブラリはそんなに探したわけでもないけど今の所見つからなくて、まあそれぞれのはあるから組み合わせて使おう的な感じに。具体的には、商品詳細ページの商品画像部分で使う。レスポンシブってところでスライダーを探すと、納得のいく動作のやつはなかなかない。swiperを使ってた時期もあったけどなんか今一つって感じで、脱jQueryを掲げる必要がないくらいにjQueryで組んでるから、動作だけで探したらslick.jsにたどり着いた。ポップアップは正直なんでも良かったんだけど、ちょいちょいいじってみたらphotoswipe.jsがいい感じだった。組み合わせて使うとちょっとめんどいんでメモを残す。crossorigin="anonymous"></script>まずは読み込む。めんどくさいからCDN。「slickスライダー作成」の前にこの記述は書いてください。//これはつけましょう。src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>photoswipe用のhtmlタグとそれぞれのoption周りとがくっそ長いことになる。管理する時にだるすぎるんで、optionは流石に別ファイルにして読ませた方がいい。optionの内容については今回本筋から逸れるので割愛。</div></div>photoswipe.jsは<figure>じゃないとダメっていうルールがあるらしいからこうなる。slick.jsは階層とclassが整っていれば済むので競合は起きない。それさえ覚えておけばなんとかなる。これはスライドとサムネ付のナビゲーションとポップアップを仕込んだ内容。optionが長くなったのはこういうわけですね。slick.jsのサムネの設定はここを参照。動作周りは以上で完了で、後は個々に応じてcssをやっていくかんじ。Factory関連記事WEB[css]全画面指定の方法と注意点iOSが悪いってことでいいんでしょうかね。WEB[eccube3]運送会社連携プラグインのエクスポート改造ちょっとしたこと。難しい話じゃないWEBお名前.comで取得したドメインをロリポップとECサービスで扱うにあたっての手引また面倒なことになってきたWEB[jQuery]data属性で管理するタブ選択ギミックで脱id地味に使える。WEB[BASE]特商法、プライバシーポリシー出力内容お問い合わせに引き続き。コメントをキャンセルメールアドレスが公開されることはありません。※サイトΔホームWEBスポンサーリンク掲載内容について内容をパクる場合は自己責任でお願いします。内容が古い場合、環境が変わって通用しないことがあります。記事の内容は最適解ではなく、作成時点においての筆者の理解の限界であることが多々あります。修正やそもそもの宗旨替えは不定期に行われるため、活用される場合はご注意ください。Highlighterがいよいよダメっぽいので、プラグインを変更しました。古い記事は表示が壊れてるものがあります。楽天Room主に釣具とか。transaction")},s.open("GET",d,!0),s.setRequestHeader("dlm-xhr-request","dlm_XMLHttpRequest"),s.send()}}タイトルとURLをコピーしました。