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

使用Fancybox v 2+并希望在图像/项目上方添加一行简单的内容。我可以在下面添加内容和图像/内容，不会遇到麻烦

这是我的小提琴：

代码：

$（“.fancybox”）.fancybox({
openEffect:“褪色”，
特效：“褪色”，
鼠标轮：是的，
填充：10，
closeBtn:false，
beforeShow:函数（）{
如果（本标题）{
//新线
this.title+='
'；
//添加tweet按钮
此.title+=''；
//添加类似FaceBook的按钮
此.title+=''；
}
},
afterShow:function（）{
//渲染tweet按钮
twttr.widgets.load（）；
var customContent=“我的自定义内容”
$（'.fancybox-inner'）.append（customContent）；
},
助手：{
标题：{
类型：“内部”
}
}  
});

基本上，我希望customHTML DIV在渲染时位于图像上方。如何实现这一点？

使用.prepend（）

---

只是为了好玩。。。您可以在

afterShow

回调中使用

.before（）

方法，用

内容切换
标题的位置，如：

。。。清除
标题上方的间隙

该脚本对于具有或不具有
title
属性的锚定同样有效

请参阅
谢谢，它将内容放在上面，但破坏了鼠标滚轮功能（滚动鼠标滚轮会导致图像库向前/向后），我认为您需要rel=“galleryName”才能使鼠标滚轮工作（从原始小提琴中缺失）。但肯尼迪的解决方案看起来更完整：）
$(".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'
            }
        }  

    });

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

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

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