Slideshow en html / javascript avec jquery
Soyez le premier à donner votre avis sur cette source.
Snippet vu 11 619 fois - Téléchargée 17 fois
Contenu du snippet
Ce code source est tiré d'un article de mon blog technique présentant la réalisation de deux slideshow (diaporama). La première partie nous ammène a la réalisation de slides en vu de créer un systême de news dynamique et visuellement enrichi tout en gardant un code simple et léger.
La seconde illustre un concept un tout petit peu plus dur, permettant de créer un damier d'images (principalement en vue de créer un album photo ou un nuage de tags sous forme immagée).
IMPORTANT: afin d'aller sur l'article, merci de vérifier qu'il n'y a pas d'espace entre les tirets du site. Il semble y avoir un petit problème dans le systême de description lié a l'envoi d'une source...
http://www.codeyourweb.org/realiser-un-slideshow-en-html-javascript-et-jquery/
PS: Il m'est impossible de poster tout le code (taille du Zip limité a 1Mo), néanmoins vous pourrez trouver le code source complet a l'adresse: http://www.codeyourweb.org/test/simpleSlideshow.zip
La seconde illustre un concept un tout petit peu plus dur, permettant de créer un damier d'images (principalement en vue de créer un album photo ou un nuage de tags sous forme immagée).
IMPORTANT: afin d'aller sur l'article, merci de vérifier qu'il n'y a pas d'espace entre les tirets du site. Il semble y avoir un petit problème dans le systême de description lié a l'envoi d'une source...
http://www.codeyourweb.org/realiser-un-slideshow-en-html-javascript-et-jquery/
PS: Il m'est impossible de poster tout le code (taille du Zip limité a 1Mo), néanmoins vous pourrez trouver le code source complet a l'adresse: http://www.codeyourweb.org/test/simpleSlideshow.zip
Source / Exemple :
var cursor = -1;
var ended = false;
var slides = [{"title":"Microsoft Internet Explorer","image":"logoIE.png","description":"Internet Explorer 10 exploite la puissance insoupçonnée de votre PC","url":"http://windows.microsoft.com/fr-FR/internet-explorer/download-ie"},
{"title":"Google Chrome","image":"logoChrome.png","description":"Un navigateur web rapide et gratuit","url":"http://www.google.fr/intl/fr/chrome/browser/"},
{"title":"Mozilla Firefox","image":"logoFirefox.png","description":"Différent par nature","url":"http://www.mozilla.org/fr/firefox/"},
{"title":"Opera","image":"logoOpera.png","description":"À la découverte du Web","url":"http://www.opera.com/fr/"},
{"title":"Apple Safari","image":"logoSafari.png","description":"Le meilleur moyen de lire sur le Web","url":"http://www.apple.com/fr/safari/"}
];
var animation = null;
$('document').ready(function(){
intervalLoader();
animation = setInterval("intervalLoader()",5000);
//manually change slide
$('#slides li').click(function(){
if(!ended){
ended = true;
clearInterval(animation);
}
$('#slides li').eq(cursor).removeClass('selected');
cursor = $(this).index();
changeSlide(cursor);
});
// clicks event
$('#imgSlide, #slideText, #slideTitle').click(function(){
window.open(slides[cursor]['url'],'_blank');
clearInterval(animation);
});
});
// preloading image
function preloadSlide(obj){
var pic = new Image();
pic.src = "images/" + obj['image'];
return pic;
}
function changeSlide(index){
// current li change style
$('#slides li').eq(index).addClass('selected');
$('#slides li').eq(index - 1).removeClass('selected');
// disappear effect
$('#slideTitle').fadeOut(400);
$('#slideText').fadeOut(400);
$('#imgSlide').fadeOut(600, function(){
// change slide
var nextPic = preloadSlide(slides[index]);
$('#imgSlide').attr('src', nextPic.src);
$('#slideTitle').html(slides[index]['title']);
$('#slideText').html(slides[index]['description']);
// appear effect
$('#slideTitle').fadeIn(400);
$('#slideText').fadeIn(400);
$('#imgSlide').fadeIn(400);
});
}
function intervalLoader(){
if(cursor < slides.length - 1){
cursor++;
}else{
cursor = 0;
clearInterval(animation);
}
if(!ended){
changeSlide(cursor);
}
}
A voir également
- Slideshow en html / javascript avec jquery
- Html array - Conseils pratiques -PHP
- Récupérer données json (javascript) - Conseils pratiques -Javascript
- Javascript poo - Conseils pratiques -Javascript
- Base de données javascript - Conseils pratiques -Javascript
- Javascript html - Conseils pratiques -Javascript
5 juin 2013 à 13:31
Tout d'abord merci pour ce retour d'expérience. Même s'il est très critique il permettra d'améliorer certains points ou je n'ai pas été minutieux je l'avoue. Néanmoins il serai plutôt pas mal de mettre un peu d'eau dans son vin parfois...
En effet quand on ne se contente que de ne faire des critiques (sur un total de 11 commentaires en tout sur codes-sources.com) et que l'on ne poste aucune source ni tutoriel, la réponse est très vite vue: "la critique est aisée mais l'art est difficile".
Je veux bien concevoir que la seconde partie n'est pas un slideshow a proprement dit, mais néanmoins il trouve parfaitement (a mon sens) sa place dans l'exemple. Il s'agit ici de réutiliser les notions vues dans la première partie sous une autre forme mais dans un même but: afficher du contenu nouveau (news/tags/contacts...) de façon dynamique visuellement. Le but ici EST de ne pas trop modifier le code pour passer d'un exemple simple a quelque chose d'un peu "différent" et atypique pour une représentation de contenu dynamique...
Pour les points que je corrigerai sous peu pour améliorer le code:
- Enlever le thumbs.db du zip (petite coquille je l'avoue ^^)
- remplacer le script language="javascript" pour etre un peu moins obsolète sur la syntaxe (bien que cela fonctionne malgré tout comme cela...)
Pour les points dont je ne tiendrai pas compte:
- retirer la seconde partie (damier) pour les raisons énumérées précédemment.
- le format d'images PNG est je suis d'accord peu approprié mais de la a en faire une critique, on reste dans un exemple et non pas dans un cas d'exploitation.
- ce qu'il ya autour du code est là (au cas où vous ne l'aurriez pas compris) pour illustrer le rendu dans un cas concret plutôt qu'en plein milieu d'une page blanche toute vide. On peut considérer cela comme une petite maquette pour habiller le tout, et même si elle est inutile pour l'exemple, elle permet de s'immaginer un rendu en production)
5 juin 2013 à 09:54
Il serait quand même plus astucieux de séparer les deux sujets, non ?
En ce qui concerne les "démonstrations"...
Tout d'abord, aucune utilité de disposer d'images en format .png, le .jpg est largement suffisant, surtout sur un fond blanc, trois fois moins lourd déjà, donc économie de bande passante et d'énergie, ce que tout développeur consciencieux se doit de respecter ? Quant aux fichiers "thumbs" de Windows contenus dans le .zip, en avons nous besoin ? ? ?
Bref, séparer au minimum en deux sujets, supprimer l'inutile, supprimer les erreurs de base dans vos Pages, pour exemple language="javascript" est plus que obsolète, supprimer toute la partie inférieure totalement inutile dans votre Blog puisque même pas active ?
Tout cela me fait penser à du copié / collé de droite et de gauche et mal assemblé sans effort quoi...
Je dirais en conclusion, copie largement à revoir ? Yvanoph---
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.