Aujourd'hui tout bon site de photos de voyage possède un script de galerie (
simple viewer
en flash ou
smooth gallery en javascript sont
de très bon exemples. Ces scripts souvent faciles à mettre en place n'en restent pas moins obscurs aux personnes
voulant comprendre leur fonctionnement interne. Cet article nous montre comment mettre en place une galerie
assez simple basée autour de code javascript / css :
- Accepte un tableau d'images / descriptions en entrée
- Possède un système de preloader pour les images
- Effectue un effet de fading entre les images
- Redimensionne la taille du viewer en fonction des images
Ce script est normalement facile à intégrer dans des pages web existantes. Vous pouvez le modifier pour qu'il
s'intègre mieux dans le design de votre site!
Le plus compliqué pour ce genre d'application et de pouvoir proposer une interopérabilité avec un maximum
de navigateurs. La fonction de fading par exemple va devoir utiliser un attribut CSS différent suivant le
navigateur utilisé :
- Le standard CSS : object.style.opacity ( valeur entre 0 et 1 )
- Sous mozilla : object.style.MozOpacity ( valeur entre 0 et 1 )
- Sous Konqueror : object.style.KhtmlOpacity ( valeur entre 0 et 1 )
- Sous Internet Explorer : object.style.filter = 'alpha(opacity=)' ( valeur entre 0 et 100 )
Le standard restant
object.style.opacity qui n'en doutons pas sera implémenté un jour sur tous les
navigateurs !
Commencons par créer un tableau à deux dimensions qui va contenir la liste des images du slideshow ainsi que
leur description :
Il est facile de récupérer le nombre d'images :
Pic.length, l'URL de la première image :
Pic[0][0]
ou encore sa légende :
Pic[0][1]. Intéressons nous maintenant au preloader! Il va nous permettre de ne
commencer le fade out qu'une fois que nous sommes certain de pouvoir afficher l'image suivante ( cela évite
un fade in vers une image qui n'est pas encore dans le cache et qui peut donc mettre du temps à apparaitre ).
Ce bout de code lance le téléchargement de l'image dans la variable Loader et vérifie toutes les 200ms si l'image
a pu être récupérée. Une fois le téléchargement complet de l'image validé, il l'affiche. La variable Loader contient
outre le status de téléchargement deux propriétés très intéréssantes :
width et
height qui permettent
de déterminer la taille de l'image. ( Attention au cache du navigateur si vous changez les images en conservant un
nom identique ). Regardons de plus pres la fonction de shading :
J'ai trouvé ce code compatible avec un grand nombre de navigateurs sur le site
Cross-browser BlendTrans
Filter JavaScript. Il suffit de lui passer l'opacité à appliquer à l'objet ( entre 0 et 100 ) et l'ID de l'object
sur lequel appliquer la transparence en paramètre. Pour faire un effet de fondus utilisons des timers :
Ce code effectue un fondus 0% -> 100% de l'objet possedant l'ID
MonObject.
Pour voir ce script en action,
cliquez ici!, pour le télécharger,
cliquez ici.
Jean-Damien POGOLOTTI© 2k6-2k7 | Design // Code
Qui suis-je?
14°C
63%
1019
Pense-bete, bloc-note ou au choix carnet de réflexions. Probablement peu marrant, jamais à jour. En ligne quand le coeur lui en dit, lié par intermittence avec le reste du monde. Ce site est une expression de la pensée analytique de son auteur.
