在一个Fancybox画廊中使用不同类型的标题

问题描述

今天，我做了一个主题，因为我对插件Fancybox 2.0遇到了问题( http://fancyapps.com/fancybox/).

I make a topic, today, because I've a problem with the plug-in Fancybox 2.0 (http://fancyapps.com/fancybox/).

实际上，我想根据fancybox中当前的媒体设置不同类型的标题.如果我的Fancybox中有一个iFrame，则标题必须为"outside".否则，如果是其他媒体，标题必须是"over".

In fact, I want to set different types of title, according the media that is currently in the fancybox. If there is an iFrame in my Fancybox, the title must be "outside". Else, if it's other media, the title must be "over".

$(".fancybox").fancybox({openEffect: 'elastic',closeEffect: 'elastic',beforeShow: function() {
        share_buttons_fancybox = '<div class="center" style="margin-top:10px;"><div class="bouton_social"><div class="fb-like" data-href="' + $(this.element).attr('href') + '" data-width="90" data-layout="button_count" data-show-faces="false" data-send="false"></div></div><div class="bouton_social"><a href="https://twitter.com/share" data-url="' + $(this.element).attr('href') + '" class="twitter-share-button" data-via="playeronetv" data-lang="fr">Tweeter</a></div><div class="bouton_social"><div class="addthis_toolbox addthis_default_style" addthis:url="' + $(this.element).attr('href') + '"><a class="addthis_counter addthis_pill_style"></a></div><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52248d25116616ca"></script></div></div>';
        if (this.title) {
            this.title += share_buttons_fancybox;
        } else {
            this.title = share_buttons_fancybox;
        }
    },afterShow: function() {
        twttr.widgets.load();
        FB.XFBML.parse();
        addthis.toolbox();
        addthis.toolbox(".addthis_toolbox");
        addthis.counter(".addthis_counter");
    },helpers: {thumbs: {width: 80,height: 45},title: {type: 'over'}},padding: 0})

有什么想法吗? iFrame和其他媒体必须位于同一Fancybox画廊中. :)

Any ideas ? iFrame and others medias must be in the same Fancybox galery. :)

在此先感谢您，感谢我的英语(我是法语):)

Thanks by advance, and sorry for my english (I'm French) :)

推荐答案

您可以使用helpers选项将所有元素的title位置设置为over，将title位置设置为outside iframe 元素仅以这种方式在afterLoad回调内使用jQuery的$.extend()方法:

You can set the title position to over for all elements using the helpers option and set the title position to outside for iframe elements only using the jQuery's $.extend() method inside the afterLoad callback this way :

$(".fancybox").fancybox({
    padding: 0,
    openEffect: 'elastic',
    closeEffect: 'elastic',
    helpers: {
        thumbs: {
            width: 80,
            height: 45
        },
        title: {
            type: 'over' // all media
        }
    },
    afterLoad: function () {
        if (this.type == "iframe") {
            $.extend(this, {
                helpers: {
                    title: {
                        type: 'outside' // iframe only
                    },
                    overlay: {
                        locked: false // needed to fix a bug while closing (can be true or false)
                    }
                }
            });
        }
    }
});

通知，我设置了$.extend()方法内的overlay locked选项，以解决在关闭fancybox时出现的错误:

Notice that I set the overlay locked option inside the $.extend() method to workaround a bug while closing fancybox :

overlay: {
    locked: false
}

如果没有此操作，则覆盖层将不会关闭(需要第二个click才能关闭)

without this, the overlay won't close (requires a second click to close though)

请参见 JSFIDDLE

See JSFIDDLE

这篇关于在一个Fancybox画廊中使用不同类型的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！