在fancybox 2上的彈出窗口中顯示上一個和下一個圖像

Question

我想創建一個這樣的布局鏈接fancybox layout 。 Fancybox 提供了創建 tpl 的選項，到目前為止一切順利。

問題是我不知道如何獲取當前對象的下一個和上一個圖像並將其傳遞給 div。

我看到了fancybox頁面http://fancyapps.com/fancybox/中列出的回調，但我不知道如何去做。 我也看到了這個小提琴 jsfiddle.net/xW5gs/。 它存儲了以前的圖像鏈接，但我無法將它作為背景傳遞給帶有 jquery 的 div。

任何幫助將不勝感激。 謝謝

編輯：

我使用的是這樣的fancybox：

$('.fancybox').fancybox({
        'nextEffect': 'none',
        'prevEffect': 'none',
        'tpl': {
            wrap: '<div class="fancybox-wrap" tabIndex="-1"><div id="prev-img"></div><div id="next-img"></div><a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
            closeBtn : '<a title="Close" class="fancybox-item fancybox-close hide-me" href="javascript:;"></a>'
        },
        afterLoad: function(current, previous) {
            console.log( 'Current: ' + current.href );        
            console.log( 'Previous: ' + (previous ? previous.href : '-') );


            if (previous) {
                document.getElementById('prev-img').style.backgroundImage = 'url('+previous.href+')';// here I am trying to pass as a background the url of the previous object to the div with id #prev-img.
                console.log( 'Navigating: ' + (current.index > previous.index ? 'right' : 'left') );     
            }
        }
    });

Answer 1

$(function(){
    $('.fancybox').fancybox({
        'padding' : 0,
        'arrows': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 1000,
        'speedOut': 700,
        'helpers' : { 
            'title' : { type : 'inside',position : 'top'}
        },
        'afterShow': function () {
        // initialize some variables
        var gallerySize = this.group.length,
            next, prev,next_i,prev_i;
        if (this.index == gallerySize - 1) {
            // this is the last element of the gallery so next is the first
            next = $(".fancybox").eq(0).attr("title"),
            prev = $(".fancybox").eq(this.index - 1).attr("title");

            next_i = $(".fancybox").eq(0).attr("href"),
            prev_i = $(".fancybox").eq(this.index - 1).attr("href");
        } else if (this.index == 0) {
            // this is the first image of the gallery so prev is the last
            next = $(".fancybox").eq(this.index + 1).attr("title"),
            prev = $(".fancybox").eq(gallerySize - 1).attr("title");

            next_i = $(".fancybox").eq(this.index + 1).attr("href"),
            prev_i = $(".fancybox").eq(gallerySize - 1).attr("href");
        } else {
            // otherwise just add or substract to index
            next = $(".fancybox").eq(this.index + 1).attr("title"),
            prev = $(".fancybox").eq(this.index - 1).attr("title");

            next_i = $(".fancybox").eq(this.index + 1).attr("href"),
            prev_i = $(".fancybox").eq(gallerySize - 1).attr("href");
        }
        // set title attributes to fancybox next/prev selectors
        $(".fancybox-next").attr("title", next);
        $(".fancybox-prev").attr("title", prev);

        $(".fancybox-next").css('background-image', 'url(' + next_i + ')');
        $(".fancybox-prev").css('background-image', 'url(' + prev_i + ')');
        $(".fancybox-next").css('background-size', 'cover');
        $(".fancybox-prev").css('background-size', 'cover');

    }

    });
 })

您可以使用此代碼在下一個和上一個按鈕上顯示圖像。