Une manière simple et légère de réaliser un slishow, ou diaporama, à l'aide de JavaScript, avec JQuery et un peu de CSS pour personnaliser votre page web ou présenter vos images. Comment faire ce slideshow sur l'ensemble d'un site, comment placer un diaporama dans une page web en quelques explications avec souces et démonstration.
La question est récurente dans les forums. Les explications et données techniques sont mises dans le blog pour vous en montrer toutes les possibilités. Vous pouvez voir ici le résultat du codage en direct, copier les sources et résaliser votre slideshow personnel en quelques clic de souris.
De plus tout ce code est optimisé pour les moteurs de recherche qui prendront alors facilement vos images, tout en renforçant la présence de vos mots clés dans votre page, il suffit ensuite de cliquer sur les boutons pour faire défiler les images et lire les commentaires.
Slideshow avec Jquery,deux fichiers JS à placer, une touche de css en plus pour animer les images et réaliser un très beau slideshow démonstration:
Pour faire un joli slideshow, il faut aussi penser aussi aux moteurs de recherche .... 
Utilisation de la CSS ou cascading style sheet pour le look .... 
Les commentaires utilisent la propriété "span" de la CSS. 
Vos images sont révélées par leur nom, la balise 'alt' et les commentaires ajoutés 
Léger et optimisé pour les moteurs de recherche, ce petit script est super ! 
JavaScript, Jquery, CSS et de belles images pour vos pages web sans limite de nombre ... On crée et on appelle la fonction du slideshow avec 2 fichiers en JavaScript et une petite touche de css pour agrémenter le tout:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.slidertron-0.1.js"></script>
<style type="text/css">
@import "slidertron.css";
</style>
à placer dans la partie 'head' de la page
Le code a placer dans la page pour faire fonctionner le slideshow:
<div id="slideshow">
<div id="foobar">
<div id="col1"><a href="#" class="previous"> </a></div>
<div id="col2">
<div class="viewer">
<div class="reel">
<div class="slide"><img src="images/penser.jpg" width="726" height="486" alt="optimiser pour les moteurs de recherche" /> <span>Pour faire un joli slideshow, il faut aussi penser aussi aux moteurs de recherche ....</span> </div>
<div class="slide"><img src="images/cascades-du-saut-du-loup.jpg" width="726" height="486" alt="cascades" /> <span>Utilisation de la CSS ou cascading style sheet pour le look ....</span> </div>
<div class="slide"><img src="images/flamand-rose.jpg" width="726" height="486" alt="flamand rose" /> <span>Les commentaires utilisent la propriété "span" de la CSS.</span> </div>
<div class="slide"><img src="images/poisson-napoleon.jpg" width="726" height="486" alt="poisson napoléon" /> <span>Vos images sont révélées par leur nom, la balise 'alt' et les commentaires ajoutés</span> </div>
<div class="slide"><img src="images/rose-rouge.jpg" width="726" height="486" alt="rose rouge" /> <span>Léger et optimisé pour les moteurs de recherche, ce petit script est super !</span> </div>
<div class="slide"><img src="images/villa-ephrussi-de-rothschild.jpg" width="726" height="486" alt="villa" /> <span>JavaScript, Jquery, CSS et de belles images pour vos pages web sans limite de nombre ...</span> </div>
</div>
</div>
</div>
<div id="col3"><a href="#" class="next"> </a></div>
</div>
<script type="text/javascript">
$('#foobar').slidertron({
viewerSelector: '.viewer',
reelSelector: '.viewer .reel',
slidesSelector: '.viewer .reel .slide',
navPreviousSelector: '.previous',
navNextSelector: '.next',
navFirstSelector: '.first',
navLastSelector: '.last'
});
</script>
<!-- end -->
</div>
à placer dans la partie body de la page, là où l'on désire avoir le slideshow.
Les sources des trois fichiers nécessaires (en *.txt), faîtes un copier/coller et enregistrez les avec la bonne extension:
Aucune limite dans le nombre de diapos et tout est paramètrable via la CSS.
Prenez le temps de tester ce slideshow pour voir s'il vous convient, prenez le temps de regarder le code pour comprendre sa personnalisation.
Si cela vous plait, pas de problème, mais n'en abusez pas ! Et si vous avez des problèmes, des ajouts, des questions ou autres demandes, n'hésitez pas , en cliquant sur ce lien, à les mettre dans les commentaires de l'article "technique", la réponse arrivera assez vite . @ bientôt :-)