画像のJQueryによる拡大機能が動作せず・・・(テーマCocoonに変更したためこの投稿は現在修正予定です)この拡大機能はCocoonの機能で動作しています!
色々と機能を拡大したり、CSSに状況に応じた処理を入れたりしていたら、画像の拡大機能がおかしくなった
そこで、今回拡大機能の見直しを行った。・・・その結果、・・・拡大機能が正常になった・・・!!!
サンプルは下記
ウィジェットに次のコードを追記し、必要なファイルをサーバーにアップロードする
<link rel="stylesheet" href="https://east19-mikas.com/cakejs/luminous/luminous-basic.min.css"> <script src="https://east19-mikas.com/cakejs/luminous/Luminous.min.js"></script> <script> var options = { //標準オプションの指定 } var luminousTrigger = document.querySelectorAll('.zoom-in'); for (var i = 0; i < luminousTrigger.length; i++) { var elem = luminousTrigger[i]; new Luminous(elem, options); } </script> <style> .lum-lightbox{ z-index: 999; } </style>
参考サイトで、最後の方に有った記述の<style></style>部が無いと、拡大した画像が最前面にならないので注意が必要です。
追加したファイルは・・・
Luminous.js Luminous.min.js luminous-basic.css luminous-basic.min.cssの4つですが、実際に使用しているのは2つです
参考サイト1:https://wemo.tech/1169
参考サイト2:https://on-ze.com/archives/5669