Fancybox 2 Dynamique de la Largeur en Fonction de la Taille du Contenu

J'ai une IFrame être ouvert via Fancybox 2 qui joue une vidéo:

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 
    }
});

La vidéo est téléchargée, donc je ne sais pas la taille. Je vais mettre en place une maxHeight et maxWidth sur la Fancybox, mais finalement je l'ai enlevé pour faciliter le dépannage.

Comment puis-je régler la largeur de la Fancybox sur la base du contenu? Avec mon fichier de test, qui est autour de 400px de large, la fancybox lui-même est en cours de mise à 830/800px de largeur (externe et interne de largeur): screencap de trop-large fancybox http://img528.imageshack.us/img528/3872/fancyboxwidth.png

autoSize et fitToView n'ont aucun effet. Il n'y a pas de CSS ou le code de l'IFrame page qui est le réglage par défaut de la largeur. Si je force une largeur dans la Fancybox code, il fonctionne, mais depuis que mon contenu est dynamique, il ne fonctionnera pas pour le système live.

J'ai aussi essayé de l'adapter à une fonction à partir d'une autre question portant sur la hauteur de redimensionnement, mais il ne fonctionne pas non plus:

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

Edit: Ajouté le code de l'IFrame page que je suis en train de charger dans la 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>
  • Le contenu de ce Iframe à partir du même domaine?
  • The video is user-uploaded, so I don't know the size ... la vidéo ont au moins un sélecteur que vous pouvez identifier? .... le intro-file.cfm ont en commun une structure html ou varie-t-elle d'un utilisateur à l'utilisateur? ... vous devez montrer le rendu du code html de intro-file.cfm dans ce cas.
  • Cette $(this).contents().find('body').width() ne fonctionnera jamais car body toujours rendu à 100% de la largeur du navigateur ou de l'iframe qui contient, sauf si vous avez défini une feuille de style spécifique dimensions de la balise.
  • Oui, c'est dans le même domaine même dossier sur le domaine même.
  • L'intro-fichier.cfm n'ont en commun une structure HTML. J'ai ajouté le code pour l'intro-fichier.page cfm à ma question. Merci pour les précisions sur le corps.largeur de l'essayer aussi bien.
InformationsquelleAutor shimmoril | 2012-06-13
  1. 5

    Regardant votre intro-file.cfm fichier rend les choses plus claires.

    Si votre code dans le fichier fonctionne très bien, je pense que vous pourriez obtenir les dimensions de la preview_wrapper conteneur.

    Juste deux questions:

    • si vous utilisez $ ... dans $('.loading-video').slideUp() par exemple, ne devriez-vous pas être, y compris la jquery.js fichier à l'intérieur de votre intro-file.cfm fichier?
    • est cette double ## avant le sélecteur dans $('##preview_wrapper').width() correct?

    En supposant que tout fonctionne bien, alors essayez d'inclure dans votre script 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();
}

    ... pour obtenir les dimensions de la cape.

    • #1 - Le jquery est inclus via un cfinclude, j'ai juste omis comme non pertinent pour les fins de ma question. #2 - C'est juste parce que je suis de codage dans ColdFusion qui utilise # comme un caractère spécial. Votre code fonctionne parfaitement! Merci de m'aider à travailler à travers cela.
    • Une remarque pour ceux qui cherchent à c'est l'avenir - j'ai ajouter un peu de rembourrage pour le calcul de la hauteur/largeur, depuis le blanc Fancybox frontière n'était pas tout à fait la même chose tout le chemin autour de mon lecteur: ce.largeur = $('.fancybox-iframe').contenu().find('#preview_wrapper').width() + 15;
    • Drôle, j'ai suggéré qu'ici stackoverflow.com/a/10776520/1055987
    • Nice. Cela aurait été bien si j'avais trouvé qu'un seul dans ma recherche!
    InformationsquelleAutor JFK
  2. 1

    Iframe width n'est actuellement pas calculé. Peut-être vous pouvez définir la largeur/hauteur de chaque iframe, ce http://jsfiddle.net/vVKMF/

    • J'ai fait voir que, dans ma recherche, mais je ne suis pas sûr de savoir comment elle s'applique à ma situation. Je pourrais définir la valeur par défaut de la hauteur/largeur de l'iframe, mais alors comment pourrais-je le calculer sur la base du contenu dans la Fancybox fonction?
    InformationsquelleAutor Janis
  3. -1

    ajouter autoSize à :

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

    ou :

    fitToView  : true,
    • Aucune de ces options se trouvent dans la v2 de la documentation: fancyapps.com/fancybox/#docs
    • essayez autoSize:true,
    • ou fitToView : true,
    • À partir de ma question initiale: "autoSize et fitToView n'ont aucun effet."
    InformationsquelleAutor mgraph