画像の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の４つですが、実際に使用しているのは２つです
参考サイト１：https://wemo.tech/1169
参考サイト２：https://on-ze.com/archives/5669