Galerie JavaScript sans JQuery [besoin d'aide svp]
29er
Messages postés
1
Statut
Membre
-
ThEBiShOp Messages postés 9307 Statut Contributeur -
ThEBiShOp Messages postés 9307 Statut Contributeur -
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);
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);
A voir également:
- Galerie JavaScript sans JQuery [besoin d'aide svp]
- Galerie photo en ligne gratuite - Guide
- Telecharger javascript - Télécharger - Langages
- Comment masquer une photo dans la galerie - Guide
- Mettre une photo de la galerie en story à la une instagram ✓ - Forum Instagram
- Galerie photos windows - Télécharger - Albums photo
1 réponse
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
https://forums.commentcamarche.net/forum/affich-26931537-galerie-photo-javascript-sans-jquery-besoind-d-aide-svp
