Use differents types of titles in one Fancybox gal

问题:

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

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})

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

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

回答1:

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)
                    }
                }
            });
        }
    }
});

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

overlay: {
    locked: false 
}

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

See JSFIDDLE