获取动态图像灯箱jQuery

Question

I want have a dynamic image lightbox fancyBox, and i changed it as: 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;
});

It doesn't work while the original code is in here and work: 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;
});

How change original code as dynamic and worked?

Answer 1

change $.fancybox.open([console.log(arr);], to $.fancybox.open(arr,

Check working demo