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 !!

jeudi 15 janvier 2009

Système de mise en avant de contenu en javascript (jQuery)

Bonjour.
Voilà la deuxième création que je publie. Enfin, parlons plutot de re-création puisque ce système est déjà bien exploité sur plusieurs sites (DVDRAMA ou Koh-Lanta pour ne citer que ceux sur lesquels j'ai travaillé).
Il existe plusieurs techniques pour le faire. J'étais parti au début sur du javascript développé moi-même. Puis j'ai appris à utiliser la librairie jQuery, très pratique et que je recommande à tous les développeurs JS (il existe d'ailleurs une doc en français très bien faite, accompagnée de tutoriaux très accessibles à cette adresse).
D'autres le font en Flash (moins accessible je trouve, et surtout moins bon en terme de référencement).

Donc.. mon système (que j'appellerai simplement "multi-unes") permet d'afficher quatre articles (dans la configuration de base, mais on peut changer ça, pourquoi pas). Pour naviguer entre chacun, deux possibilités :

La première est de les laisser alterner automatiquement (là encore le délai avant le changement d'article est paramétrable).
La deuxième est de survoler la vignette correspondante (vous noterez le superbe effet pour la mise en valeur des vignettes ;).

Bref, du classique, pas innovant pour un sou, mais je tenais à créer un script du genre, histoire de dire : "Je sais faire...".

Voilà le lien pour y accéder : http://philippemouchel.fr/multiune.php.
Et un aperçu en image :

mardi 13 janvier 2009

Maquette XHTML Strict 1.0 et CSS 2.1

Mon premier article pour vous montrer une maquette que j'ai fait pour m'entrainer.
Je l'ai trouvé sur un forum, récupéré et refait à ma sauce. Le code est valide W3C.

C'est par là : http://philippemouchel.fr/4Cs/

En voila un petit aperçu :

mardi 6 janvier 2009

Ouverture du blog Scripts En Vrac

Tout d'abord, bienvenue dans mon nouvel espace d'expression (quoi, j'en fais trop) et bonjour.
Petite présentation : je suis Philippe MOUCHEL, ingénieur d'études et développement, actuellement en mission chez E-TF1 pour monter plusieurs sites (Koh-Lanta, Web Radio LCI ou Dvdrama) mais j'ai également travaillé sur d'autres projets dont le site de vente de prêt-à-porter féminin Monshowroom (mon plus beau projet jusqu'à maintenant), Megapolis ou Redaction Juridique.
Cela fait maintenant plusieurs années que je fais des sites Web (seul ou en équipe selon les missions) et j'ai eu l'occasion de développer ou améliorer des modules qui pourraient être utile à d'autres personnes que moi. Je vais donc les partager ici.
Les scripts seront en plusieurs langages différents (d'où le nom du blog, vous l'aurez compris..). En vrac : PHP, Javascript (et Ajax), HTML (ou XHTML) et CSS.
Ce sont actuellement les langages que j'utilise pour mes sites, mais pourquoi pas d'autres pour plus tard..
Enfin, on en est pas là. Place au contenu !!