Adapter la hauteur d'une Shadowbox à son contenu

Tout utilisateur de Shadowbox a eu un jour, j'imagine, besoin de pouvoir faire en sorte que ce dernier adapte sa hauteur à celle de son contenu, qu'il s'agisse simplement d'obtenir un réglage aux petits oignons sans peine ni contrainte, ou de faire en sorte que sa "fenêtre" soit plus grande que le viewport du navigateur, rendant à ce dernier la responsabilité du scroll.

Mes propres recherches à ce sujet étant restées vaines, j'ai mis au point la solution qui va suivre, certes un peu bourrin mais ayant le mérite de fonctionner ! Elle implique d'exécuter du JavaScript dans la page appelante à partir de la Shadowbox elle-même (qui doit donc être une iframe au contenu de laquelle vous avez accès). Démonstration !

Dans la Shadowbox :

<script>

    window.parent.sb_resize(jQuery(document).height());

</script>

Dans la page parente :

function sb_resize(h)

{

    $('#sb-wrapper-inner').height(h);

    $('#sb-container').css('position', 'absolute').width($(document).width()).height($(document).height());

    $(window).on('resize', function() { setTimeout('sb_compute()', 50); }); // petit délai pour s'assurer que notre code sera exécuté après celui de Shadowbox

}



function sb_compute() {

    var new_h = 0;

    $('#sb-player').contents().children().children('body').children().each(function()

    {

        new_h += $(this).height(); // On récupère la hauteur cumulée des enfants du body de l'iframe

    });

    sb_resize(new_h);

}