Jquery 将显示页面上的所有灯箱
Jquery will display all the lightboxes on the page
我做了一个简单的灯箱,它会弹出并显示图像,但是当涉及到PHP时,事情就被连接了。它会打开我所有包含类灯箱的div。
Javascript:
$('.lightbox').click(function(){
$('.spate').animate({'opacity':'.50'}, 1000 , 'linear');
$('.box').animate({'opacity':'1.00'}, 1000 , 'linear');
$('.spate, .box').css('display','block');
});
$('.inchide').click(function(){
$('.spate, .box').animate({'opacity':'.0'}, 500 , 'linear', function(){
$('.spate, .box').css('display','none');
});
});
$('.spate').click(function(){
$('.spate, .box').animate({'opacity':'.0'}, 500 , 'linear', function(){
$('.spate, .box').css('display','none');
});
});
PHP/HTML:
while($row=mysql_fetch_array($query){
$post_image= $row['post_image'];
<?php if(!$post_image=="") echo '
<a class="lightbox" href="#"><img src="img/'.$post_image.'"></a>
<div class="spate"></div>
<div class="box"><div class="inchide">X</div> <img src="img/'.$post_image.'"></div>
';
}
问题是当我在页面上有超过 1 张图像时,如果单击其中一张图像,将出现一个灯箱,特别是所有图像。我无法让它仅为单击的图像打开灯箱。
while($row=mysql_fetch_array($query){
$post_image= $row['post_image'];
<?php if(!$post_image=="") echo '
<div> <!--add all of that in div for each one-->
<a class="lightbox" href="#"><img src="img/'.$post_image.'"></a>
<div class="spate"></div>
<div class="box"><div class="inchide">X</div> <img src="img/'.$post_image.'"></div>
<div>
';
}
并像那样使用它
$(document).ready(function(){
$('.lightbox').click(function(){
$(this).parent().find('.spate').animate({'opacity':'.50'}, 1000 , 'linear');
$(this).parent().find('.box').animate({'opacity':'1.00'}, 1000 , 'linear');
$(this).parent().find('.spate, .box').css('display','block');
});
$('.inchide').click(function(){
$(this).parent().parent().find('.spate, .box').animate({'opacity':'.0'}, 500 , 'linear', function(){
$(this).parent().parent().find('.spate, .box').css('display','none');
});
});
$('.spate').click(function(){
$(this).parent().find('.spate, .box').animate({'opacity':'.0'}, 500 , 'linear', function(){
$(this).parent().find('.spate, .box').css('display','none');
});
});
});
您需要
选择特定项目而不是一类项目:
$('.lightbox').click(function(){
$(this).next('.spate').animate({'opacity':'.50'}, 1000 , 'linear').css('display','block');
$(this).next('.box').animate({'opacity':'1.00'}, 1000 , 'linear').css('display','block');
});
相关文章:
- 如何在页面重新加载时显示jquery ui对话框
- 如何为显示jquery滑块值的文本框设置默认值
- 突出显示jQuery中单词之间的空格
- 不显示 jQuery 不显眼的验证摘要
- Rails-jQuery 为什么我必须单击两次才能显示 jQuery 效果
- 如何在页面导航上显示jquery警报
- Slider和Date Picker未显示JQuery
- 键入时不要显示jQuery UI自动完成
- 如何显示jQuery自动完成响应并选择它
- 如何在返回后将状态保持为突出显示JQuery树视图的选定节点
- 检测文本是否在鼠标上突出显示jQuery
- 30 秒后显示 Jquery UI 对话框
- X 可编辑的编辑值不显示 jquery 集值
- 显示 jQuery 复选框选择
- 用于显示字段的工具提示和显示 Jquery 验证中的错误的工具提示器
- 如果站点上存在多个滑块,则显示 Jquery UI 滑块的值
- 谷歌地图信息框能够显示JQuery UI小部件
- 在标签中以 asp.net 显示 jQuery 的结果
- 当 Javascript 在浏览器中关闭时显示 Jquery .slide() 表单
- 在 Leaflet Map 上显示 jQuery 动态 GeoJSON 内容