我想显示 HTML 页面而不显示图像。但是代码试图错误地打开图像

Question

有一个包含 6 张图片的 jquery magnific popup 画廊。我希望如果用户单击图片，他/她应该被定向到 html 页面（embedded.html）。我怎样才能做到这一点？。

原始代码（现在在网站上显示）：

<div id="gallery" class="tm-content-box">
  <div class="grid tm-gallery">
    <figure class="effect-bubba">
      <img src="img/img-11-08.jpg" alt="Image 8">
      <figcaption>
        <h2>TEST</h2>

        <a href="img/img-11-07.jpg">View more</a>
      </figcaption>
    </figure>

我在上面（index.html）进行了如下修改。 （而不是显示img/img-11-07.jpg，我希望显示embedded.html）：

<div id="gallery" class="tm-content-box">
  <div class="grid tm-gallery">
    <a href="embedded.html">
      <figure class="effect-bubba">
        <img src="img/img-11-08.jpg" alt="Image 8">
        <figcaption>
          <h2>TEST</h2>


        </figcaption>
      </figure>
    </a>

但它现在仍然无法正常工作。点击测试它说The image could not be loaded。如果我在此语句中进一步点击The image，我将成功重定向到embedded.html。

我知道有一些 CSS 干扰。请帮忙。如果您想了解更多信息，也请告诉我。

我已经下载了这个网站作为模板，我正在修改它的代码。

更新： 我已经在这里上传了整个网站的代码：

https://drive.google.com/drive/folders/13IURTJWYTXgifAO72AgTwomKaFNPFDkc

Answer 1

从概念上讲，您必须取消注册库附加的单击事件处理程序。具体来说，点击处理程序附加到包含应该触发 html 加载的锚点的 <div class="tm grid gallery"> 元素。因此，以下命令之一应该可以解决问题，具体取决于事件处理程序的注册方式（在使用 Chrome 开发工具的交互式测试中，unbindcall 就足够了）。

parent() 调用传递到锚点的 DOM 祖先中指定的 div 元素。如果您选择不同的子树结构，请调整：

$("a[href='embedded.html']").parent().off('click');
$("a[href='embedded.html']").parent().unbind('click');

何时调用此代码取决于画廊何时附加其事件处理程序。我建议在 ready 处理程序的末尾这样做。