Diaporama

Soyez le premier à donner votre avis sur cette source.

Snippet vu 26 379 fois - Téléchargée 36 fois

Commenter

Contenu du snippet

Un diaporama simple en DHTML (pour tous les navigateurs. NEDELEG LAOUEN DEOC'H TUD ! (JOYEUX NOEL A TOUS !)

Source / Exemple : 


<html><head>
<style type="text/css"><!--
    .class1{position:relative; width:100px; top:0px; height:500px; overflow-y:scroll; overflow:-moz-scrollbars-vertical};
    .class2{width:670px; background-color:honeydew; color:darkgreen};
--></style>
<script language="JavaScript"><!--
//--------------------------------DHTML-------------------
var nn4 = document.layers;
var nn6 = document.getElementById && !document.all;
var nn = nn4 || nn6;
var ie = document.all && !nn;
var dhtml = document.getElementById || document.all || document.layers;
function js_object(myRef) {
   if (!dhtml) {return;}
   if (nn6) {myRef = document.getElementById(myRef);}
   else if (nn4) {myRef = document.layers[myRef];}
   else {myRef = document.all[myRef];}
   return(myRef);}
function js_write(myRef, msg) {
  if (nn4) {
      js_object(myRef).document.write(msg);
      js_object(myRef).document.close();}
  else {
      js_object(myRef).innerHTML = msg;}
}
//--------------------------------DIAPORAMA-------------
var pics= new Array("eire10.jpg","eire11.jpg","eire12.jpg","eire13.jpg","eire14.jpg","eire15.jpg","eire16.jpg","eire17.jpg","eire18.jpg","eire19.jpg");
var legends= new Array(" Slieve League cliffs"," Holy Well"," The Poulnabrone wedge tomb"," Sheeps grazing on the road"," Rock of Cashel"," Trail in Ireland"," Poulnabrone tomb"," Great sunset"," Sunset on the coast"," Beach at Trabane Strand");
//.....................
//(document.images[0] ..........as main picture for our diaporama)
var count= -1;
var num= pics.length;
//.....................
function set_thumbnails() {
   document.write("<div id='slideshow' class='class1'>");
   for (i=0; i<num; i++) {
         document.write("<img src='"+pics[i] +"' width=100px onclick='actualize("+i+")'><p>");}
   document.write("</div>");}
//.....................
function actualize(k) {
   count = k;
   document.images[0].src= pics[count];
   js_write('div2',legends[count]);} 
//.....................
function previous(form) {
   count += -1;
   if (count <0) {count= 0;}
   document.images[0].src= pics[count];  
   js_write('div2',legends[count]);}    
//.....................
function next(form) {
   count += 1;
   if (count > (num-1)) {count= 0;}
   document.images[0].src= pics[count];  
   js_write('div2',legends[count]);} 
--></script></head>
<body>
<font color=darkgreen><font size=2><p>
Free Dhtml script provided by ©2004-<a href="http://gilles.saunier.free.fr">VB'Breizh</a><hr><p>
<center><font color=darkgreen><font size=4>IRISH TRIP<p><font size=2><font color=black><p>
<form style='cursor:pointer'><table border style='background-color:azure'>
    <tr><td height='500' width='670' colspan='2' align="center"><img src='pix.gif' border=0></td>
          <td  height='500' colspan='2' width='100'><script>set_thumbnails()</script></td></tr>
    <tr><td  colspan='2' align=left><div id='div2' class='class2'></div></td>
          <td align=left><input type='button' value='  <<  ' onclick='previous(this.form)'></td>
          <td align=right><input type='button' value='  >>  ' onclick='next(this.form)'></td></tr>
</table></form></center>
<font size=2><p>
A lot of thanks to <a href ="http://www.pdphoto.org">pdphoto.org</a> for these fabulous photographs.
<body onload='actualize(0)'>
</body></html>

Conclusion :


Impossible de passer le zip à cause du poids des images jpg...
Démo sur le site de VB'Breizh (http://gilles.saunier.free.fr)

A voir également

Ajouter un commentaire

Commentaires

Signaler Commenter la réponse de kokoyhaiti
kokoyhaiti
Messages postés
2
Date d'inscription
vendredi 2 décembre 2011
Statut
Membre
Dernière intervention
2 décembre 2011
 -
woaw il est cool ton diaporama..je l essaie tout de suite...
Signaler Commenter la réponse de cs_davidmnestor
cs_davidmnestor
Messages postés
24
Date d'inscription
lundi 11 août 2008
Statut
Membre
Dernière intervention
11 janvier 2011
 -
Bonjour,
c'est super,
j'attends la mise à jour de l'automatisme.
et je l'installe, bonne journée à tous.
Signaler Commenter la réponse de anthony428
anthony428
Messages postés
102
Date d'inscription
vendredi 18 août 2006
Statut
Membre
Dernière intervention
29 mai 2012
 -
pour ma part, l'image est figée sous mozilla....fonctionne nickel sous IE par contre.
Signaler Commenter la réponse de stany26
stany26
Messages postés
3
Date d'inscription
lundi 1 octobre 2007
Statut
Membre
Dernière intervention
29 juillet 2010
 -
Bonjour,
dans mon cas la page de code est dans le même répertoire que les photos du diaporama et toutes les autres images sont dans d'autres répertoires.
A essayer !
@+
Signaler Commenter la réponse de emmanuelletolly
emmanuelletolly
Messages postés
1
Date d'inscription
lundi 26 juillet 2010
Statut
Membre
Dernière intervention
27 juillet 2010
 -
Bonjour! j'ai aussi le problème d'UlquiorraShiffer. Les images du diapo s'affichent à la place de l'image de mon logo en haut de page! J'aime beaucoup ce diaporama alors ça serait vraiment sympa de me donner une solution! Merci d'avance! ;)
Afficher les 23 commentaires
S'inscrire maintenant

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.

Du même auteur (vbbreizh)