Galerie jquery autochargée
Je vous propose aujourd’hui une galerie jquery chargée automatiquement.
C’est-à-dire?
Cette galerie charge automatiquement pour vous les images, vous n’avez pas à modifier le code chaque fois que vous voulez en rajouter ou en enlever une. Il suffit simplement de rajouter ou enlever votre fichier image de son répertoire.
Vous devez disposer de php-5 sur votre serveur pour pouvoir vous en servir. C’est un fichier php qui s’occupe d’aller chercher les images et de les redimensionner. Cela signifie que vous n’avez pas à vous soucier de faire coïncider la taille de vos images avec la taille de la galerie.
Attention cependant, la quadrature du cercle n’ayant toujours pas été démontrée, si vous utilisez une image dont le ratio hauteur/largeur est fortement différent de celui de la galerie, l’image sera quelque peu déformée.
Une démonstration est visible ici.
Installation
- Téléchargez la galerie.
- Décompressez-la dans le répertoire de votre choix. Un structure complète est présente dans l’archive, de manière à pouvoir s’en servir comme base. Si vous voulez intégrer la galerie à un site existant, les répertoires qui vous intéresseront sont scripts/kikGallery et css/kikGallery .
- Ouvrez le fichier kikGallery.js initialement présent dans scripts/kikGallery/ et configurez les options au début du fichier pour indiquer le nouveau chemin css et le nouveau chemin scripts (vous n’avez rien à changer si vous avez gardé la structure telle quelle). L’option playing détermine si les galeries défileront automatiquement au démarrage.
- Assurez vous que jquery est inclus dans la page où la galerie sera utilisée. Il est inclus dans la structure d’origine.
Utilisation
- Placez vos images dans le répertoire de votre choix.
- Incluez jquery.js et kikGallery.js dans votre page.
- Faite un lien vers votre répertoire d’image et donnez lui la classe doKikGallery.
Et c’est tout. Le lien, par exemple, <a href=”images/gallery/A” class=”doKikGallery”>gallery</a> sera remplacé par une galerie qui chargera toutes les images présentes dans images/gallery/A. Il est possible d’avoir plusieurs galeries par page, ainsi que plusieurs galeries identiques (attention à la taille de la page, cependant, étant donné que toutes les images sont chargées dedans).
Lorsque javascript est désactivé, le lien initial vers le répertoire d’image garantie l’accessibilité. Le script PHP chargeant les images s’assure de ne charger que les fichiers images (jpg, png, gif et bmp). Vous pouvez donc très bien mettre un fichier index.html dans votre répertoire d’image pour vous assurez du confort des personnes ayant désactivé js.
Compatibilité
Cette galerie a été testée avec succès sur firefox-3, internet-explorer-6, internet-explorer-7, opera-9.52, google-chrome, safari-3.1.2 et epiphany-2.22.3.
Bien entendu, la transparence des boutons PNG ne fonctionne pas sur ie6. Si cela vous pose problème, je vous conseille l’utilisation de unitPngFix.