Je continu le développement de la bibliothèque WOT. Voici donc un des premiers nés des modules réalisés à l'aide des fonctions WOT de base. Il s'agit d'un grand standard du web : la fenêtre avec contenu scrollable. Si la fonctionnalité n'est pas révolutionnaire, ce petit exercice m'a permis de tester l'efficacité des différentes fonctionnalités élémentaires de la bibliothèque.

Toujours la même adresse : cliquez ici !

Pour la suite, je travaille à intégrer la visionneuse d'images e-mage dans la WOT.

Coming soon ;-)

Dans le top 5 des composants qui reviennent régulièrement dans les sites Internet, on trouve la galerie photos. A force de taper pour une nième fois du code quasi-identique, il m'est apparu opportun de développer un composant avec pour objectif une mise en œuvre ultra simple, facilement paramétrable et adapté à un maximum de configurations. D’où la création d’e-Mage, une galerie photos Internet, projet qui devra évoluer au fil du temps. Voici déjà une version béta exploitable.

e-Mage, c’est quoi ?
Il s’agit d’une visionneuse d’images, au format JPEG. Vous paramétrez ses dimensions, ses couleurs de fond, la taille des icônes de prévisualisation à l’aide d’une interface HTML en ligne. Donc pas besoin d’entrer dans le code ou dans un fichier de configuration. Ensuite, vous placez vos images dans un répertoire dédié de votre site, puis deux petites lignes de code dans votre page Web, et e-Mage s’occupe du reste…

Comment ça marche ?
Quelques pré requis techniques malgré tout : e-Mage utilise des syntaxes PHP. Un serveur PHP, avec bibliothèque GD2 active, doit donc tourner chez votre hébergeur.

Et qu’est-ce qui se passe ?
Une fois configurée, votre galerie va lire automatiquement les images dans le répertoire d’images. Les icônes de prévisualisation sont générées automatiquement et e-Mage s’occupe d’agencer au mieux ces icônes dans votre menu, en fonction des différentes dimensions paramétrées.

Une fois chargée dans un navigateur Web, la galerie ne nécessite pas de rechargement de page. Seules les images sont chargées au fur et à mesure de la consultation, ce qui facilite grandement l’intégration dans une page de site, surtout si cette dernière est ouverte avec passage de variables…

e-Mage ne nécessite pas d’accès à une base de données.
e-Mage reste dans sa version béta dimensionnée pour des galeries à taille raisonnable. Entendez donc par là qu’au delà de 80 images, les temps de chargement peuvent devenir un peu long.

Ce qu’e-Mage ne fait pas… encore…
A venir dans les versions futures : la possibilité d’ajouter des légendes aux images, et de gérer un classement par rubriques, ce qui devrait considérablement augmenter son potentiel de nombre d’images gérées.

Et pour l’installer ?
Rien de plus simple : téléchargez puis décompressez le fichier suivant…

e-MageBETAx1-0.zip

Copiez l’ensemble des fichiers et dossiers dans un dossier que vous dédierez à la galerie sur votre serveur.
Ouvrez le fichier de configuration configuration.php dans un navigateur Web, puis laissez vous guider…

Un exemple en ligne...
Cliquez ici

Bon surf ! ;-)

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')"

etc...

Et voilà, de beaux rollovers prêts à l'emploi !