質問編集履歴
2
説明を追記、改善しました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Wordpressでフォトギャラリーを作っていますが、拡大表示
|
|
1
|
+
Wordpressでフォトギャラリーを作っていますが、写真を拡大表示するためのJSが動きません
|
test
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
### 前提
|
|
2
2
|
現在静的なサイトに、一部、photoギャラリーをWordpressでつくっています。
|
|
3
3
|
|
|
4
|
+
フォトギャラリーをattachmentを取得して一覧で表示させCSSで並べるところまでは行きました。
|
|
5
|
+
|
|
6
|
+
その写真を、下記のJSを使って、クリックすると拡大表示されるようにしたいです。
|
|
4
7
|
[https://webcat.work/modal/](https://webcat.work/modal/)
|
|
5
8
|
こちらを使用させて頂いております。
|
|
9
|
+
jQueryの読み込みコードの後で、ダウンロードした「shinomodal.js」を読み込ませるものです。
|
|
6
10
|
|
|
7
11
|
front-page.php↓
|
|
8
12
|
このように、メディアに追加した画像が、一覧になるようにしています。
|
1
件名の変更、やってみたことを追記しました
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Wordpressでフォトギャラリーを作っていますが、拡大表示したくて入れたjQueryが動きません
|
test
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
### 前提
|
|
2
|
-
現在静的なサイトに一部、photoギャラリーをWordpressでつくっています。
|
|
2
|
+
現在静的なサイトに、一部、photoギャラリーをWordpressでつくっています。
|
|
3
3
|
|
|
4
4
|
[https://webcat.work/modal/](https://webcat.work/modal/)
|
|
5
5
|
こちらを使用させて頂いております。
|
|
@@ -39,6 +39,13 @@
|
|
|
39
39
|
同じ階層にいれています。
|
|
40
40
|
|
|
41
41
|
|
|
42
|
+
[https://webcat.work/modal/](https://webcat.work/modal/)からダウンロードしたJSがこちらです。
|
|
43
|
+
↓
|
|
44
|
+
ここの$を「jQuery」に直してみたりもしましたが、やはり上手くいきませんでした。
|
|
45
|
+
```JS
|
|
46
|
+
$("body").prepend('<div class="shinomodal_modal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index:9999; display: none;"><div class="shinomodal_bigimg" style="position: absolute; width: 80%; max-width: 600px; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);"><img src="" style="width:100%"><a href="" class="shinomodal_btn" style="color: #fff;font-size: 28px; position: absolute; right: 0px; top: -38px;text-decoration: none;">✖</a></div></div>');$(".shinomodal_baseimg").click(function(){var b=$(this).attr("src");$(".shinomodal_bigimg").children().attr("src",b);$(".shinomodal_modal").fadeIn();$("body,html").css("overflow-y","hidden");return false});$(".shinomodal_btn").click(function(){$(".shinomodal_modal").fadeOut();$("body,html").css("overflow-y","visible");return false});
|
|
47
|
+
```
|
|
48
|
+
|
|
42
49
|
functions.phpは、いじっていません。
|
|
43
50
|
|
|
44
51
|
何かアドバイス頂けましたら幸いです。
|