Diaporama en flash

le 12 février 2008

Pour créer un diaporama au format flash, il faut un lecteur et un fichier

Nous allons avoir le lecteur (ici c'est dewslider.swf) un fichier xml qui doit être au même niveau.

Le fichier xml a pour but de définir le chemin des images, la description des images éventuellement et de customiser le lecteur.

Télécharger cette application et obtenir toutes les informations sur le site d'alsacréations.


Diaporama Google Picassa

le 4 novembre 2008

Pour insérer un diaporama avec des photos contenues dans Picassa Album Web il faut avoir un compte dans Google et dans Picassa Album Web.

Pour avoir connaître les code à insérer dans la page web il faut se mettre dans la version américaine de Picassa Album Web (Cette partie n'est pas disponible avec la version française).

Dans "parametre" changer dans la fenêtre "Préférence langue" choisissez "English (United States)"

Ensuite dans la page qui montre les photos du diaporama souhaité cliquez :

embed_picasa

Puis récupérer le code de la fenêtre jaune

Ce code n'est pas valide pour avoir une page conforme w3c.

Pour cela il faut utiliser le code suivant :

 Code XHTLM 
<object type="application/x-shockwave-flash"
data="http://picasaweb.google.com/s/c/bin/slideshow.swf"
width="400" height="267" id="VideoPlayback">
<param name="movie"
value="http://picasaweb.google.com/s/c/bin/slideshow.swf" />
<param name="FlashVars" value=" Valeur de "embed" " />
</object>

Il faut récupérer la valeur de flashvars et la copier dans le code valide w3c après avec modifier "&" en "&amp ;"

Vous obtenez l'exemple suivant :


Lytebox, une galerie image/slideshow en javascript

le 5 novembre 2008

Lytebox est un slideshow Javascript, c'est une version simplifiée de lightbox.

Ainsi Lytebox est plus simple et plus léger toutes les fonctions sont dans un seul fichier.js.

Attention toutefois si vous souhaité avoir une page validée en XHTLM Strict il faut supprimer "type="text/javascript"" dans le code javacript à insérer dans la partie head.

Lytebox permet la visualisation d'une seule image (par exemple pour agrandir une image), réaliser des diaporamas manuel ou automatique. De plus sur chaque image il y a la possibilité d'avoir une description (caption).

Place Royal
Le chateau de Frontenac Rue du petit Champlain Le château de Frontenac La gare du Palais

Télécharger et captuer les codes Lytebox

A voir aussi lightbox pour comparer


Diaporama en CSS uniquement

le 7 novembre 2008

Ce diaporama est réalisé uniquement avec un codage CSS. Il est inspiré des travaux de Stu Nicholls et de son site CSS Play.

Pour réaliser ce diaporama il faut :


L'Auvergne

juin 2007


Les images avec jQuery

le 20 janvier 2009

Avec le fichier de base jQuery (dernière version à télécharger sur ce site) et un plugin jQuery nous réalisons des applications dynamiques.

Première application : Images shuffle

Cette application est une version légèrement modifiée de jQuery Cycle Plugin.

Le plugin "jquery.cycle.all.js" est à télécharger sur ce site.

image1 image2 image3

Deuxième application : Images curtainX

image1 image2 image3

© Copyright 2007, André Willemijns WebSite

Valid XHTML 1.0 Strict