CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 12 13:01:19

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Graphique

> SLIDESHOW MANUEL OU AUTOMATIQUE SIMPLIFIÉ

SLIDESHOW MANUEL OU AUTOMATIQUE SIMPLIFIÉ

Information sur la source

Note :

8,33 / 10

Catégorie :Graphique Classé sous :slideshow, diaporama, défilement images, images animées, galerie Niveau :Débutant Date de création :18/06/2008 Date de mise à jour :20/04/2010 14:49:44 Vu / téléchargé :22 717 / 2 179

Auteur : meliubaf

Ecrire un message privé

Commentaire sur cette source (21)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

J'ai souvent cherché (et trouvé) des slideshow (défilement images ou encore appelés diaporamas) compliqués en Javascript. Aussi j'ai finalement décidé d'écrire mon bout de code:-)

Voici mon code SIMPLIFIÉ au possible qui fait juste ce qu'on lui demande :
- manuel : appuyer sur un bouton pour afficher l'image précédente ou suivante
- automatique : l'image passée en paramètre se change automatiquement (possibilité stopper)
(+ une variante dans le zip : slideshow 2 images)

Testé avec Chrome4, Firefox3.5, IE6, IE7, Opera10.5

Source

/**********************/
/* Fichier JavaScript */
/**********************/
/*
Simple slide show manuel ou automatique,
dans la fenetre courante ou en popup, selon vos besoins...
Creation 18/06/2008 Amelie Vanbockstael
Mise a jour 20/04/2010
*/
//adresse des images
myPix = new Array("images/ico0.gif","images/ico1.gif","images/ico2.gif","images/ico3.gif")
//changement manuel
thisPic = 0
imgCt = myPix.length - 1
function chgSlide(direction) {
if (document.images) {
thisPic = thisPic + direction
if (thisPic > imgCt) {
thisPic = 0
}
if (thisPic < 0) {
thisPic = imgCt
}
document.Puzzle.src = myPix[thisPic]
}
}
//changement automatique
//vitesse de defilement en milliseconds
speed = 1000;
i = 0;
function autoSlideShow(imgname) {
if (document.images)
{
document.getElementById(imgname).src = myPix[i];
i++;
if (i > myPix.length-1) i = 0;
b=imgname;
objet_timer = setTimeout('autoSlideShow(b)',speed);
}
}
//arreter le defilement
function arret() {
clearTimeout(objet_timer);
}
//prechargement des images de Dreamweaver
function preload() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=preload.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
/******************************************/
/* Appel de ce script depuis la page HTML */
/******************************************/
<HTML>
<HEAD>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr">
<meta name="Language" content="fr">
<meta name="Author" content="Amélie Vanbockstael">
<title>Slide show en Javascript</title>
<script language="JavaScript" src="slideshow.js"></script>
</HEAD>
<BODY onLoad="preload('images/ico0.gif','images/ico1.gif','images/ico2.gif','images/ico3.gif')">
<h2>Manuel</h2>
<img src="images/ico0.gif" id="Puzzle" name="Puzzle" width="48" height="48"><br>
<a href="javascript:chgSlide(-1)"><b> << </b></a>     <a href="javascript:chgSlide(1)"><b> >> </b></a><br>
<hr>
<h2>Automatique</h2>
<a href="javascript:arret()"><img src="images/ico0.gif" id="Slide" name="Slide" width="48" height="48" border="0" alt="Arrêter ?"></a>
<script language="JavaScript">autoSlideShow('Slide')</script>
</BODY>
</HTML>

/**********************/
/* Fichier JavaScript */
/**********************/

/*
  Simple slide show manuel ou automatique,
  dans la fenetre courante ou en popup, selon vos besoins...
  Creation 18/06/2008 Amelie Vanbockstael
  Mise a jour 20/04/2010
*/

//adresse des images
myPix = new Array("images/ico0.gif","images/ico1.gif","images/ico2.gif","images/ico3.gif")

//changement manuel
thisPic = 0
imgCt = myPix.length - 1
function chgSlide(direction) {
  if (document.images) {
     thisPic = thisPic + direction
     if (thisPic > imgCt) {
        thisPic = 0
     }
     if (thisPic < 0) {
        thisPic = imgCt
     }
     document.Puzzle.src = myPix[thisPic]
  }
}

//changement automatique
//vitesse de defilement en milliseconds
speed = 1000;
i = 0;
function autoSlideShow(imgname) {
  if (document.images)
  {
    document.getElementById(imgname).src = myPix[i];
    i++;
    if (i > myPix.length-1) i = 0;
    b=imgname;
    objet_timer = setTimeout('autoSlideShow(b)',speed);
  }
}

//arreter le defilement
function arret() {
	clearTimeout(objet_timer);
}

//prechargement des images de Dreamweaver
function preload() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  var i,j=d.MM_p.length,a=preload.arguments; for(i=0; i<a.length; i++)
  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}




/******************************************/
/* Appel de ce script depuis la page HTML */
/******************************************/
<HTML>
<HEAD>
  <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
  <meta http-equiv="Content-Language" content="fr">
  <meta name="Language" content="fr">
  <meta name="Author" content="Amélie Vanbockstael">
  <title>Slide show en Javascript</title>
  <script language="JavaScript" src="slideshow.js"></script>
</HEAD>

<BODY onLoad="preload('images/ico0.gif','images/ico1.gif','images/ico2.gif','images/ico3.gif')">
  <h2>Manuel</h2>
  <img src="images/ico0.gif" id="Puzzle" name="Puzzle" width="48" height="48"><br>
  <a href="javascript:chgSlide(-1)"><b> << </b></a> &nbsp; &nbsp; <a href="javascript:chgSlide(1)"><b> >> </b></a><br>
  <hr>
  <h2>Automatique</h2>
  <a href="javascript:arret()"><img src="images/ico0.gif" id="Slide" name="Slide" width="48" height="48" border="0" alt="Arr&ecirc;ter ?"></a>
  <script language="JavaScript">autoSlideShow('Slide')</script>
</BODY>
</HTML>

Conclusion

Ce petit code très simple et très court vous permettra de :

- l'intégrer facilement dans votre page
- ou coder à partir de cela les fonctions dont vous avez besoin (et uniquement celles là)...
- ou encore comprendre un minimum "comment ça marche" afin de lire d'autres codes plus évolués sur le même sujet (diaporama avec transition, fondus, vignettes, bords arrondis etc...)

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

javascriptfr_SLIDESHOW
- images
  - ico0.gif 2 112 octets
  - ico1.gif 2 074 octets
  - ico2.gif 2 163 octets
  - ico3.gif 2 286 octets
  - img0.png 441 octets
  - img1.png 806 octets
  - img2.png 724 octets
  - img3.png 779 octets
- slideshow.html 1 045 octets
- slideshow.js 1 382 octets
- variante.html 1 991 octets

Télécharger le zip

Historique

30 juin 2008 14:40:25 :: petite précision, j'utilise une vieille fonction de Dreamweaver pour le préchargement des images sur la page...
30 juin 2008 14:42:56 :: idem
20 avril 2010 11:47:15 :: Code mis à jour en tenant compte des remarques. Testé avec Chrome4, Firefox3.5, IE6, IE7, Opera10.5 Rq: Essayé de mettre balise plus générale : <script language="ecmascript"> au lieu de <script language="JavaScript"> mais ça ne semble pas fonctionner avec Firefox !
20 avril 2010 14:49:44 :: Ajout de la possibilité d'arrêter le défilement automatique.

Sources de la même categorie

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

DRAG & DROP VERS UN CANVAS par kazma

ROTATION D'UNE IMAGE, ANIMATION par william voirol

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

DIAPORAMA SIMPLE PAR IFRAME par sartoz

DIAPO EN CSS 3D par kazma

SLIDESHOW par rubiks10

DIAPORAMA PHP / JS par MATHIS49

Commentaires et avis

Commentaire de nicomilville le 20/06/2008 08:05:02

Salut,

quelle est l'intéret vu que je crois qu'il existe des tonnes de sources comme ça sur ce site ?

http://www.javascriptfr.com/recherche.aspx?r=diaporama

Tu as pas du bien chercher lol, mais ça pas grave, si tu rajoue des fonctionnalité, ça aura peut être bientot son utilité !

a++

Commentaire de meliubaf le 23/06/2008 14:13:01

Bonjour, comme je le disais en commentaire j'ai trouvé beaucoup de choses compliquées sur le sujet. J'avais besoin de quelque chose de léger alors je l'ai écris, et j'ai pensé que ça pouvait en intéresser d'autre d'avoir un source SIMPLE. Voilà c'est tout. ;-)

Commentaire de chapata le 23/06/2008 17:38:58

Salut à vous,

je trouve ton script très bien, car il est simple. Et c'est avant tout, très compréhensible (même pour un débutant).
Après effectivement, pourquoi pas rajouter des fonctions adhoc, pour rendre fun le diaporama.
Mais en tous cas ca me plait et un 7/10 pour la note.

A +

Commentaire de chapata le 23/06/2008 17:40:21 7/10

et hop .. la note. (que j'avais oublié ..)

Commentaire de mehdikobra le 24/06/2008 11:46:19 8/10

cé bien mon ami !!
bon continuation !!

Commentaire de cruchacode le 25/06/2008 00:42:10

Un code très propre. Une suggestion dans le HTML : utilise les entités < et > pour faire tes chevrons inférieurs et supérieurs.

Commentaire de Paulo670 le 28/06/2008 09:06:35

Bonjour
Super ton script,surtout pour moi qui débute dans ce domaine.
J'aimerais pouvoir arreté le defilement automatique des images.Comment faire?
Merçi d'avance.
Paul

Commentaire de meliubaf le 30/06/2008 14:46:02

Bonjour Paul,
Je pense que tu peux partir du script automatique et ajouter un test (if) avec une variable supplémentaire à passer en paramètre (du style stop).
Ou alors tu le fais s'arrêter quand tout le tableau a été vu une fois. Au choix...

Commentaire de Paulo670 le 01/07/2008 07:11:13

Bonjour MELIUBAF,
Exact j' aimerais faire un " lecture/stop" et c'est le stop que je n'arrive pas à faire.
Merci à toi pour un petit coups de main...

Commentaire de Rirififi le 04/11/2008 12:06:47

Salut,
Je viens de télécharger et mettre en place ce code. Malheureusement, ça ne marche pas du tout dans Firefox et IE signale une erreur dans la page...
Avez-vous une idée pour améliorer le code ?
Merci d'avance !
Fifi

Commentaire de meliweb le 04/11/2008 14:43:05

Bonjour,
Désolé que le zip pose problème. Je ne puis le modifier car je suis au boulot et il y a beaucoup de restrictions...

En recopiant le code publié sur cette page je m'aperçois qu'il ne fonctionne effectivement plus (sans doute des modifications malheureuses suite à la question précédente)
Effectivement dans le fichier slideshow.js ligne 77 j'ai un mot conclusion qui n'a rien à faire là et qui bloque tout. En supprimant ce mot (cette ligne) ça refonctionne. Après vérification, c'est ok pour IE et Firefox en "manuel" mais le mode "auto" ne semble plus fonctionner avec Firefox.

Conclusion

Commentaire de Rirififi le 04/11/2008 14:58:34

Hello,
Merci pour ta rapidité de réponse. Si tu as le temps de chercher un peu, ça m'arrange :-)
Sinon, j'essayerai de trouver un autre script...
Fifi
P.S : Je me rends bien compte qu'il y a plein de "merde" avec les mises à jour de logiciel et de langage ! Personnellement, j'ai déjà du adapter certaines lignes dans plusieurs fichiers fait antérieurement... Accrochons-nous !

Commentaire de meliweb le 04/11/2008 17:19:46

re-Bonjour,
j'ai cherché ce qui pose problème dans mozilla en comparant notamment avec le script de Gilles Saunier <a href="codes/DIAPORAMA_28306.aspx" target="_blank">Diaporama_28306</a>
aussi dispo à cette adresse http://gilles.saunier.free.fr/scripts/banners.html

Apparemment c'est le passage de paramètre à la fonction autoSlideShow qui pose problème. Ce paramètre permet d'identifier les éléments avec le getElementById.

Mais l'intérêt de son script par rapport au mien est l'ajout d'un bouton STOP que je n'avais pas trouvé précédemment... Via la fonction clearTimeout(run); avec la variable run qui reçoit setTimeout dans la fonction autoSlideShow.

Je republierai un autre ZIP prochainement.

Commentaire de Rirififi le 05/11/2008 09:37:29

Re-bonjour aussi,
Bon, je crois que je dois chercher plus loin... Je travaille dans une page .php crée à partir de dreamweaver CS3, et le script de Gilles saunier ne fonctionne pas non plus. Par contre, si je sauve ma page en .html, ça marche! Bref, je te tiens au courant si je trouve le pourquoi du problème!
(ai déjà du adapter certaines écritures, par ex. : <? include "logo.php"; ?>
qui devient : <?php include ("logo.php"); ?>)
Donc ça ne m'étonnerais pas qu'il faille adapter l'écriture du js... mais comment?
Allez, bonne journée ! Merci pour tout !
Fifi

Commentaire de Rafale71 le 20/03/2009 13:58:46

Hello, meliubaf
Pour que ton script marche correctement sur Firefox, j´ai tu doit changer cette ligne de code:

Avant:
<img src="images/ico0.gif" name="Slide" width="48" height="48">

Après:
<img src="images/ico0.gif" id="Slide" width="48" height="48">

Le problème c´est que getElementById cherche les éléments par id et non par nom, j´espère de t´avoir aidé.
Maintenant, marche nickel sur Firefox et IE.
a++

Commentaire de jarimlj le 23/03/2009 09:33:47

bonjour,
ce script simple fonctionne pour une <img>
je voudrais faire 2 slides ou voir + et ca ne marche pas.
aidez moi svp.

Commentaire de jarimlj le 23/03/2009 10:04:28

voici mon code qui ne fonctionne pas :

<html>
<head>
  <title>Slide show en Javascript</title>
  <script language="JavaScript">
    
  </script>
</head>
<body>

  <img src="images/ico0.gif" name="Slide" width="236" height="200" id="Slide" />
  <img src="images/ico0.gif" name="Slide2" width="236" height="200" id="Slide2" />
  <script language="javascript">
   autoSlideShow('Slide', myPix, i=0);
   autoSlideShow('Slide2', myPix2, j=0);


  </script>

</body>
</html>

le probleme c'est que l'<img> ne change pas de src

Aidez moi, c'est super urgent.

Commentaire de meliubaf le 23/03/2009 11:10:10

Bonjour jarimlj,
Je n'ai pas trop le temps de chercher mais je pense que tu ne peux pas lancer le setTimeout deux fois via appel des 2 fonctions autoSlideShow.

Voici ce que je te propose (fonctionne sous IE7) pour faire un
SLIDE SHOW AUTOMATIQUE de 2 IMAGES : (tu peux améliorer en changeant ajoutant un compteur j pour la deuxieme image si tes tableaux sont de longeur différente)

<HTML>
<HEAD>
<meta name="Generator" content="UltraEdit">
<meta name="Author" content="Amélie Vanbockstael">
<title>Slide show en Javascript</title>
<meta name="Language" content="FR">
<meta HTTP-EQUIV="Content-Language" content="fr">
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
  
</script>
</HEAD>

<BODY onLoad="preload('images/ico0.gif','images/ico1.gif','images/ico2.gif','images/ico3.gif','images/img0.gif','images/img1.gif','images/img2.gif')">
  <H2>Automatique 2 images</H2>
  <img src="images/ico0.gif" id="Slide" name="Slide" width="48" height="48">
  <img src="images/img0.gif" id="Slide2" name="Slide2">
  <script>autoSlideShow('Slide','Slide2')</script>
</BODY>
</HTML>

Commentaire de jarimlj le 23/03/2009 11:29:03

merci meliubaf, je vais exploiter ton code.
a+

Commentaire de suga44 le 16/04/2010 17:32:47 10/10

Bonjour,
je débute en javascript et merci beaucoup pour ce script, j'vais essayer d'y ajouter un effet de fade-in / fade-out entre les différents slides et ça va avoir un effet du tonnerre sur le site web que l'on est entrain de développer !
Le Commentaire de Rafale71 le 20/03/2009 13:58:46

Hello, meliubaf
Pour que ton script marche correctement sur Firefox, j´ai tu doit changer cette ligne de code:

Avant:
<img src="images/ico0.gif" name="Slide" width="48" height="48">

Après:
<img src="images/ico0.gif" id="Slide" width="48" height="48">

m'a bien aidé quand j'étais bloqué à ne pas savoir pourquoi en mode auto ça ne fonctionnais pas pour moi...

Bonne continuation

Commentaire de meliubaf le 20/04/2010 10:53:02

Bonjour, effectivement d'habitude je mets des balises name et id partout, mais là j'ai du oublier. Je reposterai un zip prochainement. merci de vos commentaires.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Controle SlideShow [ par Miloflyer ] Bonjours a tous. J'ai trouver cet bribe de code qui permet de faire une sorte de petit diaporama avec des photos, mais j'aimerai l'adapter... J'aimera diaporama [ par morgandetoi06 ] bonjour, j ai voulu faire un diaporama en PHP/JSmaius il ne marche pas et je ne voit pas pksvp aidez moi: voila le code que j ai fait merci de me donn lien sur photos en javascript [ par missFlo17 ] Bonjour bonjour,Voilà, j'ai un diaporama de photos en javascript et j'aimerai que chaque photo correspond à un lien vers une page (1 page différente p Diaporama dans une page web [ par Winnieptitourson ] Sur mon site j'ai mis un diaporama dans une page web.Mais il parait que ça fonctionne pas avec tous les navigateurs.Quelqu'un a-t-il une solution ?htt Slideshow ou quiktime??? [ par Lance00 ] Bonjour,Je suis en train de réaliser un site sur lequel la bannière du haut va etre destinée au défilement de photos les unes après les autres.Je ne p Probleme d'insertion de commentaire dans galerie [ par iugiug ] bonjour,je voudrais mettre des commentaires en dessous de chaque photos de mon diaporama.... l'idée est du style "au clic de la vignette1 affichage de Diaporama 3D [ par walimoha ] J'ai installé le diaporama 3D, mais le nombre d'image est limité à 12 et il n'ya pas moyen d'en rajouter! Comment faire pour pouvoir afficher plusieur Problème avec les caractères spéciaux ! [ par Ruffneck2045 ] Bonjour, j'ai créer un diaporama à l'aide de php & javascript et j'ai un petit problème.En cliquant sur une image du diaporama !!! Défi !!! recherche diaporama [ par tamtamdesign ] Bonjour,je suis nouvelle venue sur ce site (très intéressant).Voilà, je recherche un script pour mes pages album photos.Mais comme j'ai diaporama sur un site HTML [ par Mouki78 ] Salut,Bon je suis un débutant :) alors soyez compréhensible LOOOLOuai donc voilà:je voudrais inserer un diaporama dans un site.Alors d'

Nos sponsors

Derniers Blogs

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

Forum

BANDEAU DéFILANT MOOTOOLS.JS ET HISTORIQUE DE NAVIGATION par cocolafleche

RE : RéCUPéRER LA VALEUR D'UNE VARIABLE PHP POUR L'UTILISER EN JAVASCRIPT par stealone

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning