在fancybox 2的弹出窗口中显示上一个和下一个图像

Posted

技术标签:

【中文标题】在fancybox 2的弹出窗口中显示上一个和下一个图像【英文标题】:Display previous and next image inside popup on fancybox 2 【发布时间】:2016-02-12 23:33:19 【问题描述】:

我想创建一个类似此链接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') );     
            
        
    );

【问题讨论】:

我编辑了包含示例代码的帖子。谢谢你的关注。我希望你能帮助我。 【参考方案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');

    

    );
 )

您可以使用此代码在下一个和上一个按钮上显示图像。

【讨论】:

以上是关于在fancybox 2的弹出窗口中显示上一个和下一个图像的主要内容,如果未能解决你的问题,请参考以下文章

当 vimeo 视频设置为显示为画廊时,fancybox 中的上一个和下一个按钮会干扰该视频的播放按钮

如何在 C# .net 网页上显示来自另一个线程的弹出窗口?

单击卡片以在带有下一个和上一个按钮的弹出窗口上显示其各自的详细信息

求助.我的弹出层感觉被webview给挡住了

iPhone 设备轮换上的弹出窗口更改

iframe中的弹出窗口如何显示在最外层?