0

使用 Fancybox v 2+ 并希望在图像/项目上方添加一行简单的内容。我可以毫无困难地在下面添加内容和图像/内容。

这是我的小提琴：http: //jsfiddle.net/9FE7Z/

代码：

$(".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 在呈现时位于图像之上。我怎样才能做到这一点？

4

2 回答 2

1

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

$(".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

于 2013-05-22T23:13:41.150 回答
0

使用 .prepend() http://api.jquery.com/prepend/

$('.fancybox-inner').prepend(customContent);
于 2013-05-22T22:06:21.747 回答