Вызов Fancybox в функции щелчка .on () при сохранении функции галереи

Question

Мне нужно загружать контент с динамической шириной в iframe Fancybox. Чтобы добиться изменения размера iframe для соответствия содержимому, мне нужно передать ширину содержимого вызову Fancybox. Я сделал это, используя следующее:

jQuery('#container').on('click', '.fancybox-iframe', function(e){
    e.preventDefault();

    var iframeWidth = parseInt(jQuery(this).attr('id'));

    jQuery(this).fancybox({
        width           : iframeWidth,
        height          : '100%',
        autoSize        : true,
        fixed           : true,
        type            : 'iframe',
        loop            : false,
        padding         : 0,
        closeBtn        : false,
        afterLoad       : function() {
                            jQuery('body').css('overflow', 'hidden');
        },
        afterClose      : function() {
                            jQuery('body').css('overflow', 'auto');
        },
        helpers         : {title: {type: 'outside'}, overlay: {opacity: 0.8, css: {'background-color': '#FFFFFF'}}, thumbs: {width: 50, height: 50}, buttons: {}}
    });
});

HTML для вышеупомянутого:

<a id="<?php echo $content_width; ?>" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a>
<a id="<?php echo $content_width; ?>" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a>
<a id="<?php echo $content_width; ?>" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a>

Приведенный выше код имеет две проблемы: во-первых, мне нужно дважды щелкнуть гиперссылку, каждый раз, чтобы появилось Fancybox. Вторая проблема заключается в том, что это не работает с атрибутом rel HREF и, следовательно, не отображает контент в виде галереи Fancybox. Чтобы преодолеть проблему галереи, я заменил jQuery(this).fancybox({ на jQuery('.fancybox-iframe').fancybox({. Это сделало работу галерей особенной. Однако теперь Fancybox принимает значение переменной iframeWidth только для первой нажатой ссылки.

Есть идеи, как передать переменную ширины содержимого в Fancybox, а также сохранить функцию галереи? Кстати, я работаю с Fancybox 2.0.5

Answer 1

Если вы используете fancybox v2.x, вам не нужно использовать метод jQuery .on(), поскольку fancybox уже использует " live ", поэтому

  $(".fancybox-iframe").bind('click', function(){
    var iframeWidth = parseInt(jQuery(this).attr('id'));
    }).fancybox({
   //options
    width : iframeWidth,
  });

должен выполнитьТрюк.

ОБНОВЛЕНИЕ :

Я пересмотрел мой код выше, и на самом деле все может быть намного проще, чем ожидалось.

Следующий код позволяет динамически передавать параметр width через ID И с галереей фреймов (всего одним щелчком мыши).Просто добавьте к обратному вызову afterLoad следующее:

jQuery(".fancybox-iframe").fancybox({
 //other API options here
 afterLoad: function(){
  var iframeWidth = parseInt(jQuery(".fancybox-iframe").eq(this.index).attr('id'));
  this.width = iframeWidth
 }
});// fancybox

Обратите внимание, что вам не нужно устанавливать опцию width.

OPTION 2

В качестве альтернативы вы также можете динамически передавать параметр width, используя атрибут data-width (если вы используете HTML5 DOCTYPE) вместо ID (и используйте ID, если это важно).Я думаю, что это было бы более элегантным решением.

Ваш HTML должен выглядеть так:

<a data-width="<?php echo $content_width; ?>" id="myID" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a>

, а javascript почти такой же

jQuery(".fancybox-iframe").fancybox({
 //options
 afterLoad: function(){
  var iframeWidth = jQuery(".fancybox-iframe").eq(this.index).data("width");
  this.width = iframeWidth
 }
});// fancybox

У меня естьустановите DEMO с двумя опциями, которые вы можете см. здесь

Последнее примечание: Fancybox использует padding из 15 пикселей, поэтому общая width будет iframeWidth + 30, если вы не установитеопция padding до 0.

Answer 2

Это то, что я использовал для colorbox (еще один лайтбокс) и может дать вам представление о том, что вам нужно сделать:

...
onComplete: function () {
   var container = $('.cboxIframe').contents().find(".innerElementWithWidthAndHeight");
   $.fn.colorbox.myResize(container.width() + 20, container.height() + 20);
}