Factory制作メモとか、趣味とか、雑記。2023.01.06以前から結構経った気がしたけどそうでもなかった。作例cdnのファイルと本家のコードを使いまわし。</div></body></html><head>でscriptをまとめられるのがすごくいい。4.1.1と変わったところかなり変わってる。発火元の組み方が柔軟になったし、ポップアップ用のhtmlの組み込みが必要なくなったし、jsファイルの読み込みがコード内で行われるようになった。動作に文句のつけようのないものだったけど、膨大なコードを入れなきゃいけなかったのがかなりしんどかった。ここまでスッキリしたのはとんでもない良アップデート。相変わらずシンプルなお陰でカスタマイズする必要もないレベル。複数設置する場合constでまとめてるアレなので、複製して変数名を変えて各々組めば良い。import('https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.2.2/photoswipe.esm.js')});lightbox2.init();グループを分けたいだけで動作一緒でいいならgallery部分を増やしてもいけた。import('https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.2.2/photoswipe.esm.js')});lightbox.init();というか、idじゃなくてclass指定すれば良かったりする。その他オプション公式が書いてある。PhotoSwipebgOpacityphotoswipe.comキャプションは追加したい気持ちあるけど基本的にそのままでよくない?って思っちゃったりして。作例の<a>に入ってるdata属性は必ず入れること。入れないと画面いっぱいに表示されることになる。alt=""></a>しかしいちいち手打ちするのはめんどくさい。サイズ統一ルールを作るなら良いけど、サイズがばらばらになることだって普通にあるわけで。いうことでjsで済ませてしまおうという話。v4のときにもやった。[jQuery]photoswipeの画像サイズ指定をjsで処理するちょっとした思いつき。blog.megefeps.info2021.06.30dataの組み方が変わってるのでそれに合わせていく。こんな感じであったとして。alt=""></a></li></ul>こうなる。</script>jQueryで書いてるもんだからライブラリ読ませないと動かないので注意。前回の記事と違って、<a>のリンク先の画像から取得した。すればサムネ用に小さい画像を使ってたときの対策になる。注意:20230106追記jsでdataを付ける発想は冴えてるんだけど、残念ながら安定しない。画像の読み込みが完了しないでjsが発火すると原寸サイズを拾えずに「0」になって、結果表示がバグる。試してみたんだけど、今回のようにリンクをクリックして初めて画像を読み込む場合はjs発火のタイミングが悪い。それならってことでpreloadしたり、body内にdisplay:none;で設置したりしてみたけど、初回読み込みは上手く動くんだけど、既に表示してある状態(キャッシュがある状態)で更新をかけると安定しない。今回試したのはWP上だった。以前導入したときはWPじゃなくてサムネも拡大も同一ファイルだった。そのせいか、上手くいってた。いうことで、無理っぽかったらdata属性はベタ打ちすることも視野に入れておく必要がある。WEB[ECCube2系]商品詳細ページに発送日目安を表示する方法そういえば無いんだよな。脳みそ焼ききれるかと思った。WEB[wp]セキュリティ面における脱SiteKitByGoogleの必要性と代案つらい。完璧じゃないと思うけど。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。v5を触ってみたスポンサーリンク掲載内容について内容をパクる場合は自己責任でお願いします。内容が古い場合、環境が変わって通用しないことがあります。記事の内容は最適解ではなく、作成時点においての筆者の理解の限界であることが多々あります。修正やそもそもの宗旨替えは不定期に行われるため、活用される場合はご注意ください。Highlighterがいよいよダメっぽいので、プラグインを変更しました。古い記事は表示が壊れてるものがあります。楽天Room主に釣具とか。max-age=0"),l.setRequestHeader("dlm-xhr-request","dlm_XMLHttpRequest"),l.send()}}タイトルとURLをコピーしました。