【发布时间】：2015-07-11 19:22:09
【问题描述】：
因此，对于我的作品集，我有一个缩略图库，当您单击缩略图时，您会获得全屏预览。我还设置了我的代码，以便当您单击图像时，“菜单”按钮以及缩略图库都会消失。 单击图像时元素会消失，但是当我退出全屏预览时，元素不会重新出现，它们仍然消失了。
我的js：
$('.gallery ul li a').click(function() {
var itemID = $(this).attr('href');
$('.gallery ul').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .gallery ul').removeClass('item_open');
return false;
});
$(".gallery ul li a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
//ELEMENTS THAT I'M HIDING WHEN I CLICK A GALLERY THUMBNAIL//
$(".gallery").hide();
$(".burger").hide();
$(".close").show();
});* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 0;
clear: both;
}
.row img {
max-width: 100%;
height: auto;
padding: 0;
margin: 0;
// z-index: 1000;
position: static;
}
.gallery ul li {
float: left;
margin: 0 0.87719%;
}
.gallery {
margin: 0 auto;
overflow: hidden;
padding-right: 60px;
}
.gallery ul {
padding-top: 100px;
position: relative;
}
.gallery ul li {
margin-bottom: 20px;
width: 23.24561%;
position: relative;
list-style: none;
}
.gallery ul li a {
display: block;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
line-height: 0;
}
.gallery ul li a:before {
position: absolute;
width: 32px;
height: 32px;
top: 40%;
left: 50%;
margin: -14px 0 0 -16px;
background: url('http://i58.tinypic.com/aowbw8.png') no-repeat;
content: "";
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.gallery ul li a:hover:before {
top: 50%;
opacity: 1;
}
.gallery ul li a:after {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
content: "";
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.gallery ul li a:hover:after {
opacity: 1;
}
.port {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding-top: 100px;
z-index: 1000;
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
border-bottom: 1px solid #d0d0d0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.port img {
width: 50%;
}
.port .description {
float: left;
width: 50%;
max-height: 100%;
padding: 0 40px 40px;
overflow: auto;
font-family: 'lato';
font-size: 20px;
color: #ffffff;
}
.port h1 {
font-size: 35px;
color: #fbe2d4;
background: url("http://www.julie-lavergne.com/img/common/trame.png");
padding: 15px;
}
.port > * {
opacity: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.port.item_open {
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.port > * {
opacity: 1;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.close {
width: 100px;
height: 100px;
background: url("http://i57.tinypic.com/6e15lj.png") no-repeat center;
left: 2%;
top: 10%;
opacity: 1;
z-index: 1000;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
position: absolute;
content: 'close';
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="gallery">
<div class="row">
<ul>
<li>
<a href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</li>
<li>
<a href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item02">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</a>
</li>
</ul>
</div>
<!-- / row -->
</section>
</div>
<!-- Item 01 -->
<div id="item01" class="port">
<div class="row">
<div class="description">
<h1>Item 01</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
</div>
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
</div>
</div>
<!-- / row -->
</div>
<!-- / Item 02 -->
<!-- Item 02 -->
<div id="item02" class="port">
<div class="row">
<div class="description">
<h1>Item 02</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
</div>
<img src="http://www.lovethispic.com/uploaded_images/113500-Pretty-Seashells.jpg" alt="">
<div class="close"></div>
</div>
<!-- / row -->
</div>
<!-- / Item 02 -->当我关闭窗口时，如何让 .gallery 和 .burger 再次出现？谢谢！
【问题讨论】：
-
请分享 jsfiddle
-
你的关闭按钮永远不会
$(".gallery, .burger").show() -
点击图片的代码在哪里？你有两个处理程序来点击
.gallery ul li a，我猜这是缩略图。 -
jsfiddle.net/xqkv6gb9 - 但它在这里并没有真正起作用。就像您单击时背景会消失一样。 “x”图标是白色的，所以你看不到它。 @Barmar 第二个但代码是删除背景的代码。当我将它应用于第一次设置时，它不起作用。谢谢！
-
没有
id="top"，因此在尝试执行$("#top").offset().top时会出错。该函数中的其余代码将被跳过，因此它不会隐藏图库。
标签： jquery image toggle gallery