Galerie photo javascript [besoin d'aide svp]
m.perraud
Messages postés
4
Statut
Membre
-
jjaco Messages postés 575 Statut Membre -
jjaco Messages postés 575 Statut Membre -
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;
}
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;
}
A voir également:
- Galerie photo javascript [besoin d'aide svp]
- Google photo - Télécharger - Albums photo
- Galerie photo en ligne gratuite - Guide
- Comment masquer une photo dans la galerie - Guide
- Photo filtre 7 gratuit - Télécharger - Retouche d'image
- Google maps photo maison - Guide