créer un diaporama

  • Auteur de la discussion Auteur de la discussion atomikado
  • Date de début Date de début
A
atomikado
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
 
T
TOMHTML
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>
 
G
gewix
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
Cliquez pour agrandir...
 
S
Savoy
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.
 
A
athoms
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
 
R
riaStudio
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.
 
W
web2000
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.
 
J
jack554
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>
 
zeb
zeb
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.
 
J
jack554
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 :)
 
zeb
zeb
WRInaute accro
jack554 a dit:
J'ai essayé de renommer mes objets HTML de la section <BODY> chaque fois qu'il y a "name=", ...
Cliquez pour agrandir...
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 ...
 
J
jacky35
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
 
H
how is it?
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
 
Vous devez vous connecter ou vous inscrire pour répondre ici.

➡️ Offre MyRankingMetrics ⬅️

pré-audit SEO gratuit avec RM Tech (+ avis d'expert)
coaching offert aux clients (avec Olivier Duffez ou Fabien Faceries)

Voir les détails ici

coaching SEO
Discussions similaires
G
Créer un cocon sémantique pourrait-il nuire à mon site?
Réponses
2
Affichages
576
Gaetan47
G
A
Les urls, changement et redirection. ça peut créer des problèmes ?
Réponses
5
Affichages
1K
Madrileño
Madrileño
S
Créer des QRcode
Réponses
23
Affichages
3K
WebRankInfo
WebRankInfo
S
Créer une affiliation peut elle nuire au referencement ?
Réponses
6
Affichages
1K
LaurentW
L
laurentsc
Créer du contenu avec ChatGPT
Réponses
27
Affichages
2K
WebRankInfo
WebRankInfo
Paulinmartin
Créer un nouveau domaine avec 4 nouvelles langues
Réponses
14
Affichages
2K
Marie-Aude
Marie-Aude
laurentsc
WordPress créer un sitemap xml avec YOAST SEO
Réponses
25
Affichages
4K
laurentsc
laurentsc
A
Comment créer un fichier SPF (authentification emails) ?
Réponses
4
Affichages
3K
annette76
A
J
Mention "Site créer par ..." dans le footer
Réponses
7
Affichages
2K
JrdGrnd
J
T
WordPress Créer et maintenir un thème vs Site Builder avec thème tout fait
Réponses
8
Affichages
3K
anguenot.com
anguenot.com
DomTo
Créer un fichier audio pour les articles
Réponses
3
Affichages
2K
Cypher
C
R
Search Console Créer des sitemap avec les redirections 301
Réponses
7
Affichages
2K
ZImm
Z
D
Faut-il créer un sitemap mobile ?
Réponses
3
Affichages
3K
passion
passion
G
créer un nouveau site ou améliorer l'ancien ?
Réponses
6
Affichages
3K
geraldine57
G
Patrick Huet
Créer une page ou une rubrique "citation", bonne idée ?
Réponses
7
Affichages
2K
Patrick Huet
Patrick Huet
N
Comment créer des URL propres pour les pages résultats
Réponses
8
Affichages
3K
phonyclic
phonyclic
V
E-commerce: Créer un collection sans l'intégrer sur la page d'accueil
Réponses
2
Affichages
2K
antonin_
A
B
WordPress Créer un sitemap simple pour Google
Réponses
5
Affichages
2K
Bon Jovial
B
M
Supprimer un site pour créer une copie = risque de "duplicate" ?
Réponses
8
Affichages
2K
ManRanking
M
B
WordPress Créer un site miroir
Réponses
5
Affichages
2K
boulouboulou
B
Haut