Q&A
WordPressで画像内の指定位置をクリックした場合に
画像をライトボックスで表示させるというのをゴールに試みております。
色々調べてイメージマップを使用し、コードを組みました
html
1<head> 2 <!-- jQuery本体の読み込み --> 3 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 4 <!--lightbox本体の読み込み--> 5 <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script> 6 <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet" type="text/css"> 7 <!--レスポンシブ対応の読み込み--> 8 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 9 <script src="js/jquery.rwdImageMaps.js"></script> 10</head> 11<body> 12 <div class="asbestos_box"> 13 <img src="メイン画像URL" usemap="#ImageMap" alt="メイン画像" /> 14 <map name="ImageMap"> 15 <area shape="rect" coords="画像1に対しての指定座標" href="画像URL" alt="画像1" data-lightbox="group"/> 16 <area shape="rect" coords="画像2に対しての指定座標" href="画像URL" alt="画像2" data-lightbox="group"/> 17 <area shape="rect" coords="画像3に対しての指定座標" href="画像URL" alt="画像3" data-lightbox="group"/> 18 </map> 19 </div> 20 <script> 21 jQuery( 'img[usemap]' ).rwdImageMaps(); 22 23 $(function(){ 24 $('.image_list li').onclick(function(){ 25 //マウスクリックした画像のliのインデックスを取得 26 var index = $('.asbestos_box').index(this); 27 //マウスクリックした画像URLを取得 28 var imageurl = $('.asbestos_box').eq(index).find('img').attr('src'); 29 //ulのクラス名を取得し 30 className = $(this).parent().attr('class').split(" "); 31 } 32 }); 33 </script> 34 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 35 <script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script> 36 <script> 37 $(function(){ 38 $('img[usemap]').rwdImageMaps(); 39 }); 40 </script> 41</body>
画像〇に対しての指定座標にて記載した位置は
ウィンドウを最大化にして座標を取得した位置を記載してあります。
最大化した際には正しい位置が認識されているのですが
ウィンドウサイズを縮小すると座標がズレてしまいます。
それに対して調べると「レスポンシブイメージ機能が働いているかも」と出てきたので
上記のコードにはjQueryRWDimageMaps(</body>直前のscript)も試した状態になっております。
しかし、現状ズレが解消できておらず、わからない状態となっております。
分かる方がいらっしゃいましたら教えてください
使用環境/スペック
Windows10 home 64bit
GoogleChrome 64bit ver.78.0.3904.108
WordPress5.3
回答1件
0
ベストアンサー
HTML
1<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 2<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script> 3<script> 4 jQuery( 'img[usemap]' ).rwdImageMaps(); 5 6 $(function(){ 7 $('.image_list li').onclick(function(){ 8 //マウスクリックした画像のliのインデックスを取得 9 var index = $('.asbestos_box').index(this); 10 //マウスクリックした画像URLを取得 11 var imageurl = $('.asbestos_box').eq(index).find('img').attr('src'); 12 //ulのクラス名を取得し 13 className = $(this).parent().attr('class').split(" "); 14 } 15 }); 16 </script> 17<script> 18 $(function(){ 19 $('img[usemap]').rwdImageMaps(); 20 }); 21 </script>
こうしたらどうですか？
投稿2019/12/11 08:08
編集2019/12/11 08:10
総合スコア1857
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/11 08:40
2019/12/11 08:43