<link href="../../css/reset.css" rel="stylesheet" type="text/css"> <link href="../../css/style.css" rel="stylesheet" type="text/css"> <link href="../../css/jquery.fancybox.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="../../js/jquery.fancybox.js"></script> <script type="text/javascript" src="../../js/jquery.loupe.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".group").fancybox({ helpers: { width: '200px', title: { type: 'float' } }, afterShow: function () { //$('#single_1').loupe(); $('.fancybox-image').loupe({ width: 100, // width of magnifier height: 100, // height of magnifier loupe: 'loupe' // }); } }); }); </script>
<ul id="works_flexbox"> <li><a class="group" data-fancybox="group" href ="../../img/2015_present/2017_01.jpg"> <img src="../../img/2015_present/2017_01r.jpg" width="640" height="640" alt=""/> </a></li> <li> <a class="group" data-fancybox="group" href ="../../img/2015_present/2015_10.jpg"> <img src="../../img/2015_present/2015_10r.jpg" width="640" height="640" alt=""/> </a></li> <li> <a class="group" data-fancybox="group" href ="../../img/2015_present/2015_09.jpg"> <img src="../../img/2015_present/2015_09r.jpg" width="640" height="640" alt=""/> </a></li> </ul>
以前コチラで質問させて頂いた内容の続きなのですが→https://teratail.com/questions/82485
以前の質問ではfancybox2を使用し、上手く制御出来ていましたがfancybox3を使用した時はどうだろうと思いやってみた所、一応loupeもfancybox3も動いている事には動いているんですが、画像をクリックし、ポップアップさせた際にポップアップ画像に邪魔をされてloupeが機能してくれません。ポップアップした画像の下の方でチラチラとloupeが動いている部分は
コード
fancybox2では、.fancybox-imageを指定して動作していましたが、fancybox3では.fancybox-imageへの指定とは違うクラスを指定しないといけないでしょうか? ご回答宜しくお願い致します。
あなたの回答
tips
プレビュー