我正在研究放大弹出画廊,并试图实现画廊设计,如下图所示
到目前为止,我设法让它看起来像图像中显示的那样。但它总是显示第一张图像中的图像,无论我们在图像库中单击哪个法师。
这是 codepen 示例 http://codepen.io/anon/pen/LvFxH
我不知道如何修复它,以便它可以从用户单击的图像开始序列,并隐藏向左或向右箭头,它是画廊中的第一个或最后一个图像
代码
<div id="gallery1" class="mfp-hide">
<div class="slide">
<div class="imgg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is the caption of the image along with some other information</span>
<span class="d-hr">Download</span>
<span class="d-date">01-01-2014</span>
</div>
</div>
<div class="slide">
<div class="imgg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is image two</span>
<span class="d-hr">Download</span>
<span class="d-date">02-02-2014</span>
</div>
</div>
<div class="slide">
<div class="imgg"><img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" /> </div>
<div class="detailss">
<span class="d-title">This is image three</span>
<span class="d-hr">Download</span>
<span class="d-date">03-03-2014</span>
</div>
</div>
</div>
<a href="#gallery1" class="open-gallery-link">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Anthochaera_chrysoptera.jpg/800px-Anthochaera_chrysoptera.jpg" width="172" height="115" />
</a>
<a href="#gallery1" class="open-gallery-link">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Water_Dolphin.jpg/800px-Water_Dolphin.jpg" width="172" height="115" />
</a>
<a href="#gallery1" class="open-gallery-link">
<img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" width="172" height="115" />
</a>
最佳答案
您的代码不正确...这是我的代码:
<小时/>Live Demo on JSFiddle
<小时/>Demo 2 - Next/Prev Button
<小时/>HTML
<div id='gallery'>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/6s75jpffwom32fhct7q4.jpg' title='' alt=''/>
<span class='date'>15-02-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/ypzla17xaqmhjiocih64.jpg' title='' alt=''/>
<span class='date'>10-07-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/tuwvju35ajgts0rxzufw.jpg' title='' alt=''/>
<span class='date'>21-10-2013</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/usra1shyel8nxudsj8vs.jpg' title='' alt=''/>
<span class='date'>02-02-2014</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
<div class='imgwrapper'>
<img src='http://8pic.ir/images/vp7wnu7ohpx2i3im6nem.jpg' title='' alt=''/>
<span class='date'>20-05-2014</span>
<span class='info'>This is the caption of the image along with some other information</span>
<a href='http://gah-blog.blogspot.com/'>download</a>
</div>
</div>
<div id="popupbg">
<div id="popup">
<img src='' title='' alt=''/>
<span class='date'></span>
<span class='info'></span>
<a href=''>download</a>
<span class="btn" id="close">Close</span>
</div>
</div>
CSS
#gallery{
position:relative;
width:100%;
background:#e7e7e7;
}
.imgwrapper{
position:relative;
width:150px;
height:150px;
display:inline-block;
}
.imgwrapper img{
width:150px;
height:150px;
}
.imgwrapper span,.imgwrapper a{
display:none;
}
#popupbg{
display:none;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.92);
z-index:1000;
}
#popup{
position:relative;
top:5%;
margin:0 auto;
font-size:17px;
width:70%;
height:65%;
background:#fff;
padding:20px;
border:solid 10px #CCCCCC;
}
#popup img{
position:relative;
display:block;
width:95%;
height:200px;
}
#popup span.date,#popup span.info,#popup span#close{
display:block;
}
jQuery
$(document).ready(function(e) {
$(".imgwrapper").click(function(){
var img=$(' > img', this).attr("src");
var date=$(' > span.date', this).html();
var info=$(' > span.info', this).html();
var a=$(' > a', this).attr("href");
$('#popup img').attr("src",img);
$('#popup span.date').html(date);
$('#popup span.info').html(info);
$('#popup a').attr("href",a);
user_guide()
});
});
function user_guide(){
$("#popupbg").fadeToggle("slow");
}
$(document).ready(function(e) {
$("#close").click(function(){
$("#popupbg").fadeToggle("slow");
});
});
关于javascript - 在弹出窗口中显示正确的缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26277760/