Sujet Précédent Sujet Suivant

Galerie JavaScript sans JQuery [besoin d'aide svp]

Fermé
29er Messages postés 1 Date d'inscription dimanche 20 janvier 2013 Statut Membre Dernière intervention 20 janvier 2013 - 20 janv. 2013 à 19:55
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 - 20 janv. 2013 à 21:16
Bonjour,
Je travail actuellement sur une galerie javascript dont les fonctionnalités sont censée faire défiler les photos en mode automatique et manuelle ainsi que faire apparaître l'image en pleine écran.
J'ai tout mon code HTML ainsi que le CSS mais j'ai du mal avec le JavaScript.
Je cherche depuis plusieurs jours et j'ai commencé le JavaScript mais ça ne marche pas pour le moment.
Voila mon code le JavaScript est censé faire passé la première photo derrière et ainsi de suite.
J'ai grand besoin de votre aide.
Merci d'avance.

///////HTML//////

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div class="title">
<h1>Switzerland ski trip </h1>
</div>
<ul class="photo">
<li><a href=""class="pos_1" id"img1"><img src="C:\Users\gael\Desktop\photo js\pics1.jpg"></a></li>
<li><a href=""class="pos_2" id"img2"><img src="C:\Users\gael\Desktop\photo js\pics2.jpg"></a></li>
<li><a href=""class="pos_3" id"img3"><img src="C:\Users\gael\Desktop\photo js\pics3.jpg"></a></li>
<li><a href=""class="pos_4" id"img4"><img src="C:\Users\gael\Desktop\photo js\pics4.jpg"></a></li>
<li><a href=""class="pos_5" id"img5"><img src="C:\Users\gael\Desktop\photo js\pics5.jpg"></a></li>
<li><a href=""class="pos_6" id"img6"><img src="C:\Users\gael\Desktop\photo js\pics6.jpg"></a></li>
<li><a href=""class="pos_7" id"img7"><img src="C:\Users\gael\Desktop\photo js\pics7.jpg"></a></li>
<li><a href=""class="pos_8" id"img8"><img src="C:\Users\gael\Desktop\photo js\pics8.jpg"></a></li>
<li><a href=""class="pos_9" id"img9"><img src="C:\Users\gael\Desktop\photo js\pics9.jpg"></a></li>
<li><a href=""class="pos_10" id"img10"><img src="C:\Users\gael\Desktop\photo js\pics10.jpg"></a></li>
<li><a href=""class="pos_11" id"img11"><img src="C:\Users\gael\Desktop\photo js\pics11.jpg"></a></li>
<li><a href=""class="pos_12" id"img12"><img src="C:\Users\gael\Desktop\photo js\pics12.jpg"></a></li>
</ul>
<script type="text/javascript" src="ski 2012.js"></script>
</body>
</html>



//////CSS//////

@charset "utf-8";
body {
background: #007380 ;
background: url(http://www.highresolutiontextures.com/textures/wood/hrt-wood-6.jpg

}

div.title{
font-family: arial, helvetica;
text-align: center;
font-size: 30px;
font-weight: normal;
color: white;
text-transform: uppercase;
letter-spacing: 3px;
}
ul.photo li a {
list-style: none;
float: left;
padding: 15px 15px 40px 15px;
background: #eee;
border: 1px solid #fff;
position: absolute;
margin-left: 32%;
top: 20%;
box-shadow: 0px 10px 15px #333;
border-radius: 2px 2px 2px 2px;


}

ul.photo li a.pos_1 {
list-style: none;
z-index: 1;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
}
ul.photo li a.pos_2 {
list-style: none;
z-index: 2;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);

}
ul.photo li a.pos_3 {
list-style: none;
z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
}
ul.photo li a.pos_4 {
list-style: none;
z-index: 4;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
}
ul.photo li a.pos_5 {
list-style: none;
z-index: 5;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}
ul.photo li a.pos_6 {
list-style: none;
z-index: 6;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}
ul.photo li a.pos_7 {
list-style: none;
z-index: 7;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
}
ul.photo li a.pos_8 {
list-style: none;
z-index: 8;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
ul.photo li a.pos_9 {
list-style: none;
z-index: 9;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
}
ul.photo li a.pos_10 {
list-style: none;
z-index: 10;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
ul.photo li a.pos_11 {
list-style: none;
z-index: 11;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
}
ul.photo li a.pos_12 {
list-style: none;
z-index: 12;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
}



///////Js/////////

var current = 0;
var nb = 12;
function anim(sens){
current = (current+nb+sens)%nb;
document.getElementById('img' + ((current+nb-1)%nb)).className = 'pos_'+nb;
document.getElementById('img' + (current%nb)).className = 'pos_1';
for(i=1;i<nb;i++){
document.getElementById('img' + ((current+i)%nb)).className = 'pos_'+(i+1);
}
}
setInterval('anim(1);',2000);





1 réponse

Réponse 1 / 1
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
20 janv. 2013 à 21:16
y'a ça qui est passé il y a peu de temps...

https://forums.commentcamarche.net/forum/affich-26931537-galerie-photo-javascript-sans-jquery-besoind-d-aide-svp
0

Discussions similaires

Dissocier les photos de ma galerie sur Google Photos
BourrinOman83 -
Pierr10 -

9 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Impossible de lire les videos de ma galerie photo.
GuillaumeJEAN-LOUIS -
ondine -

1 réponse
Transfert photos messenger vers galerie
Marie-Ange1948 -
Galliot -

4 réponses
Ne plus lier galerie et google photos
Babyinplug -
Babyinplug -

4 réponses