Question

我是网页设计，HTML等新手。

我试图通过缩略图打开全尺寸照片，该缩略图将在页面内容的同一窗口中打开。

我使用的代码是：

    <div class="row">
    <div class="col-md-4">
      <div class="thumbnail"><img src="images/Invitations/Birthday Party/1st
             Birthday Dora.jpg" alt="Thumbnail Image 1" class="img4">
        <div class="caption">
          <h4><a href="images/Invitations/Birthday Party/1st Birthday Dora.jpg" 
              onclick="window.open(this.href,'targetWindow', 'toolbar=no, 
              location=no, status=no, menubar=no, scrollbars=yes, resizeable=yes, 
              width=934px, height=960px');return false;
          return false;">Girls Dora 1st Birthday Party Invitation A5</a></h4>
</div>
      </div>
    </div>

我知道这段代码会打开一个新窗口，但正如我所说，我只是新手，我试图打开页面内容的链接。有人可以帮帮我吗？

Answer 1

尝试使用JQUERY。

添加

<div id='overlay'>

将图像放入页面。在标题中添加相应的代码：

$（ '＃叠加'）隐藏（）;

点击href - ＆gt; $（ '＃叠加'）显示（）;

仔细阅读Jquery-Documentation !!!

Answer 2

使用fancyBox

注意：该演示在全屏幕中效果最佳，因为弹出图像将是全尺寸的。我在这里使用两个不同的图像来显示尺寸差异，但如果锚点和img标记图像是相同的图片，您将获得您正在寻找的效果。

＆＃13;

git tag

＆＃13;

git branch -a

＆＃13;

在不打开新窗口的情况下打开页面上的内容弹出窗口

2 个答案: