Adapter la hauteur d'une Shadowbox à son contenu
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);
}