Используйте разные типы заголовков в одной галерее Fancybox

Question

Используйте разные типы заголовков в одной галерее Fancybox

0

Сегодня я делаю тему, потому что у меня проблема с подключаемым модулем Fancybox 2.0 (http://fancyapps.com/fancybox/).

Фактически, я хочу установить разные типы заголовков, в соответствии с медиа, которое в настоящее время находится в fancybox. Если в моем Fancybox есть iFrame, заголовок должен быть "снаружи". Иначе, если это другие СМИ, заголовок должен быть "над".

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

Спасибо заранее, и извините за мой английский (я французский) :)

Chris_p1tv 11 нояб. 2013, в 12:23

Источник

Теги:

jquery

fancybox

fancybox-2

1 ответ

Ещё вопросы

JFK · Accepted Answer · 2013-11-13T00-14-00.000Z

Вы можете установить title позицию over для всех элементов с помощью helpers опции и установить title позиции, чтобы outside для IFrame элементов только с помощью JQuery $.extend() метод внутри afterLoad обратного вызова следующим образом:

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

Обратите внимание, что я установил опцию locked overlay внутри $.extend() чтобы обход ошибки при закрытии fancybox:

overlay: {
    locked: false 
}

без этого наложение не будет закрыто (требуется второй click чтобы закрыть)

См. JSFIDDLE