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

Имам IFrame, който се отваря чрез Fancybox 2, който възпроизвежда видеоклип:

HTML:

<a class="fancybox-video" href="/bg/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 въз основа на съдържанието? С моя тестов файл, който е около 400px широк, самият fancybox е настроен на 830/800px широк (външната и вътрешната ширина): http://img528.imageshack.us/img528/3872/fancyboxwidth.png

autoSize и fitToView нямат ефект. Няма CSS или код на страницата IFrame, който задава ширина по подразбиране. Ако наложа ширина в кода на 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% ширина на браузъра или вградената рамка, която го съдържа, освен ако не сте задали конкретни css размери на маркера.   -  person JFK    schedule 14.06.2012
comment
@Zuul: Да, в същия домейн е - дори същата папка в домейна.   -  person shimmoril    schedule 14.06.2012
comment
@JFK: Intro-file.cfm има обща HTML структура. Добавих кода за страницата intro-file.cfm към моя въпрос. Благодаря и за пояснението относно опита за ширина на тялото.   -  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

Единственият начин според мен е да направя това,

DateTime dt = GetYourDateTime();
string uniqueID = dt.Year + "" + dt.Month + "" + dt.Day + "" + dt.Hour + "" + dt.Minute + "" + dt.Second + "" + dt.Millisecond + "";

след това можете да го конвертирате във всякакви числови типове, т.е. десетичен, дълъг и т.н

АКТУАЛИЗИРАНО

int a = 2000;
int b = 3000;
DateTime dt = GetYourDateTime();
    string uniqueID = a + "-" + b+ "-" +dt.Year + "" + dt.Month + "" + dt.Day + "" + dt.Hour + "" + dt.Minute + "" + dt.Second + "" + dt.Millisecond + "";

За януари-11-2013: 2000-3000-2013011100000000

За ноември-1-2013: 2000-3000-2013110100000000

- 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
Нито една от тези опции не е в документацията за v2: 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