POPUP IMAGE AUTO-REDIMENSIONNABLE

25.10.2005

Voilà un petit bout de code tout simple et qui peut être bien pratique pour vos galeries d'images en ligne. Il s'agit d'ouvrir une fenêtre popup contenant une image (par exemple la version haute définition d'une image de galerie photo), et d'adapter automatiquement la taille du popup à la taille de l'image...

Comment ça marche ?
Simplement une petite fonction javascript à insérer dans le head du popup, qui va détecter la taille de l'image, puis redimensionner le popup en conséquence. La fonction est lancée à la fin du chargement du code du popup, puis toutes les 0,5 secondes, afin de palier au temps de téléchargement de l'image (sinon, la retaille du popup se fait plutôt mal ;-)

Le code...
Voici le code à insérer dans le head de votre popup :
<script language="javascript">
function resizeFenetre() {
// detection des dimensions de l'image a afficher
largeurImg = document.images['imgFull'].width;
hauteurImg = document.images['imgFull'].height;
// redimensionnement de la taille de la fenetre en fonction des dimensions de l'image
window.resizeTo(largeurImg, hauteurImg);
}
</script>

puis le code à placer en fin de code du popup :
<script language="javascript">
// toutes les 0,5s : mise a dimension du popup (pour palier au temps de chargement de l'image)
testDim = window.setInterval('resizeFenetre()', 500);
</script>

Enfin, n'oubliez pas de compléter la balise IMG de l'image du popup avec l'attribut ID, comme suit :
id="imgFull"

Et le tour est joué...

Un exemple...
Cliquez sur le lien suivant pour ouvrir un popup utilisant le code :
ouvrir popup image

Astuce...
Dans l'exemple, le lien est construit avec une balise <a> classique. Vous pouvez rencontrer des problèmes d'affichage, en particulier si votre volet de favoris, ou d'historique est ouvert. Pour palier au problème, utilisez dans le href de votre balise <a> une fonction javascript "window.open(...)"...

a+ :D