High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

[Javascript] Diaporama d'images

Dernière réponse le 27 oct 2009 à 16:25:07 small-princess16, le 21 sep 2009 à 15:03:50 
 Signaler ce message aux modérateurs

Bonjour,

J'ai piqué sur internet un script pour faire un diaporama d'images avec fondu et qui tourne en boucle. Source: http://www.crea-web.fr/javascript/diaporamas_images_script_a­culo_us.html

J'ai un tableau avec trois colonnes, et dans ces 3 colonnes j'aimerais que ce script tourne.
Malheureusement, il tourne bien, mais dans chaque colonne chacun leur tour. C'est à dire que les images tourne en boucle dans la colonne 1 du tableau et une fois que toutes les images sont passées, il repasse toutes les images mais dans la colonne 2, ainsi de suite...

Je ne m'y connais pas assez en javacript pour modifier moi-même le script!
Pourriez-vous m'aider?
Dites moi si vous avez besoin de plus d'infos!

Merci

Meilleures réponses pour « [Javascript] Diaporama d'images » dans :
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
Afficher le mode « diaporama » VoirPour afficher ses images dans le mode « diaporama » Pour afficher ses images dans le mode « diaporama », il faut d'abord que les tâches habituelles soient affichées dans les dossiers. Pour ce faire: 1- ouvrir n'importe quel dossier 2- choisir...
Posez votre question Répondre

1

eba973, le 21 sep 2009 à 15:43:45

Bonjour,
Peux-tu montrer ton html et ton script ?

A+
Eric

http://www.ameliorer-votre-site.com?s=f1

   
Répondre à eba973

2

small-princess16, le 21 sep 2009 à 16:29:19
  • +1

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MAHF</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="scripts/prototype.js" type="text/javascript"> </script>
<script src="scripts/scriptaculous.js?load=effects" type="text/javascript"></script>


<link href="mahf_css.css" rel="stylesheet" type="text/css">
<script>
var effect = 1;
var time = 3000;

var current_image = 0;
var next_image = 1;
var image = new Array();

function init() {
if(document.getElementsByClassName("image")) {
image = document.getElementsByClassName("image");
for(i=1; i < image.length; i++) {
image[i].style.display = "none";
}
}

if(image.length > 1) galerie();
}

function galerie() {
self.setTimeout("nextimage()",time);
}
function nextimage() {
if(effect == 1) { new Effect.Fade(image[current_image]); new Effect.Appear(image[next_image]); }
if(effect == 2) { new Effect.BlindUp(image[current_image]); new Effect.BlindDown(image[next_image]); }

if(next_image == (image.length-1)) {
current_image = next_image;
next_image = 0;
} else {
current_image = next_image;
next_image++;
}
galerie();
}

</script>

</head>

<body>
<div id="container">
<div id="content">




<div id="header">
<div id="logo"> <img src="logo.gif"> </div>
<div id="museeF"> MUSEE <br>
D'ART ET D'HISTOIRE<br> FRIBOURG <br> <span id="museeD">MUSEUM <BR> FUR KUNST UND GESCHICHTE <BR> FRIBOURG</span> </div>
<div id="menu">
<ul>
<li class="navig"> Home </li>
<li class="navig"> Search </li>
<li class="navig"> Contact </li>
<li class="navig"> News </li>
<li class="navig"> Français </li>
<li class="navig"> Deutsch </li>

</ul>
</div>
</div>




<div id="tableau">
<table cellspacing="0" cellpadding="0">
<tr>
<td id="col1" valign="top">Musée d'art et d'histoire <br> Fribourg</td>
<td id="col2" valign="top">Espace Jean Tinguely <br> Niki de Saint Phalle</td>
<td id="col3"></td>
</tr>
<tr>
<td id="col1_2">
<div class="diaporama"> <img src="test1.jpg" class="image" alt="" /> <img src="test2.jpg" class="image" alt="" />
</div>

</td>
<td id="col2_2"><div class="diaporama">
<img src="test1.jpg" class="image" alt="" />
<img src="test2.jpg" class="image" alt="" /> </div></td>

<td id="col3_2" ><div class="diaporama"> <img src="test1.jpg" class="image" alt="" />
<img src="test2.jpg" class="image" alt="" /> </div></td>


</tr>
<!-- <tr>
<td class="footer">Heures d'ouverture - Coordonnées - Accès</td>
<td valign="right"> </td>
<td class="footer" align="right">>www.fr.ch</td>

</tr>


</table>
</div>-->



</table>
<div id="footer">
<div id="heures">Heures d'ouvertures - Coordonnées - Accès </div>
<div id="web"> > www.fr.ch </div>
</div>
</div>
</div>



</div>
<script type="text/javascript">
init();
</script>
</body>
</html>

CSS: (utilisé uniquement pour les images du diapo)

.diaporama img {
margin: -205px 0 0 0;
position:absolute;
width: 254px
}

ET les scripts qui sont lié à ma page HTML sont des scripts déjà fait, à télécharger ici:

http://script.aculo.us/downloads

(sous Current Version ->scriptaculous-js-1.8.2.zip)


Merci :)

   
Répondre à small-princess16

3

small-princess16, le 22 sep 2009 à 08:34:54

Pas de solution.. ? :-(

   
Répondre à small-princess16

4

 serge, le 27 oct 2009 à 16:25:07

Bonjour, je remarque que dans les 3 colonnes de tu inscris les mêmes images. Fais un essais en ajoutant les images test3 test4 test5 test6 dans to diaporama et en inscrivant dans la colonne 2 test3.jpg et test4.jpg etr dans la colonne 3 les deux autres.
si le diaporama fonctionne correctement actuellement le fait d'ajouter des images te permettant de modifier le nom des images dans le script devrait résoudre ta question.
Serge

   
Répondre à serge
Posez votre question Répondre
Ils ont besoin de votre aide