Galerie photo javascript sans JQuery [besoind d'aide svp] [Fermé]

Signaler
Messages postés
3
Date d'inscription
jeudi 17 janvier 2013
Statut
Membre
Dernière intervention
19 novembre 2013
-
Messages postés
8319
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
18 juillet 2018
-
Bonsoir,

J'ai à réaliser une galerie photo à l'aide de javascript.
J'ai tout le html et le css mais niveau animation, je nage....
Vu que dans la consigne nous avons obligation de ne pas utiliser le jQuery ou le Flash trouver de l'aide sur internet est mission impossible ( dixit les trois jours complet de recherches).

Voici le code HTML et CSS, merci d'avance à ceux qui pourront m'aider :

<!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>



<div id="content">


<div id="pp_gallery" class="pp_gallery">

<div id="grande_image" class="grande_image">
<img name="imga" src="vogues/0.jpg">

<h1>Le road trip silencieux d'Ulrich Lebeuf</h1>

</div>
</div>



<div id="suivante" class="suivante">
</div>

<div id="precedente" class="precedente">
</div>

<div id="dossier_photo">

<div class="miniature">
<div class="miniature1">
<img name="imga" src="vogues/1.jpg" alt="images/album1/1.jpg">
</div>

<div class="miniature2">
<img name="imga" src="vogues/2.jpg" alt="images/album1/2.jpg">
</div>

<div class="miniature3">
<img name="imga" src="vogues/3.jpg" alt="images/album1/3.jpg">

</div>

<div class="miniature4">
<img name="imga" src="vogues/4.jpg" alt="images/album1/4.jpg">

</div>

<div class="miniature5">
<img name="imga" src="vogues/5.jpg" alt="images/album1/5.jpg">

</div>

<div class="miniature6">
<img name="imga" src="vogues/6.jpg" alt="images/album1/6.jpg">

</div>


</div>

</div>





<script type="text/javascript">



<body>
</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{
cursor:pointer;
top:50%;
margin-top:300px;
width:70px;
height:70px;
position:absolute;
color:#fff;
}

/*#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;
}


/*-----miniature1-----------*/
#dossier_photo .miniature1 {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 124.85714285714286px;
margin-top:0px;
-webkit-transform: rotate(10deg);
}

#dossier_photo .miniature1:hover {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 124.85714285714286px;
margin-top:-50px;
-webkit-transform: rotate(0deg);
}

/*----miniature2--------------*/
#dossier_photo .miniature2 {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 319.7142857142857px;
margin-top: 0px;
-webkit-transform: rotate(-4deg);
}
#dossier_photo .miniature2:hover {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 319.7142857142857px;
margin-top: -50px;
-webkit-transform: rotate(0deg);
}

/*----------miniature3-----------*/

#dossier_photo .miniature3 {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 514.5714285714286px;
margin-top: 0px;
-webkit-transform: rotate(-18deg);
}

#dossier_photo .miniature3:hover{
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 514.5714285714286px;
margin-top: -50px;
-webkit-transform: rotate(0deg);
}

/*----------miniature4-----------*/

#dossier_photo .miniature4 {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 709.4285714285714px;
margin-top: 0px;
-webkit-transform: rotate(-6deg);
}

#dossier_photo .miniature4:hover {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 709.4285714285714px;
margin-top: -50px;
-webkit-transform: rotate(0deg);

}

/*----------miniature5-----------*/
#dossier_photo .miniature5 {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 904.2857142857143px;
margin-top: 0px;
-webkit-transform: rotate(18deg);
}

#dossier_photo .miniature5:hover {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 904.2857142857143px;
margin-top: -50px;
-webkit-transform: rotate(0deg);
}

/*-----------miniature6----------*/

#dossier_photo .miniature6 {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 1099.142857142857px;
margin-top: 0px;
-webkit-transform: rotate(2deg);
}

#dossier_photo .miniature6:hover {
position:absolute;
top:625px;
height:155px;
cursor:pointer;
left: 1099.142857142857px;
margin-top: -50px;
-webkit-transform: rotate(0deg);
}
/*-----------------------------
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;
}
.grande_image img{
position:absolute;
top:0px;
left:0px;
border:10px solid #fff;
border-bottom:45px solid #fff;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
}
#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;
}



2 réponses

Messages postés
1292
Date d'inscription
mardi 24 janvier 2012
Statut
Membre
Dernière intervention
26 octobre 2014
228
Salut,

Pour commencer, faudrait revoir le HTML parce qu'une balise <body> ne se colle pas en fin de document!

Qu'entendez-vous par animation?
Une question stupide engendre une réponse stupide!
Une question mal formulé engendre une réponse aléatoire!
Messages postés
8319
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
18 juillet 2018
1 445
30 secondes de recherche sur google.

http://www.script-tutorials.com/demos/54/index.html