Fancybox 2 Динамическая ширина в зависимости от размера содержимого

У меня есть IFrame, который открывается через Fancybox 2, который воспроизводит видео:

HTML:

<a class="fancybox-video" href="/user/intro-file.cfm" rel="file_name" title="View Video">File Name</a>

Javascript:

$("a.fancybox-video").fancybox({
    scrolling   : 'no', 
    type        : 'iframe', 
    helpers     : { 
        title: null 
    }
});

Видео загружено пользователем, поэтому я не знаю его размера. В конечном итоге я буду устанавливать maxHeight и maxWidth в Fancybox, но я удалил их для упрощения устранения неполадок.

Как установить ширину Fancybox в зависимости от содержимого? В моем тестовом файле, который имеет ширину около 400 пикселей, сам fancybox имеет ширину 830/800 пикселей (внешняя и внутренняя ширина): http://img528.imageshack.us/img528/3872/fancyboxwidth.png

autoSize и fitToView не действуют. На странице IFrame нет CSS или кода, который устанавливает ширину по умолчанию. Если я установлю ширину в коде Fancybox, это сработает, но поскольку мой контент динамический, он не будет работать для действующей системы.

Я также попытался адаптировать функцию из другого вопроса, касающегося изменения размера высоты, но это тоже не сработало:

beforeShow  : function() { 
    $('.fancybox-iframe').load(function() { 
        $('.fancybox-inner').width($(this).contents().find('body').width()); 
    }); 
}

Изменить: добавлен код страницы IFrame, которую я пытаюсь загрузить в Fancybox:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <body>
        <cfoutput>
            <script type="text/javascript" src="/Javascript/jwplayer.js"></script>
            <script type='text/javascript'> 
                var max_video_width = 924;
                jwplayer("preview").setup({
                    flashplayer: "/VideoPlayer/player.swf",
                    controlbar: "bottom",
                    file: "/videos/file_name",
                    stretching: 'file_name',
                    autostart: true,
                    events: {
                        onMeta: function(event) {
                            if (get_meta) {
                                if(event.metadata.width != undefined && event.metadata.height != undefined) {
                                    get_meta = false;
                                    if (event.metadata.width > max_video_width) {
                                        var new_height = (max_video_width / (event.metadata.width / event.metadata.height))  
                                        jwplayer("preview").resize(max_video_width,new_height);
                                        jwplayer("preview").stop();
                                        $('##preview_wrapper').width(max_video_width).height(new_height);
                                    } 
                                    else {
                                        jwplayer("preview").resize(event.metadata.width,event.metadata.height);
                                        jwplayer("preview").stop();
                                        $('##preview_wrapper').width(event.metadata.width).height(event.metadata.height);
                                    }
                                    $('.loading-video').slideUp('fast',function(){$('.loading-video').remove()});
                                }
                            }
                        }
                    }
                });
            </script>
        </cfoutput>
    </body>
</html>

dynamic iframe jquery sizing fancybox
person shimmoril    schedule 13.06.2012    source источник
comment
Содержимое этого Iframe принадлежит к тому же домену?   -  person Zuul    schedule 14.06.2012
comment
The video is user-uploaded, so I don't know the size ... есть ли в видео хотя бы селектор, который можно определить? .... есть ли у intro-file.cfm общая структура html или она меняется от пользователя к пользователю? ... в этом случае вы должны показать визуализированный html-код intro-file.cfm.   -  person JFK    schedule 14.06.2012
comment
Этот $(this).contents().find('body').width() никогда не будет работать, потому что body всегда будет отображаться при 100% ширине браузера или содержащего его окна iframe, если только вы не установили для тега определенные размеры css.   -  person JFK    schedule 14.06.2012
comment
@Zuul: Да, он в том же домене - даже в той же папке в домене.   -  person shimmoril    schedule 14.06.2012
comment
@JFK: intro-file.cfm имеет общую структуру HTML. К своему вопросу я добавил код для страницы intro-file.cfm. Спасибо за разъяснения по поводу попытки body.width.   -  person shimmoril    schedule 14.06.2012

Ответы (3)


arrow_upward
5
arrow_downward

Просмотр вашего intro-file.cfm файла проясняет ситуацию.

Если ваш код внутри файла работает нормально, я думаю, вы можете получить размеры из контейнера preview_wrapper.

Всего два вопроса:

  • если вы, например, используете $ ... в $('.loading-video').slideUp(), не следует ли вам включать файл jquery.js в свой intro-file.cfm файл?
  • Правильно ли это двойное ## перед селектором в $('##preview_wrapper').width()?

Предполагая, что все работает нормально, попробуйте включить в свой сценарий fancybox:

  scrolling: "no", // optional to avoid scrollbars inside fancybox
  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('#preview_wrapper').width();
   this.height = $('.fancybox-iframe').contents().find('#preview_wrapper').height();
  }

... чтобы получить размеры из обертки плеера.

person JFK    schedule 14.06.2012
comment
# 1 - jquery фактически включается через cfinclude, я просто пропустил его как не имеющий отношения к целям моего вопроса. №2 - Это правильно, потому что я кодирую в ColdFusion, который использует # в качестве специального символа. Ваш код работает отлично! Спасибо, что помогли мне разобраться с этим. - person shimmoril; 14.06.2012
comment
Одно замечание для тех, кто смотрит на это, - будущее - я закончил тем, что добавил немного отступов к рассчитанной высоте / ширине, поскольку белая граница Fancybox была не совсем одинаковой по всему моему проигрывателю: this.width = $ (' .fancybox-iframe '). contents (). find (' # preview_wrapper '). width () + 15; - person shimmoril; 14.06.2012
comment
Хороший. Было бы неплохо, если бы я нашел это в своих поисках! - person shimmoril; 15.06.2012

arrow_upward
1
arrow_downward

Ширина iframe в настоящее время не рассчитывается. Возможно, вы могли бы установить ширину / высоту для каждого iframe следующим образом - http://jsfiddle.net/vVKMF/

person Janis    schedule 14.06.2012
comment
Я видел это в своем поиске, но не уверен, как это применимо к моей ситуации. Я мог бы установить высоту / ширину по умолчанию для iframe, но как тогда рассчитать их на основе содержимого в функции Fancybox? - person shimmoril; 14.06.2012

arrow_upward
-1
arrow_downward

добавить autoSize в:

$("a.fancybox-video").fancybox({
    scrolling   : 'no', 
    type        : 'iframe',
    autoSize    : true, 
    helpers     : { 
        title: null 
    }
});

or :

fitToView  : true,
person mgraph    schedule 13.06.2012
comment
Ни один из этих вариантов отсутствует в документации версии 2: fancyapps.com/fancybox/#docs - person shimmoril; 14.06.2012
comment
@shimmoril попробуй autoSize:true, - person mgraph; 14.06.2012
comment
@shimmoril или fitToView : true, - person mgraph; 14.06.2012
comment
Из моего исходного вопроса: autoSize и fitToView не действуют. - person shimmoril; 14.06.2012