我想拥有一个动态图片灯箱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;
});
如何将原始代码更改为动态且有效?