获取动态图像灯箱jQuery

Get dynamic image lightbox jQuery

本文关键字:jQuery 图像 动态 获取      更新时间:2023-09-26

我想要一个动态图像灯箱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,

检查的工作演示