Question

使用Fancybox v 2+并希望在图像/项目上方添加简单的内容。我可以毫不费力地添加下面的内容和图片/内容。

代码：

$(".fancybox").fancybox({
        openEffect  : 'fade',
        closeEffect : 'fade',
        mouseWheel : true,
        padding: 10,
        closeBtn : false,
        beforeShow: function () {
            if (this.title) {
            // New line
            this.title += '<br />';

            // Add tweet button
            this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';

            // Add FaceBook like button
            this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
            }
        },
        afterShow: function(){
            // Render tweet button
            twttr.widgets.load();

            var customContent = "<div class='customHTML'>My custom content</div>"
            $('.fancybox-inner').append(customContent);
            },
            helpers : {
            title : {
                type: 'inside'
            }
        }  

    });

基本上我希望customHTML DIV在呈现时超出图像。我怎么能做到这一点？

Answer 1

只是为了好玩...您可以使用.before()回调中的afterShow方法将title的位置切换为content，如：

$(".fancybox").fancybox({
    // avoid unwanted flickering while changing the title to top
    openEffect: "none",
    nextEffect: "none",
    prevEffect: "none",
    helpers: {
        title: {
            type: 'inside'
        }
    },
    beforeShow: function () {
        var customContent = "<div class='customHTML'>My custom content</div>";
        this.title = this.title ? this.title + customContent : customContent;
    },
    afterShow: function () {
        $(".fancybox-outer").before($(".fancybox-title"));
    }
});

我们也可能需要这个CSS声明：

.fancybox-title-inside-wrap {
    padding-top: 0 !important;
}

...清除title以上的差距。

对于具有或不具有title属性的锚点，该脚本同样适用。

参见 jsfiddle

Answer 2

使用.prepend（）http://api.jquery.com/prepend/

$('.fancybox-inner').prepend(customContent);

图像/图库的Fancybox - 在图像上方添加内容

2 个答案: