获取动态图像灯箱jQuery
Get dynamic image lightbox jQuery
我想要一个动态图像灯箱fancyBox,我把它改为:http://jsfiddle.net/szya63wb/
<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/1_b.jpg"
data-title="manual 1st title">
1
</div>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/2_b.jpg"
data-title="2nd title">
</div>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/3_b.jpg"
data-title="3rd title">
//chenched here**
var arr = $('div.Img').map(function (elem) {
return {
href: $(this).data('type'),
title: $(this).data('title')
}
}).get();
//chenched here**
$(".open_fancybox").click(function() {
$.fancybox.open([
//chenched here
console.log(arr);
//chenched here
], {
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
helpers : {
title : {
type: 'over'
},
thumbs : {
width : 75,
height : 50,
source : function( item ) {
return item.href.replace('_b.jpg', '_s.jpg');
}
}
}
});
return false;
});
当原始代码在这里并且有效时,它不起作用:http://jsfiddle.net/2k8EP/
<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
$(".open_fancybox").click(function() {
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'manual 1st title'
},
{
href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title : '2nd title'
},
{
href : 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title : '3rd title'
}
], {
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
helpers : {
title : {
type: 'over'
},
thumbs : {
width : 75,
height : 50,
source : function( item ) {
return item.href.replace('_b.jpg', '_s.jpg');
}
}
}
});
return false;
});
如何将原始代码更改为动态代码和有效代码?
将$.fancybox.open([console.log(arr);],
更改为$.fancybox.open(arr,
检查的工作演示
相关文章:
- jQuery图像幻灯片,在停止后淡出到第一张图像
- 使用next、prev按钮制作简单的jQuery图像滑块
- Jquery图像循环问题
- 为什么这个jQuery图像映射在WordPress上不起作用
- JQuery 图像错误处理
- jQuery 图像替换为类
- jquery 图像旋转器(仅在 JS 中传递图像)
- jQuery图像在悬停时闪烁
- 使用 nameProp 的 JQuery 图像滚动更新在 Firefox 和 Chrome 中不起作用
- JQuery 图像过渡.向上滑动
- jQuery图像淡入淡出不起作用
- JQuery图像预览无法工作
- JQuery图像滑块和CSS转换只能工作一次
- jQuery图像(产品)滑块
- jQuery-图像替换转换〔Safari中的问题〕
- 使jQuery图像滑块停止在最后一个图像,并添加下一个和上一个按钮
- jquery图像滑块库
- JQuery图像大小计算没有'不能在Chrome/Safari中工作
- 如何使JQuery图像滑块与屏幕的宽度相等
- wordpress插件中的jQuery图像幻灯片