在弹出窗口中显示正确的缩略图图像

Question

我正在开发一个大型弹出式图​​库，并试图在下面的图片中展示图库设计

到目前为止，我设法让它看起来像是在图像中显示。但它始终显示来自第一张图像的图像，而不管我们在图库中点击哪个图像。

这是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>

Answer 1

你有一些不正确的代码......这是我的代码：

---

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");
    });
});