Javascript 在弹出窗口中显示正确的thumnail图像
我正在工作的放大弹出画廊,并试图实现画廊的设计,如下图所示 到目前为止,我设法使它看起来像它在图像中显示。但无论我们在图像库中点击哪个法师,它总是显示第一张图像中的图像 下面是代码笔示例 我不知道如何修复它,以便它可以启动序列从图像用户点击,并隐藏左或右箭头它是第一个或最后一个图像在galler 代码Javascript 在弹出窗口中显示正确的thumnail图像,javascript,jquery,html,image-gallery,magnific-popup,Javascript,Jquery,Html,Image Gallery,Magnific Popup,我正在工作的放大弹出画廊,并试图实现画廊的设计,如下图所示 到目前为止,我设法使它看起来像它在图像中显示。但无论我们在图像库中点击哪个法师,它总是显示第一张图像中的图像 下面是代码笔示例 我不知道如何修复它,以便它可以启动序列从图像用户点击,并隐藏左或右箭头它是第一个或最后一个图像在galler 代码 这是图像的标题以及其他一些信息 下载 01-01-2014 这是图二 下载 02-02-2014 这是图三 下载 03-03-2014 您有一些不正确的代码。。。这是我的代码: HTML
这是图像的标题以及其他一些信息
下载
01-01-2014
这是图二
下载
02-02-2014
这是图三
下载
03-03-2014
您有一些不正确的代码。。。这是我的代码:
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>
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");
});
});
这是正确的行为。您应该阅读文档/联系开发人员,询问如何选择显示的默认项@知识寻求者检查我的answer@KnowledgeSeeker不客气。。。这就是你想要的<代码>http://codepen.io/mostafaznv/pen/EvjAK
如果(状态==0)
意味着,用户在弹出窗口的第一张图像中单击了后退按钮(id=1)
。。。当用户单击后退按钮(在第一个图像上)时,脚本应该显示最后一个图像(状态==6)
@KnowledgeSeekerif(状态==0)状态=最后一个图像id
;如果(状态==最后一个图像id
+1
)状态==1;
#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;
}
$(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");
});
});