我有以下代码:
<script type="text/javascript" >
$(document).ready(function(){
$(".img").click(function(){
var address= $(this).attr("src");
$("#popup").fadeIn("slow");
$("#lightbox").attr("src",address);
});
$("#close").click(function(){
$("#popup").fadeOut("slow");
});
});
</script>
显然在字符串 $("#lightbox").attr("src",address); “src”,address 是一个变量,它应该指向脚本以在灯箱弹出窗口中显示与源地址关联的图像。但是它对我不起作用。我认为可能是我在图像缩略图上有一个覆盖层,但是正如您从下面的代码中看到的那样,覆盖层位于图像类 div 内部。有什么建议吗?
<div id="indexcontainer">
<div class="col col-1">
<div id="effect-1" class="effects clearfix">
<div class="img"><img src="images/photos/_DSC0048.jpg" alt="Symphony In Red - robertlunaphotography.com" onload="MM_effectGrowShrink(this, 600, '0%', '100%', false, false, true)">
<div class="overlay">
<h6> </h6>
<h6> </h6>
<h6> </h6>
<h4>"Symphony in Red"</h4>
</div>
</div>
</div>
<div id="effect-1" class="effects clearfix">
<div class="img"><img src="images/photos/_DSC0046alt.jpg" alt=""Second Thoughts"" longdesc="robertlunaphotography.com">
<div class="overlay">
<h6> </h6>
<h6> </h6>
<h6> </h6>
<h4>"Second Thoughts'</h4>
</div>
</div>
</div>
<div id="effect-1" class="effects clearfix">
<div class="img"><img src="images/photos/LNA_4072.jpg" width="375" height="250" alt=""The Angel of Oaks"" longdesc="robertlunaphotography.com" onload="MM_effectGrowShrink(this, 400, '0%', '100%', false, false, true)"></a>
<div class="overlay">
<h6> </h6>
<h6> </h6>
<h6> </h6>
<h4>"The Angel of Oaks"</h4>
</div>
</div>
</div>
<div id="effect-1" class="effects clearfix">
<div class="img"><img src="images/photos/LUN_0378.jpg" width="514" height="250" alt=""Table Rock Mountain"" longdesc="robertlunaphotography.com">
<div class="overlay">
<h6> </h6>
<h6> </h6>
<h6> </h6>
<h4>"Table Rock Mountain"</h4>
</div>
</div>
</div>
<div id="effect-1" class="effects clearfix">
<div class="img"><img src="images/photos/_DSC0092_sm.jpg" width="376" height="250" alt=""The Stranger"" longdesc="robertlunaphotography.com" onload="MM_effectGrowShrink(this, 600, '0%', '100%', false, false, true)">
<div class="overlay">
<h6> </h6>
<h6> </h6>
<h6> </h6>
<h4>"The Stranger"</h4>
</div>
</div>
</div>
<div id="effect-1" class="effects clearfix">
<div class="img"><img src="images/photos/_DSC0073.jpg" width="250" height="376" alt=""Jessica"" longdesc="robertlunaphotography.com">
<div class="overlay">
<h6> </h6>
<h6> </h6>
<h6> </h6>
<h4>"Jessica"</h4>
</div>
</div>
</div>
<div id="effect-1" class="effects clearfix">
<div class="img"><img src="images/photos/LNA_5203.jpg" width="375" height="250" alt=""Lake Junaluska"" longdesc="robertlunaphotography.com" onload="MM_effectGrowShrink(this, 600, '0%', '100%', false, false, true)">
<div class="overlay">
<h6> </h6>
<h6> </h6>
<h6> </h6>
<h4>"Lake Junaluska"</h4>
</div>
</div>
</div>
<div id="effect-1" class="effects clearfix">
<div class="img"><img src="images/photos/_DSC0204copy.jpg" width="250" height="334" alt=""Brooke"" longdesc="robertlunaphotography.com">
<div class="overlay">
<h6> </h6>
<h6> </h6>
<h6> </h6>
<h4>"Brooke"</h4>
</div>
</div>
</div>
</div>
</div>
<div id="popup">
<div id="center">
<img id="lightbox" src="images/largeones/Symphony-in-Red-Robert-Luna-Photography.com.jpg">
<img id="close" src="images/index/Close-button-icon-1005031249.png" alt="close" >
</div>
最佳答案
您的点击处理程序定义在 <div>
上类为 img
的元素.因此,您正在尝试获取 src
来自 <div>
的属性元素而不是 <img>
元素:
$(".img").click(function(){
// In this function, $(this) refers to <div class="img"> (not <img src="...">)
}
如果您确实需要点击处理程序位于 <div>
上元素,试试这个:
$(".img").click(function(){
var address= $(this).children().attr("src");
}
相反,如果您想要 <img>
上的点击处理程序元素,试试这个:
$(".img img").click(function(){
var address= $(this).attr("src");
}
关于javascript - 灯箱效果JS帮助请,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27008059/