我想在图库中添加图片的超链接(以便在图库中打开更大版本的图片),同时保持缩放'对缩略图的影响。我尝试向第一个图像添加超链接,但缩放不再运行。如果我的解释不是很好,我很抱歉,我是编码语言的新手!任何帮助都会很棒!
以下是我获得图库代码的链接,如果它对任何人都有用! https://codepen.io/oknoblich/pen/ELfzd
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" > < /script> <
script type = "text/javascript" >
(function() {
var documentElem = $(document),
nav = $('nav'),
lastScrollTop = 0;
documentElem.on('scroll', function() {
var currentScrollTop = $(this).scrollTop();
//scroll down
if (currentScrollTop > lastScrollTop) nav.addClass('hidden');
//scroll up
else nav.removeClass('hidden');
lastScrollTop = currentScrollTop;
});
})();
<
/script>
<!-- End of Javascript for Navigation Menu -->
&#13;
<style type="text/css">@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
width: 640px;
margin: 0 auto;
padding: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.gallery>div {
position: relative;
float: left;
padding: 5px;
}
.gallery>div>img {
display: block;
width: 200px;
transition: .1s transform;
transform: translateZ(0);
/* hack */
}
.gallery>div:hover {
z-index: 1;
}
.gallery>div:hover>img {
transform: scale(1.1, 1.1);
transition: .3s transform;
}
.cf:before,
.cf:after {
display: table;
content: "";
line-height: 0;
}
.cf:after {
clear: both;
}
h1 {
margin: 40px 0;
font-size: 30px;
font-weight: 300;
text-align: center;
}
</style>
&#13;
<body>
<!-- Start of Navigation Bar -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li id="current"><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- End of Navigation Bar -->
<br />
<br />
<h1> Gallery </h1>
<!-- Stat of Gallery -->
<div class="gallery cf">
<!-- This is the image I tried to link but when I ran the code the zoom was no longer maintained. -->
<div>
<a href="Images/Optimized/FullImage_1.jpg"><img src="Images/Optimized/Thumbnail_1.jpg" width="200" height="300" alt="" /></a>
</div>
<div>
<img src="Images/Optimized/Thumbnail_2.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_3.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_4.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_5.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_6.jpg" width="200" height="300" alt="" /> </div>
</div>
&#13;
答案 0 :(得分:1)
试用此代码
HTML&amp; CSS
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: #555;
background: #e5e5e5;
}
.gallery {
width: 640px;
margin: 0 auto;
padding: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.gallery>div {
position: relative;
float: left;
padding: 5px;
}
.gallery>div>a>img {
display: block;
width: 200px;
transition: .1s transform;
transform: translateZ(0);
/* hack */
}
.gallery>div:hover {
z-index: 1;
}
.gallery>div:hover>a>img {
transform: scale(1.7, 1.7);
transition: .3s transform;
}
.cf:before,
.cf:after {
display: table;
content: "";
line-height: 0;
}
.cf:after {
clear: both;
}
h1 {
margin: 40px 0;
font-size: 30px;
font-weight: 300;
text-align: center;
}
<h1>Simple CSS Image Gallery with Zoom</h1>
<div class="gallery cf">
<div>
<a href=""><img src="http://abload.de/img/a6aawu.jpg" /></a>
</div>
<div>
<a href=""><img src="http://abload.de/img/a6aawu.jpg" /></a>
</div>
<div>
<a href=""><img src="http://abload.de/img/a6aawu.jpg" /></a>
</div>
<div>
<a href=""><img src="http://abload.de/img/a6aawu.jpg" /></a>
</div>
<div>
<a href=""> <img src="http://abload.de/img/a6aawu.jpg" /></a>
</div>
<div>
<a href=""> <img src="http://abload.de/img/a6aawu.jpg" /></a>
</div>
</div>
希望这有助于......
答案 1 :(得分:0)
使用css完成缩放并应用于悬停事件,如果您在click事件中应用具有相同规则的类,它将保留css属性。
我最初没有得到正确的问题,但你还需要更改CSS,.gallery&gt; div&gt; img表示一个带有类库的元素,后面紧跟一个div,后面跟一个img,包括img和您需要删除&gt;标签的标签“.gallery&gt; div img”
答案 2 :(得分:0)
这里的代码肯定会起作用,并会以大尺寸显示图像
https://jsfiddle.net/fsfrkru0/
html&amp; CSS
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: #555;
background: #e5e5e5;
}
.gallery {
width: 640px;
margin: 0 auto;
padding: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.gallery>div>a {
position: relative;
float: left;
padding: 5px;
}
.gallery>div>a>img {
display: block;
width: 200px;
transition: .1s transform;
transform: translateZ(0);
/* hack */
}
.gallery>div:hover>a {
z-index: 1;
}
.gallery>div:hover>a>img {
transform: scale(1.7, 1.7);
transition: .3s transform;
}
.cf:before,
.cf:after {
display: table;
content: "";
line-height: 0;
}
.cf:after {
clear: both;
}
h1 {
margin: 40px 0;
font-size: 30px;
font-weight: 300;
text-align: center;
}
<h1>Simple CSS Image Gallery with Zoom</h1>
<div class="gallery cf">
<div>
<a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a>
</div>
<div>
<a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a>
</div>
<div>
<a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a>
</div>
<div>
<a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a>
</div>
<div>
<a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a>
</div>
<div>
<a href="http://abload.de/img/a6aawu.jpg" target="_blank"><img src="http://abload.de/img/a6aawu.jpg" styles="" /></a>
</div>
</div>
希望这会有所帮助