Bonjour,
je dois réaliser une galerie photo avec du javascript, mais j'ai plusieurs soucis :
- je voudrais que lorsque que l'on clique sur une miniature, elle s'affiche en grand; mais je ne trouve pas comment le coder.
- j'ai créer une boucle pour les fonctions next et prévious, la next fonctionne tres bien car elle exclu l'img 0, mais pour la fonction previous, sa exclue l'img 6, sinon sa ne fonctionne pas du tout, comment faire pour que la boucle fonctionne tout en excluant l'img 0 ?
merci d'avance à ceux qui pourront m'aider !
voici mon code:
-------------------------------html/js------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="esai style2.css" type="text/css" media="screen"/>
<title>Galerie photo d'Ulrich Lebeuf</title>
</head>
<body>
<div id="content">
<div id="pp_gallery" class="pp_gallery">
<div id="grande_image" class="grande_image">
<img id="img0" src="vogues/0.jpg" class="disp"/>
<img id="img1" src="vogues/g1.jpg"/>
<img id="img2" src="vogues/g2.jpg"/>
<img id="img3" src="vogues/g3.jpg"/>
<img id="img4" src="vogues/g4.jpg"/>
<img id="img5" src="vogues/g5.jpg"/>
<img id="img6" src="vogues/g6.jpg"/>
<h1>Le road trip silencieux d'Ulrich Lebeuf</h1>
</div>
</div>
<a id="suivante" href="javascript:next();"></a>
<a id="precedente" href="javascript:previous();"></a>
<div id="dossier_photo">
<div id="miniatures">
<a id="miniature0" href="javascript:mini();"></a>
<a id="miniature1" href="javascript:mini();">
<img src="vogues/1.jpg" alt="images/album1/1.jpg">
</a>
<a id="miniature2" href="javascript:mini();">
<img src="vogues/2.jpg" alt="images/album1/2.jpg">
</a>
<a id="miniature3" href="javascript:mini();">
<img src="vogues/3.jpg" alt="images/album1/3.jpg">
</a>
<a id="miniature4" href="javascript:mini();">
<img src="vogues/4.jpg" alt="images/album1/4.jpg">
</a>
<a id="miniature5" href="javascript:mini();">
<img src="vogues/5.jpg" alt="images/album1/5.jpg">
</a>
<a id="miniature6" href="javascript:mini();">
<img src="vogues/6.jpg" alt="images/album1/6.jpg">
</a>
</div>
</div>
<script type="text/javascript">
current = 0;
function display(num){
document.getElementById('img'+current).className = '';
document.getElementById('miniature'+current).className = '';
document.getElementById('miniature'+current).className = '';
current = num;
document.getElementById('img'+current).className = 'disp';
document.getElementById('miniature'+current).className = 'disp';
document.getElementById('miniature'+current).className = 'mini';
}
function next() {
var n = (current+1)%7;
if(n == 0) n++;
display(n);
}
function previous() {
var m = (current+6)%7;
if(m == 6) m--;
display(m);
}
function mini() {
display(p);
}
</script>
</body>
</html>
------------------------------------css------------------------------------
#content {
position: relative;
height:1366;
width:768;
margin: 0 auto;
}
body{
background:#CCC url(vogues/background5.png) no-repeat top left;
font-family:"Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
font-size:15px;
color: #fff;
overflow:hidden;
}
/*------------------------
flèches
-------------------------*/
#suivante, #precedente{
top:50%;
margin-top:300px;
width:70px;
height:70px;
position:absolute;
color:#fff;
display:block;
}
/*#suivant {
right: 150px;
}*/
#suivante{
right:200px;
background:url(vogues/next_big.jpg) no-repeat center center;
}
#suivante:hover{
background:url(vogues/suivant_hover.jpg) no-repeat center center;
}
/*#precedent {
left: 150px;
}*/
#precedente{
left:200px;
background:url(vogues/previous_big.jpg) no-repeat center center;
}
#precedente:hover{
background:url(vogues/precedent_hover.jpg) no-repeat center center;
}
/*-------------------------------------
miniature
---------------------------------------*/
#dossier_photo{
position:absolute;
bottom:0px;
left:0px;
height:65px;
width:100%;
}
#dossier_photo img{
border:5px solid #fff;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
}
#miniatures a{
-webkit-transition:0.3s;
position:absolute;
cursor:pointer;
top:625px;
height:155px;
margin-top:0px;
}
#miniatures a.disp,
#dossier_photo #miniature1:hover,
#dossier_photo #miniature2:hover,
#dossier_photo #miniature3:hover,
#dossier_photo #miniature4:hover ,
#dossier_photo #miniature5:hover ,
#dossier_photo #miniature6:hover {
margin-top:-50px;
-webkit-transform: rotate(0deg);
}
/*-----miniature1-----------*/
#dossier_photo #miniature1 {
left: 124px;
-webkit-transform: rotate(10deg);
}
/*----miniature2--------------*/
#dossier_photo #miniature2 {
left: 319px;
-webkit-transform: rotate(-4deg);
}
/*----------miniature3-----------*/
#dossier_photo #miniature3 {
left: 514px;
-webkit-transform: rotate(-18deg);
}
/*----------miniature4-----------*/
#dossier_photo #miniature4 {
left: 709px;
-webkit-transform: rotate(-6deg);
}
/*----------miniature5-----------*/
#dossier_photo #miniature5 {
left: 904px;
-webkit-transform: rotate(18deg);
}
/*-----------miniature6----------*/
#dossier_photo #miniature6 {
left: 1099px;
-webkit-transform: rotate(2deg);
}
/*-----------------------------
grande image
-----------------------------*/
#grande_image {
visibility: visible;
width: 660px;
height: 485px;
margin-top: -262.5px;
margin-left: -330px;
top: 50%;
-webkit-transform: rotate(7deg);
}
.grande_image{
position:fixed;
top:150%;
left:50%;
}
#grande_image img {
width: 600px;
height: 390px;
position:absolute;
top:0px;
left:0px;
border:10px solid #fff;
border-bottom:45px solid #fff;
opacity:0;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
-webkit-transition:0.8s;
}
#grande_image img.disp {
opacity:1;
}
#grande_image h1{
height:45px;
line-height:45px;
font-size:30px;
width:100%;
bottom:20px;
left:-22px;
position:absolute;
text-align:center;
color:#000;
}
/*------------------------------
signature
------------------------------*/
#galerie {
left: -100px;
color:#000;
}
Afficher la suite
