我正在尝试制作一个灯箱库。当我点击第一张图片时，它显示内容正常，即使我关闭和opne，它工作正常。 当我来图像二时，如果我点击它，它会显示第一张图像的灯箱。
任何人都可以帮助我 http://jsfiddle.net/wwavyh0y/2/
/* Slideshow + Lightbox */
$(document).ready(function() {
// Redéfinition de styles
$(".slideshow").css("position","relative");
$(".slideshow img").css("position","absolute");
$(".slideshow img:gt(0)").hide();
// Ajout des liens
$(".slideshow").append("<p><a href=\"#\" class=\"prev\">previouse</a> | <a href=\"#\" class=\"next\">Next</a></p>");
$(".slideshow p").css("padding-top","340px");
// Clic sur le lien suivant
$(".slideshow a.next").click(function() {
var $img_suivante = $(".slideshow img:visible").next("img");
if($img_suivante.length<1) $img_suivante = $(".slideshow img:first");
$(".slideshow img:visible").fadeOut();
$img_suivante.fadeIn();
});
// Clic sur le lien précédent
$(".slideshow a.prev").click(function() {
var $img_precedente = $(".slideshow img:visible").prev("img");
if($img_precedente.length<1) $img_precedente = $(".slideshow img:last");
$(".slideshow img:visible").fadeOut();
$img_precedente.fadeIn();
});
// Lightbox
$(".dolightbox").click(openlight);
// Modification dynamique de la page et des styles
function openlight() {
var item=$(this).parent().attr("id");
alert(item);
$("#"+item).children(".work-item-desc-slide").css("display","block");
$("body").append("<div id=\"zone\"></div>");
$("body").prepend("<div id=\"cache\"></div>");
$("#cache").css({
"width":"100%",
"height":"100%",
"background":"#1d2f3e",
"z-index":"10",
"position":"absolute",
"top":"0",
"left":"0"
});
$(".work-item-desc-slide").after("<span class='marquage'></span>");
$("#zone").prepend("<p style=\"text-align:right;margin:0\"><a href=\"#\" class=\"close\">Close</a></p>");
$("#zone a").click(closelight);
$("#"+item+" .work-item-desc-slide").appendTo("#zone");
}
// Fermer la lightbox
function closelight() {
// On rétablit les éléments à leur position originale dans le flux
$(".work-item-desc-slide").appendTo(".marquage");
$("#zone, #cache").remove();
}
});body {
background: #1C1C1C;
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
margin:0;
padding:0;
}
#wrap img {
width:100px;
height : 100px;
}
.work-item-desc-slide a,.close a {
color: rgba(15,159,180,1);
text-decoration: none;
}
div#wrap {
position:relative;
margin:auto;
color: #d5d5d5;
width: 640px;
margin-top:20px;
margin-bottom:200px;
}
.item{
margin: 30px;
}
.marquage {
display: none;
}
#zone {
width: 90%;
height: 90%;
background-color: #314252;
z-index: 20;
position: absolute;
padding: 10px;
left: 5%;
top: 4%;
}
.work-item-desc-slide {
display: none;
width: 100%;
height: 100%;
}
.slideshow img {
width:50%;
height:50%;
}
.slideshow,.work-item-info-slide{
width: 50%;
height: 100%;
padding: 20px;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin: 0 auto;
float: left;
}
.work-item-info-slide h2{
color: rgba(201,225,193,0.9);
}
.work-item-info-slide h1 {
color: rgba(15,159,180,1);
}
.work-tem-info-hr {
border: none;
height: 3px;
background-color: rgba(201,225,193,0.13);
width: 70%;
position: relative;
left: -77px;
}
.work-item-info-slide p{
color: #f9f9f9;
opacity: 0.5;
}
.work-item-info-slide ul{
list-style: none;
color: #f9f9f9;
opacity: 0.5;
}
.work-item-info-slide ul li {
margin-bottom: 10px;
}
.work-item-info-slide ul li span{
background-color: rgba(15,159,180,0.4);
text-align: center;
line-height: 20px;
margin-right: 10px;
display: inline-block;
height: 30px;
width: 30px;
border-radius: 20px;
padding: 5px;
box-sizing:border-box;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="item1">
<img src="http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg" alt="first item" class="dolightbox"/>
<div class="work-item-desc-slide">
<div class="slideshow">
<img src="http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg" alt="first item slide" />
<img src="http://www.desktopwallpaperhd.net/wallpapers/12/1/sunset-mcgary-background-back-screensavers-seconds-start-thank-click-127921.jpg" alt="Calamar" />
</div><!-- end slidshow-->
<div class="work-item-info-slide">
<h1>Company Name</h1>
<hr class="work-tem-info-hr">
<h2>About The Client</h2>
<p>
eap into electronic typesetting, remaining essentially unchanged. It was populari
</p>
<h2> Services Provided</h2>
<ul class="services-provided">
<li><span>1</span> Service 1</li>
<li><span>2</span> Service 2</li>
<li><span>3</span> Service 3</li>
</ul>
<hr class="work-tem-info-hr">
<a href="Index.html">Check out the WebSite</a>
</div>
<div style="clear:both"></div>
</div>
</div><!-- end item1-->
<div id="item2">
<img src="http://fc00.deviantart.net/fs71/i/2012/208/7/b/every_child_is_an_artist__the_problem_is_how_to_re_by_streetartsavemylife-d58uv1d.jpg" alt="item 2" class="dolightbox"/>
<div class="work-item-desc-slide">
<div class="slideshow">
<img src="http://fc00.deviantart.net/fs71/i/2012/208/7/b/every_child_is_an_artist__the_problem_is_how_to_re_by_streetartsavemylife-d58uv1d.jpg" alt="Musiciens" />
<img src="http://www.scottchristensen.com.au/Images/artist-profile-picture.jpg" alt="Calamar" />
</div>
<div class="work-item-info-slide">
<h1>Company Name 2</h1>
<hr class="work-tem-info-hr">
<h2>About The Client 2</h2>
<p>
eap into electronic typesetting, remaining essentially unchanged. It was populari
</p>
<h2> Services Provided</h2>
<ul class="services-provided">
<li><span>1</span> Service 1</li>
<li><span>2</span> Service 2</li>
<li><span>3</span> Service 3</li>
</ul>
<hr class="work-tem-info-hr">
<a href="Index.html">Check out the WebSite</a>
</div>
<div style="clear:both"></div>
</div>
</div> <!-- end item1-->
</div>