Question

有一个包含6张图片的jquery大型弹出式画廊。我希望如果用户单击图片，则应该将他/她定向到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

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

parent()调用行进到锚点DOM祖先中的指定div元素。如果选择其他子树结构，请进行调整：

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

何时调用此代码取决于画廊何时附加其事件处理程序。我建议在ready处理程序的末尾执行该操作。

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

1 个答案: