créer un diaporama

WRInaute discret
bonjour,

je suis à la recherche d'un code pour créer un diaporama, qui permette :
soit un affichage des images par bouton précédent / suivant,
soit un affichage successif des images toutes les X secondes par un bouton play/pause (avec possibilité de régler la temporisation)

les scripts que j'ai trouvé jusqu'ici ne correspondent pas à ce que je recherche
si vous connaissez un site qui propose ce genre de diaporama, je suis preneur !

Merci

Mikaël
:D
 
WRInaute accro
j'ai un vieux code qui traîne dans mon PC, et justement je l'ai retrouvé pour un ami hier
donc à vous de modifier (notamment les ""images/commerces/commerce1.jpg""...), ça marche en tout cas, c'est le principal
je ne sais pas qui a créé ce script (que j'ai modifié), mais merci à lui


dans le head :
Code:
<SCRIPT LANGUAGE="JavaScript">
var rotate_delay = 5000;
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}
//  End -->
</script>

dans le body :
Code:
<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
              <td align=center bgcolor="white"> <b>diapos</b> 
              </td>
</tr>
<tr>
<td align=center bgcolor="white" width=200 height=250>
<img src="images/commerces/commerce1.jpg" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="images/commerces/commerce1.jpg" selected>N°1
<option value="images/commerces/commerce2.jpg">N°2
<option value="images/commerces/commerce3.jpg">N°3
<option value="images/commerces/commerce4.jpg">N°4
<option value="images/commerces/commerce5.jpg">N°5
<option value="images/commerces/commerce6.jpg">N°6
<option value="images/commerces/commerce7.jpg">N°7
<option value="images/commerces/commerce8.jpg">N°8
<option value="images/commerces/commerce9.jpg">N°9
<option value="images/commerces/commerce10.jpg">N°10
<option value="images/commerces/commerce11.jpg">N°11
<option value="images/commerces/commerce12.jpg">N°12
<option value="images/commerces/commerce13.jpg">N°13
<option value="images/commerces/commerce14.jpg">N°14
<option value="images/commerces/commerce15.jpg">N°15

</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</form>
 
Nouveau WRInaute
TOMHTML a dit:
j'ai un vieux code qui traîne dans mon PC, et justement je l'ai retrouvé pour un ami hier
donc à vous de modifier (notamment les ""images/commerces/commerce1.jpg""...), ça marche en tout cas, c'est le principal
je ne sais pas qui a créé ce script (que j'ai modifié), mais merci à lui

....[/code]

Ca fonctionne nickel, en plus avec un bon css, c tout bon, merci
 
WRInaute occasionnel
Je remonte ce post car je compte créer des diaporamas et les mettre sur mon site (environ 15 images + du texte) et je me pose la question de la technique à employer : Javascript, flash ou AJAX, que choisiriez vous et pourquoi ?

Je me pose surtout la question du javascript au cas où il serait désactivé sur le poste client.

Merci pour vos conseils.
 
WRInaute discret
Bonjour,

Je te conseille un script open source GPL gratuit et très bien conçu, igalerie. Facile à mettre en place, au design et fonctionnalités sympa. Je l'ai testé et franchement j'ai été agréablement surpris. Tu trouveras tous les détails sur le site.
w w w .igalerie.org

Edit : il nécessite php et mysql
 
Nouveau WRInaute
Tu peux également essayer Smooth Gallery (javascript non intrusif) :
http://smoothgallery.jondesign.net/

Si javascript est désactivé sur le poste client, seule la première image apparaîtra (à choisir avec soin donc).

L'avantage est que le titre et la description de chaque image sera indexée.
 
Nouveau WRInaute
Comme disait spidetra: tu trouveras peut être là:http://www.maani.us/, et si non, c'est que tu as mal cherché sur le site car ce site est TOP, j'ai jamais vu aussi mieux (humour: aussi mieux^^). J'insiste, ce site est à consulter.
 
Nouveau WRInaute
Bonjour

Je remonte ce post car j'ai utilisé le script de TOMHTML (merci à lui !) et j'ai un petit problème.

Je voudrais afficher 2 diaporamas dans la même page Web, dans deux fenêtres (formulaires) différents. J'ai dupliqué la partie codée dans le BODY mais les boutons de commande du formulaire deviennent inopérants.

Merci par avance.

A tout hasard voici le code, un peu long, désolé ...

Code:
<HTML>
<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    var rotate_delay = 5000;
    current = 0;
    function next() {
    if (document.slideform.slide[current+1]) {
    document.images.show.src = document.slideform.slide[current+1].value;
    document.slideform.slide.selectedIndex = ++current;
       }
    else first();
    }
    function previous() {
    if (current-1 >= 0) {
    document.images.show.src = document.slideform.slide[current-1].value;
    document.slideform.slide.selectedIndex = --current;
       }
    else last();
    }
    function first() {
    current = 0;
    document.images.show.src = document.slideform.slide[0].value;
    document.slideform.slide.selectedIndex = 0;
    }
    function last() {
    current = document.slideform.slide.length-1;
    document.images.show.src = document.slideform.slide[current].value;
    document.slideform.slide.selectedIndex = current;
    }
    function ap(text) {
    document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
    rotate();
    }
    function change() {
    current = document.slideform.slide.selectedIndex;
    document.images.show.src = document.slideform.slide[current].value;
    }
    function rotate() {
    if (document.slideform.slidebutton.value == "Stop") {
    current = (current == document.slideform.slide.length-1) ? 0 : current+1;
    document.images.show.src = document.slideform.slide[current].value;
    document.slideform.slide.selectedIndex = current;
    window.setTimeout("rotate()", rotate_delay);
       }
    }
    //  End -->
    </script>
</HEAD>

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00DFED" VLINK="#00DFED">
<FONT COLOR=#FFFF00>

<CENTER><H2>Auditions </H2>
</FONT></CENTER>

<HR>
<FONT FACE="Verdana" SIZE=2>

<!-- Premier diaporama -->

<BR>
Audition du 15 avril 2012 au Centre Bellevaux
<BR>

    <form name=slideform>
    <table cellspacing=1 cellpadding=4 bgcolor="#000000">
    <tr>
                  <td align=center bgcolor="white"> <b>diapos</b>
                  </td>
    </tr>
    <tr>
    <td align=center bgcolor="white" width=200 height=250>
    <img src="aud150412/01.jpg" name="show">
    </td>
    </tr>
    <tr>
    <td align=center bgcolor="#C0C0C0">
    <select name="slide" onChange="change();">
    <option value="aud150412/01.jpg" selected>N°1
    <option value="aud150412/02.jpg">N°2
    <option value="aud150412/03.jpg">N°3
    <option value="aud150412/04.jpg">N°4
    <option value="aud150412/05.jpg">N°5
    <option value="aud150412/06.jpg">N°6

    </select>
    </td>
    </tr>
    <tr>
    <td align=center bgcolor="#C0C0C0">
    <input type=button onClick="first();" value="|<<" title="Beginning">
    <input type=button onClick="previous();" value="<<" title="Previous">
    <input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
    <input type=button onClick="next();" value=">>" title="Next">
    <input type=button onClick="last();" value=">>|" title="End">
    </td>
    </tr>
    </table>
    </form>



<!-- Deuxième diaporama -->

<BR>
Audition du 15 juin 2012 à la salle Contretemps de Planoise
<BR>

    <form name=slideform>
    <table cellspacing=1 cellpadding=4 bgcolor="#000000">
    <tr>
                  <td align=center bgcolor="white"> <b>diapos</b>
                  </td>
    </tr>
    <tr>
    <td align=center bgcolor="white" width=200 height=250>
    <img src="aud150612/01.jpg" name="show">
    </td>
    </tr>
    <tr>
    <td align=center bgcolor="#C0C0C0">
    <select name="slide" onChange="change();">
    <option value="aud150612/01.jpg" selected>N°1
    <option value="aud150612/02.jpg">N°2
    <option value="aud150612/03.jpg">N°3
    <option value="aud150612/04.jpg">N°4
    <option value="aud150612/05.jpg">N°5
    <option value="aud150612/06.jpg">N°6

    </select>
    </td>
    </tr>
    <tr>
    <td align=center bgcolor="#C0C0C0">
    <input type=button onClick="first();" value="|<<" title="Beginning">
    <input type=button onClick="previous();" value="<<" title="Previous">
    <input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
    <input type=button onClick="next();" value=">>" title="Next">
    <input type=button onClick="last();" value=">>|" title="End">
    </td>
    </tr>
    </table>
    </form>




<BR>
<BR>
<BR>

</BODY>
 
WRInaute accro
Pas possible avec le code en l'état, le javascript fait accès a des objets html précis qui se retrouvent en double chez toi bref il ne peut pas savoir duquel tu parle donc ça plante.
Une solution pas très élégante mais accessible pour un débutant comme toi (je suppose débutant vue la question), serait de mettre une iframe (ou deux pour la symétrie) dans ta page web, iframe(s) qui pointerai(en)t sur deux pages "diaporama différentes" contenant un seul diaporama chacune.
ça devrait isoler chaque script (a vérifier) et fonctionner.
 
Nouveau WRInaute
Merci Zeb pour ta réponse.

1) Oui je suis plutôt débutant !

2) J'ai essayé de renommer mes objets HTML de la section <BODY> chaque fois qu'il y a "name=", c'est-à-dire mettre slideform1 et slideform2, show1 et show2, slide1 et slide2, slidebutton1 et slidebutton2, mais ça ne fonctionne pas non plus parce que les fonctions javascript de la section <HEAD> appellent en effet les objets directement par leur nom.

3) Les outils tout faits cités dans ce post ne disent jamais si on peut mettre 2 diaporamas dans la même page ...

4) Donc dommage, pour l'instant je vais suivre ton conseil et faire des frames ou même faire deux pages web différentes appelées depuis mon menu.

Merci et bonne journée :)
 
WRInaute accro
jack554 a dit:
J'ai essayé de renommer mes objets HTML de la section <BODY> chaque fois qu'il y a "name=", ...
Si tu en est a essayer d'adapter le code il faut t'y prendre de façon systématique et ajouter un id a chaque élément html utilisé par le script. Id qui sera bien sur indicé 1 pour le premier slyde et 2 pour le second genre <truc id="machin1"> et <truc id="machin2">

Ensuite il faut "banaliser les scripts et fonctions pour qu'il travaillent sur l'id de l'objet ciblé qu'il faudra donc passer en paramètre de chaque fonction genre fonction truc(myId){...}

Et a l'intérieur de ces fonctions il faudrait que chaque accès a un objet html se face a travers document.getElementById(myId).methode() ou document.getElementById(myId).propriété

par exemple en simplifiant le select qui est dans le formulaire :

Code:
    <form id="slideform1">
    ....
    <select id="slide1" onChange="change();">
    <option value="aud150412/01.jpg" selected>N°1
    <option value="aud150412/02.jpg">N°2

serait "manipulé", "accédé" comme suit dans la fonction suivante (je simplifie aussi) :

Code:
    function rotate(???,idSelect,???) {
    if (...) {
    ...
    document.getElementById(idSelect).selectedIndex = current;
    ...

etc ...
 
Nouveau WRInaute
Bonjour a tous,

j'ai utilisé le code de TOMHTML (merci à lui !) et j'ai un petit problème.

le code marche super, mes je voudrai juste que le diaporama soit en mode play quand on ouvre mon site, car actuellement on doit le mettre en route manuellement. Pouvez vous me dire se que je dois modifié dans le code, merci beucoup pour votre aide
MERCI
 
Nouveau WRInaute
lisez cet article ca va vous aider:
http://izisend.com/blog/blog/2013/03/05/creer-un-diaporama-en-javascript/#/vanilla/discussion/embed/?vanilla_discussion_id=0
 
Discussions similaires
Haut