The image #~ couldn't be loadedとなり解決できないので助けてください????

Question

Wordpressで実装したいHPで画像をタップ（クリック）したら他のページやサイトに飛べるようにしたいのですが、The image #~ couldn't be loadedと表示され何度違うやり方でやってもできませんでした。

通常のhtml&cssのやり方だとできると思うのですが、javascriptを画像のエフェクトとして入れているのでやり方が変わるのだと思いますが、やり方がわからず詰まっています。

もし、わかる方いましたら教えいただきますと助かります。お願いします！！

###index.php

<!-- Portfolio-->
        <section class="page-section bg-dark" id="portfolio">

        <!-- Call to action-->
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                  <h2 class="text-white mt-0">ああああ</h2>
                  <hr class="divider my-4" />
                  <p class="text-white-50 mb-4">ああああ(</p>
                </div>
              </div>
              <div class="row justify-content-center">
                <div class="col-lg-4 col-sm-6">
                  <!-- hover effect 1(start) -->
                  <figure class="snip1200">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img2/sq-sample27.jpg" alt="sq-sample27" />
                    <figcaption>
                      <p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
                      <div class="heading">
                        <h2><span>Cafe</span></h2>
                      </div>
                    </figcaption>
                    <a href="#"></a>
                  </figure>
                  <!-- hover effect 1(end)-->
                </div>

###header.php

<?php
function twpp_enqueue_scripts() {
  wp_enqueue_script(
    'scripts-script',
    get_template_directory_uri() . '/js/scripts.js',
  );
  wp_enqueue_script(
    'common-script',
    get_template_directory_uri() . '/js/common.js',
    array( 'scripts-script' )
    false,
    ​true
  );
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
?>

###styles.css

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
figure.snip1200 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 310px;
width: 100%;
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
font-size: 16px;
}
figure.snip1200 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease-in-out;
transition: all 0.45s ease-in-out;
}
figure.snip1200 img {
max-width: 100%;
position: relative;
opacity: 0.9;
}
figure.snip1200 figcaption {
position: absolute;
top: 45%;
left: 7%;
right: 7%;
bottom: 45%;
border: 1px solid white;
border-width: 1px 1px 0;
}
figure.snip1200 .heading {
overflow: hidden;
-webkit-transform: translateY(50%);
transform: translateY(50%);
position: absolute;
bottom: 0;
width: 100%;
}
figure.snip1200 h2 {
display: table;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
text-transform: uppercase;
font-weight: 400;
}
figure.snip1200 h2 span {
font-weight: 800;
}
figure.snip1200 h2:before,
figure.snip1200 h2:after {
position: absolute;
display: block;
width: 1000%;
height: 1px;
content: '';
background: white;
top: 50%;
}
figure.snip1200 h2:before {
left: -1000%;
}
figure.snip1200 h2:after {
right: -1000%;
}
figure.snip1200 p {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
width: 100%;
padding: 0 20px;
margin: 0;
opacity: 0;
line-height: 1.6em;
font-size: 0.9em;
}
figure.snip1200 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.snip1200:hover img,
figure.snip1200.hover img {
opacity: 0.25;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.snip1200:hover figcaption,
figure.snip1200.hover figcaption {
top: 7%;
bottom: 7%;
}
figure.snip1200:hover p,
figure.snip1200.hover p {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}

###scripts.js -new-

(function($) {
  "use strict"; // Start of use strict

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 72)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

  // Closes responsive menu when a scroll trigger link is clicked
  $('.js-scroll-trigger').click(function() {
    $('.navbar-collapse').collapse('hide');
  });

  // Activate scrollspy to add active class to navbar items on scroll
  $('body').scrollspy({
    target: '#mainNav',
    offset: 75
  });

  // Collapse Navbar
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-scrolled");
    } else {
      $("#mainNav").removeClass("navbar-scrolled");
    }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);

  // Magnific popup calls
  $('#portfolio').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0, 1]
    },
    image: {
      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
    }
  });
})(jQuery); // End of use strict
$(".hover").mouseleave(
function () {
  $(this).removeClass("hover");
}
);
$('#test').on('click', function(e){
e.stopPropagation();
})

###scripts.js -old-

    (function($) {
  "use strict"; // Start of use strict

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 72)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

  // Closes responsive menu when a scroll trigger link is clicked
  $('.js-scroll-trigger').click(function() {
    $('.navbar-collapse').collapse('hide');
  });

  // Activate scrollspy to add active class to navbar items on scroll
  $('body').scrollspy({
    target: '#mainNav',
    offset: 75
  });

  // Collapse Navbar
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-scrolled");
    } else {
      $("#mainNav").removeClass("navbar-scrolled");
    }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);

  // Magnific popup calls
  $('#portfolio').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0, 1]
    },
    image: {
      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
    }
  });

})(jQuery); // End of use strict

###common.js

  $(".hover").mouseleave(
    function () {
      $(this).removeClass("hover");
    }
  );

Comments

[m.ts10806]

どこでどのように出ているのでしょうか。コードも提示されないと他者が言えることは「エラーで調べて」くらいになるのでご自身でも質問前にできる程度になります。

[ryryryry]

コメントありがとうございます！
初心者なので、質問から言葉足らずでご指摘ありがとうございます。

少し長くなりますが、index.php・functions.php・styles.cssに記載している内容になります。
正確には、どこでエラーが出ているかは不明なのですがカーソルを画像に当てた際にエフェクトできるようになっているのですが、クリックするとThe image #~ couldn't be loadedと表示されます。

=index.php=
<figure class="snip1200">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample27.jpg" alt="sq-sample27" />
<figcaption>
<p>I say, if your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
<div class="heading">
<h2>My<span>Hobby</span></h2>
</div>
</figcaption>
<a href="#"></a>
</figure>

=funtions.php=
<?php
function twpp_enqueue_scripts() {
wp_enqueue_script(
'scripts-script',
get_template_directory_uri() . '/js/scripts.js'
);
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
?>

=styles.css=
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
figure.snip1200 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 310px;
width: 100%;
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
font-size: 16px;
}
figure.snip1200 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease-in-out;
transition: all 0.45s ease-in-out;
}
figure.snip1200 img {
max-width: 100%;
position: relative;
opacity: 0.9;
}
figure.snip1200 figcaption {
position: absolute;
top: 45%;
left: 7%;
right: 7%;
bottom: 45%;
border: 1px solid white;
border-width: 1px 1px 0;
}
figure.snip1200 .heading {
overflow: hidden;
-webkit-transform: translateY(50%);
transform: translateY(50%);
position: absolute;
bottom: 0;
width: 100%;
}
figure.snip1200 h2 {
display: table;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
text-transform: uppercase;
font-weight: 400;
}
figure.snip1200 h2 span {
font-weight: 800;
}
figure.snip1200 h2:before,
figure.snip1200 h2:after {
position: absolute;
display: block;
width: 1000%;
height: 1px;
content: '';
background: white;
top: 50%;
}
figure.snip1200 h2:before {
left: -1000%;
}
figure.snip1200 h2:after {
right: -1000%;
}
figure.snip1200 p {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
width: 100%;
padding: 0 20px;
margin: 0;
opacity: 0;
line-height: 1.6em;
font-size: 0.9em;
}
figure.snip1200 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
figure.snip1200:hover img,
figure.snip1200.hover img {
opacity: 0.25;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
figure.snip1200:hover figcaption,
figure.snip1200.hover figcaption {
top: 7%;
bottom: 7%;
}
figure.snip1200:hover p,
figure.snip1200.hover p {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}

= header.php =
<?php
function twpp_enqueue_scripts() {
wp_enqueue_script(
'scripts-script',
get_template_directory_uri() . '/js/scripts.js',
);
wp_enqueue_script(
'common-script',
get_template_directory_uri() . '/js/common.js',
array( 'scripts-script' )
false,
​true
);
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
?>

[ryryryry]

補足として、https://codepen.io/littlesnippets/pen/dYwobbを参考にしているのですが、index.phpはMy Hobbyの部分を抜粋してます。

[Lhankor_Mhy]

m.ts10806さんも書いていますが、「The image #~ couldn't be loaded」というメッセージが「いつ」「どこで」出ているのかを教えて下さい。

[ryryryry]

例えばidnex.phpの<figure class="snip1200">のimg srcにリンクしている
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample27.jpg"
という画像に対してクリックした際に「The image #~ couldn't be loaded」と表示されて、hrefで指定したページに飛ばないです。

どこでに関しては、画面全体が黒色で透過するように覆っています。

[m.ts10806]

質問は編集できます。
あと、ファイル名もコピペで

[Lhankor_Mhy]

> hrefで指定したページに飛ばない

ご提示のコードに href はないようですが、JavaScriptなどで動的に設定しているのですか？

[ryryryry]

いいえ、
すみません </figcaption>の後の記述が抜けてました。
<a href="#"></a> と指定しているので、大丈夫だと思うのですが、なぜできないかわかりますでしょうか。
（*　"#"の部分は、飛びたいサイトのurlを貼っています）

質問に、header.phpの内容を新たに追加させていただきましたが、scripts.js と common.js の２つを動的に作動するようにしています。
まだ、何か必要ということであれば記載させていただきます。

[Lhankor_Mhy]

追加されていないようですね。

teratailの質問編集ページは、送信したかどうかわかりにくいですよね……

[ryryryry]

質問ではなく、質問に対しての、追記、修正でした。
今、質問の方にも記載したのでよろしくお願いします。

[m.ts10806]

コードはマークダウンcode機能にてご提示ください。ヘルプページや他の質問も参考に

[ryryryry]

ご指摘ありがとうございます。
質問の方、修正させていただきました。

[Lhankor_Mhy]

ご追記ありがとうございます。

#portfolio はHTMLではどこにありますか？

[ryryryry]

新たに内容追記しました。
#portfolio のHTMLは、body内にあります。
大まかに、body内は
<nav></nav>
<header></header>
<section></section>
<footer></footer>
で分けてます。

[Lhankor_Mhy]

おそらく、原因は分かりました。
ryryryry さんは、JavaScript はどの程度わかりますか？

[ryryryry]

ほとんど初心者に等しいです、、
教えていただくことはできますか。

[m.ts10806]

今更ですが、一応「WordPress」は質問タグとしてつけておいたほうが良さそうですね。

[Lhankor_Mhy]

じゃあ、どうしてこうなったのかについて説明しても理解してもらえなさそうですね……
解決案だけ示します。

[ryryryry]

すみません。
今後のために、もし書く余裕あれば理由も教えていただければ助かります。

[Lhankor_Mhy]

> もし書く余裕あれば理由も

magnificPopup はクリックイベントのバブリングを拾って、指定された要素でイベントデリゲートをするようです。
なので、イベントの伝播を止めてしまえば、その動作を止めることができます。

[ryryryry]

回答と理由の明記等、ありがとうございました。
理由の原因はわかり、回答の通りにやってできず、色々試行させていただきましたがimage Errorに対してのバブリングが消えず他に解決策はありますでしょうか。

[Lhankor_Mhy]

当方で作ったサンプルでは上手くいっています。

https://jsfiddle.net/Lhankor_Mhy/sL2kf8mr/

[Lhankor_Mhy]

イベントを設定する順番の問題かもしれないですね。magnificPopup より先に処理する必要があると思います。

[Lhankor_Mhy]

ん？　いや、どうだろう？　違うかもしれません。それは関係ないかもですね。

[ryryryry]

ありがとうございます！！
順番をかえ内装した際にうまく起動することができました。

教えて欲しい箇所が最後に一点だけあり、index.phpの<figure></figure>間で作っている画像エフェクトですが、これだけではなくいくつか挿入しています。
そうすると、１つ目のものしか作動しないのですが、この場合に<a id="test" ~~~ ></a>のようなid="#"をいくつか作る必要があるのでしょうか。

もし、scripts.js内の
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
$('#test').on('click', function(e){
e.stopPropagation();
})
で、複数にも作動するようなコードがありましたら教えていただくことは可能でしょうか。
すみません、よろしくお願いします。

（*質問の方に、新しく変えたコードの方記載してます。）

[Lhankor_Mhy]

サンプルの方ではIDで作っていますが、回答のようにクラスで作ればいいかと思いますよ。

[ryryryry]

できました。
ご丁寧に、教えていただきありがとうございました。

Answer 1

magnificPopup が動作しているのが原因です。もし、 magnificPopup が不要ならその部分を削除してください。
削除できない場合は、イベントの伝播を止めるのがいいかと思います。

<a class="test" href="#">←クラスを追加</a>

$('.test').on('click', function (e) {
    e.stopPropagation();
});