Q&A
前提・実現したいこと
こちらのMagnific Popupというライブラリを使って、
画像表示を試みているのですが、クリック後に表示されるギャラリーの画像において、背景が黒色になり、
黒色のため、閉じるボタンや両矢印の切り替えボタンが表示されているかどうかもわかりません。
提示したリンク先のサンプルのように、クリック後の画像表示において、背景を半透明にするには
どういった実装をすればよいでしょうか？
ご教示よろしくお願いいたします。
試したこと
以下のようなディレクトリ構造でファイルを用意しました。
・js/jquery.magnific-popup.min.js ・js/jquery-3.6.0.min.js ・css/magnific-popup.css ・img/image1.jpg ・img/image2.jpg ・img/image3.jpg ・img/image4.jpg ・img/image5.jpg ・index.html
index.htmlを以下のように実装しました。
HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/magnific-popup.css"> 7 <script src="js/jquery.magnific-popup.min.js"></script> 8 <script src="js/jquery-3.6.0.min.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 $('parent-container').magnificPopup({ 12 type: 'image', 13 closeOnContentClick: true, 14 }); 15 }); 16 </script> 17</head> 18<body> 19 <div class="parent-container"> 20 <a href="img/image1.jpg">Open popup 1</a> 21 <a href="img/image2.jpg">Open popup 2</a> 22 <a href="img/image3.jpg">Open popup 3</a> 23 </div> 24</body> 25</html>
リンクをクリックすると、画像が中央に表示されるのですが、背景が黒色となってしまいます。
element.style { margin: 0px; background: #0e0e0e; height: 100%; }
デベロッパーツールで背景の要素を確認すると上記が効いているみたいです。
magnific-popup.cssでは、以下のような設定が書かれていたので、
おそらくopacity: 0.8で透明になるように設定されているではないかと思うのですが、
効いている様子はありません。
しかし、クリック処理で画像を表示した際に、画像が中央に表示されることなどから、
magnific-popup.css自体は効いているのではないかと考えています。
.mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; }
下記のようにdisplayをblockに設定してみても、背景画像は黒いままでした。
<a href="img/image1.jpg" style="display: block;">Open popup 1</a>
また、クリックするものを画像に変えてみても、背景画像は黒いままです。
<a href="img/image1.jpg"><img src="img/image1.jpg"></a>
ご教示お願いします。
補足情報（FW/ツールのバージョンなど）
Chromeで検証
回答1件
0
ベストアンサー
その読み込み順だとそもそもエラー出てるのでは？
jQuery先に読み込ませないと参照できないはずです。
あと、直接の問題点としてはセレクタの指定方法間違ってます。
$('parent-container')
クラスを指定したいなら
$('**.**parent-container')
投稿2021/09/27 21:44
総合スコア80875
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/28 07:55
2021/09/28 09:14