Динамическая ширина 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>
Источник

3 ответа

Решение

Глядя на ваш 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();
  }

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

Источник

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

Источник

Добавлять autoSize к:

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

или же:

fitToView  : true,
Источник
Другие вопросы по тегам