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(...)"...
Quelques clichés pris au parc éolien de Boulay, près de Metz. Six énormes hélices au sommet d'une colline. Curieusement, je n'ai pas trouvé qu'elles juraient avec le paysage...
Les projets arrivent à la pelle!!! C'est cool. Entre autres, on a rentré officiellement un beau projet de site web à la boite aujourd'hui. Un site de carnets de voyages à travers le monde, dans l'esprit d'un précédent site réalisé sur l'Ethiopie : http://www.dear-ethiopia.com
Il y a de temps en temps des projets bien sympas qui tombent, et apportent une bonne grosse bouffée d'oxygène. Mise en ligne prévue normalement pour la fin de l'année... à suivre...
Si vous appréciez les mélanges de styles, vous aimerez certainement Boum Ba Clash !
Rencontre surprenante entre DJ Click, fondateur de UHT° et Gnawa Njoum Exp, Dj-producteur, et de Rona Hartner, chanteuse, peintre et actrice (Gadjo Dilo), accompagnés de plusieurs musiciens tziganes et français, ce set nous emporte dans une comédie dramatique audio des plus réussie. De Bucarest, DJ Click a rapporté des ambiances, des sons de la ville, qu'il a su marier avec habileté au feu et rires de Rona. Oscillant entre trip-hop tzigane et chants folkloriques, entre scènes de la vie courante et mélodies enjouées, le duo surprend par sa richesse et son incroyable et pourtant improbable osmose.
Créer des rollovers est normalement à la portée de n'importe quel éditeur HTML de base. Cependant, il génère souvent du code à rallonge, obscure et difficile à modifier. Voici donc quelques lignes de codes javascript pour gérer vos rollovers comme un chef, avec pré-chargement des images et tout et tout.
Comment ça marche ? En gros, nous allons créer un code qui va d'abord télécharger les images en mémoire, puis deux petites fonctions permettant de gérer les survols des images (quand la souris entre, et quand elle sort...).
Le code... Allons-y joyeusement ! Insérer d'abord le code suivant dans le head de votre page :
<script language="javascript">
rollImage1on = new Image(150, 100);
rollImage1on.src = "monImageOn1.jpg";
rollImage2on = new Image(150, 100);
rollImage2on.src = "monImageOn2.jpg";
rollImage1off = new Image(150, 100);
rollImage1off.src = "monImageOff1.jpg";
rollImage2off = new Image(150, 100);
rollImage2off.src = "monImageOff2.jpg";
function rollOn(imgName) {
if (document.images) {
imgOn = eval(imgName + "on.src");
document[imgName].src = imgOn;
}
}
function rollOff(imgName) {
if (document.images) {
imgOff = eval(imgName + "off.src");
document[imgName].src = imgOff;
}
}
</script>
Pour adapter le code à votre page, remplacez monImageOn1.jpg par le chemin vers votre première image survol actif, et monImageOff1.jpg par la première image survol inactif. Puis faire de même avec monImageOn2.jpg, etc... Vous pouvez multiplier les lignes ainsi pour obtenir le bon nombre d'images, en prenant soin d'incrémenter les index.
Les chiffres 150 et 100 de new Image(150, 100) correspondent aux dimensions de l'image (largeur et hauteur), que vous pouvez naturellement modifier à votre guise.
Ensuite, il faut adapter la balise <img> sur chacune de vos images, en ajoutant les attributs suivants :
Pour la première image : name = "rollImage1"
onMouseOver = "rollOn('rollImage1')"
onMouseOut = "rollOff('rollImage1')"
Pour la seconde image : name = "rollImage2"
onMouseOver = "rollOn('rollImage2')"
onMouseOut = "rollOff('rollImage2')"
