vendredi 24 avril 2009

Diaporama de photos avec JQuery

Une fois n'est pas coutume, j'ai utilisé JQuery pour faire ce script.
En gros, il affiche une série de photos qui peuvent être issu d'une base de donnée ou encore d'un fichier XML (pour l'exemple, elle sont issues d'un tableau PHP tout ce qu'il y a de plus bête).

Les photos sont affichés par série de 5, qui défilent automatiquement. Une liste des 5 photos (en vignette) permet de naviguer entre les grandes photos en utilisant le plugin Easing de JQuery (qui permet un tas d'animation sympathique pour vos pages). Les boutons situés à gauche et à droite de la liste des vignettes permettent de naviguer entre les séries. Les boutons sont bien sûr désactiver si cliquer dessus n'amène pas sur une page qui affiche des photos.

J'ai pour habitude de faire des scripts compatibles avec IE 6+, Firefox et Safari, mais là, ça ne marche pas sous IE6.

Pour voir, c'est par là : http://philippemouchel.fr/diaporama.php

Et comme d'habitude un petit aperçu :

Le nouveau TF1

Et quand même un petit post pour vous annoncer la disponibilité depuis le jeudi 16 avril du nouveau TF1.fr. Il est tout beau, tout neuf, plus clair, avec énormément de vidéos disponibles (même des séries).

On a même utiliser JQuery, notamment sur la grille TV. Yeah !!

Pour y accéder, cliquez sur le logo TF1 ci-dessous :

TF1.fr

Bloc d'affichage par onglets

Bonjour,
étant assez occupé ces derniers par la refonte du site TF1 (vous savez, celui qui est sorti la semaine dernière), je n'ai pas eu le temps de mettre en ligne de nouveaux scripts.

Voici donc le troisième.
Il s'agit d'un bloc qui affiche plusieurs informations au choix, et entre lesquelles on peut "switcher" au moyen des onglets situés au dessus.
Les onglets sont décorés en utilisant la technique des sprites, qui permet d'appeler en une seule fois des images que l'on aurait appelé en plusieurs fois.
Le script d'animation repose sur JQuery (décidément super pratique) et la seule contrainte que j'ai encore, c'est qu'il faut faire correspondre les id des onglets avec ceux des conteneurs d'informations.
Enfin, je vous laisse regarder le code HTML pour plus de détails. A noter que le Javascript n'est pas externalisé, vous le trouverez donc très simplement aussi.

C'est par là : http://philippemouchel.fr/bloc_contact_js.php



Sur ceux, bonne fin de semaine à tous !!