div要素をfancyboxで表示させたい

表題の通りですが、ポップアップが表示されず苦戦しており、ご教授いただけましたらと思います。

php
1
2<a href="#post-<?php the_ID(); ?>"  class="fancy"><img src="<?php echo $img; ?>" alt=""></a>
3<p><?php the_title(); ?></p>
4
5〜中略〜
6
7<!--START_fancybox-->
8<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
9<?php $img = get_field('voice_img'); $text = get_field('voice_text'); ?>
10<div id="post-<?php the_ID(); ?>" class="voice_fancy">
11<p class="voice_fancy_img"><img src="<?php echo $img; ?>" alt=""></p>
12<p class="voice_fancy_text"><?php echo $text; ?></p>
13</div>
14<?php endwhile; ?>
15<!--END_fancybox-->

css
1.voice_fancy{
2	display: none;
3	height:550px;
4	overflow:scroll;
5}

Javascript
1<script src="<?php echo get_template_directory_uri(); ?>/shared/js/jquery-1.8.1.min.js"></script>
2<script src="<?php echo get_template_directory_uri(); ?>/shared/js/jquery.fancybox.js"></script>
3<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/shared/css/jquery.fancybox.css" type="text/css" media="screen" />
4<script>
5jQuery(function($){
6  $(".fancy").fancybox();  
7});
8</script>

プラグインは読み込んでいるようで、div要素に対してfancyboxを設定するとき何をすればいいのかわからず困っています、初歩的な質問で申し訳ありませんがよろしくおねがいします。

x_x

2018/09/14 04:35

バージョンはいくつですか？

maru_mkp

2018/09/14 05:02

Version: 1.3.4 になります。

行動規範の内容に同意します

回答2件

ベストアンサー

表示させたいdivをdisplay: none;してしまってるのが原因でしょうか…
fancybox公式のコードと質問に提示のコードを組み合わせ、下記の記述で動作することを確認しました。
jQueryのバージョンは公式に合わせてあります。
画像はダミー、phpは適当な文字で置き換え済。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
6  <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
7  <link rel="stylesheet" href="./fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
8  <script>
9    jQuery(function($){
10      $(".fancy").fancybox();  
11    });
12  </script>
13  <style>
14    .voice_fancy{
15        width:300px;
16        height:300px;
17    }
18  </style>
19</head>
20<body>
21  <a href="#post-1" class="fancy"><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=1" alt=""></a>
22  <p>title</p>
23  <a href="#post-2" class="fancy"><img src="http://placehold.jp/85b38b/ffffff/150x150.png?text=2" alt=""></a>
24  <p>title</p>
25
26  <!--START_fancybox-->
27  <div style="display:none;">
28    <div id="post-1" class="voice_fancy">
29      <p class="voice_fancy_img"><img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=1" alt=""></p>
30      <p class="voice_fancy_text">txt1</p>
31    </div>
32  </div>
33  <div style="display:none;">
34    <div id="post-2" class="voice_fancy">
35      <p class="voice_fancy_img"><img src="http://placehold.jp/85b38b/ffffff/150x150.png?text=2" alt=""></p>
36      <p class="voice_fancy_text">txt2</p>
37    </div>
38  </div>
39  <!--END_fancybox-->
40</body>
41</html>

投稿2018/09/14 05:09

dit.

総合スコア3235

maru_mkp

2018/09/14 06:13

ありがとうございます、無事表示されました！；＿； display:noneに気づいて修正まではたどり着いていたのですが相も変わらず表示されなかったのですが、jQueryのバージョンと読み込みファイルを公式に合わせたところ上手くいったようです。感謝いたします。

行動規範の内容に同意します

~~$(".fancy").fancybox(); と書いているのに .fancy に当たる要素が無いですね。~~
~~また、画像以外（Inline content）を使うときの書き方が公式の物と違うようですが、別の Fancybox があるのでしょうか。~~

【Fancybox - Fancy jQuery lightbox alternative| How to use】
http://fancybox.net/howto

追記：

WordPressはjQueryを読み込まなくてもデフォルトで読み込むはずなので、それはそれに任せて、Fancybox とその呼び出しコードをwp_enqueue_scriptで登録するようにしてみてはいかがでしょうか。

【自作のJavaScriptをWordPressで利用する方法 | アフィリエイトで稼ぐ方法を全部話そうと思う】
https://affiliate150.com/function-javascript

【WordPressでJavaScriptを読み込ませるならこうすると便利です(2018年)】
https://qiita.com/yousan/items/f967f4e8e1e7f912be8a

投稿2018/09/14 03:53

編集2018/09/14 05:35

kei344

総合スコア69643

maru_mkp

2018/09/14 04:06

.fancyの要素ですが1つ目のｐｈｐ内一行目に<a href="#post-<?php the_ID(); ?>" class="fancy"><img src="<?php echo $img; ?>" alt=""></a>　と記述しこの要素がクリックされたときにfancyboxを表示、という設定をしているつもりなのですが、誤りでしょうか？公式のものも再度確認しました、display;noneの記述場所が不味いのかと思い <div class="voice_fancy"> <div id="post-<?php the_ID(); ?>" class="voice_fancy_content"> <p class="voice_fancy_img"><img src="<?php echo $img; ?>" alt=""></p> <p class="voice_fancy_text"><?php echo $text; ?></p> </div> </div> との記述に変更しましたが相変わらず動かず・・・といった感じです。