如何制作图像以便单击时在同一页面上打开更大的图像（相同的图像）？答案

【问题标题】：How to make image so that when clicked on, opens larger image (same image) on same page?如何制作图像以便单击时在同一页面上打开更大的图像（相同的图像）？
【发布时间】：2015-03-06 07:18:30
【问题描述】：

我以前在艺术网站上看到过这种做法，但通常缩略图会指向一个新页面。我需要图像在同一页面上导致更大的图像，居中。这是页面的屏幕截图，因此您会明白我的意思：http://i.imgur.com/uhxEJmQ.jpg?1 我想有一个相当简单的解决方案。提前感谢您的帮助！

这是我的代码：

<head>
<style type="text/css">
<!--

nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;
padding:0;text-align:center;background-color:#222419}
nav li {display:inline-block;background-color:#222419;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:18px;
   font-family:Arial, sans-serif;background-color:#222419;}
nav a:hover {text-decoration:none}

a{float:left;
  margin-right:58px;
  margin-left:58px;
  display:inline-block;
  color:#000;
  text-decoration:none;}

.head {width:100%}
.logo {display:inline-block;padding:10px;font-family:Arial,sans-serif;}
-->
</style> 
<meta charset="utf-8"/>
<title>DrawYourPets.com</title>
</head>

<body>

<header>
<nav> 

<div style="text-align:center">
<title="DrawYourPetsBanner">
<img src="DrawYourPetsBanner2.jpg" border="0" alt="DrawYourPetsBanner2">
</div>

<div>
<ul>
<li><a href="drawyourpets2.html"><strong>HOME</strong></a></li>
<li><a href="drawings.html"><strong>DRAWINGS<strong></a></li>
<li><a href="store.html"><strong>STORE</strong></a></li>
<li><a href="contact.html"><strong>CONTACT</strong></a></li>
</ul>
</div>

</nav>

</header>

<section>
<aside>
</aside>

<article>
<br>
<br>

<div style="text-align:center" class="head">
<div class="logo">
<figure>
<img src="Wesson.jpg" height="300px" weight="300px" alt="Wesson"/>
<figcaption>Wesson, 8.5'' x 11''</figcaption>
</figure>
</div>

<div class="logo">
<figure>
<img src="Stanley.jpg" height="300px" weight="300px" alt="Stanley"/>
<figcaption>Stanley, 13'' x 15''</figcaption>
</figure>
</div>

<div class="logo">
<figure>
<img src="Archibald.jpg" height="300px" weight="300px" alt="Archibald"/>
<figcaption>Archibald, 13'' x 15''</figcaption>
</figure>
</div>
<br>
<div class="logo">
<figure>
<img src="Maggie.jpg" height="250px" weight="250px" alt="Maggie"/>
<figcaption>Maggie, 16'' x 13''</figcaption>
</figure>
</div>

</div>

</article>

</section>

<footer>
</footer>

</body>
</html>

【问题讨论】：

见灯箱。有一种方法可以做自己，但对你来说，灯箱是正确的方法。
您是否正在寻找类似这样的效果，但连接到鼠标点击？ jsfiddle.net/rutevLfk/2?

标签： jquery html css image hyperlink

【解决方案1】：

这就是你要找的fiddle

<a href="#large"><img src=" "></a>

<img id="large" src=" " >

【讨论】：

nb。点击不lead to a larger image, centered, on the same page OP 要求...
@SW4 这对我来说似乎工作正常，一旦点击它，页面就会向下滚动到 id large 的图像所在的部分

【解决方案2】：

您可能可以使用鼠标悬停事件来显示图像的放大形状。

【讨论】：

需要点击而不是悬停