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

m.perraud Messages postés 4 Statut Membre -
ThEBiShOp Messages postés 9307 Statut Contributeur - 18 janv. 2013 à 09:25

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;
}

Afficher la suite

A voir également:

Galerie photo javascript sans JQuery [besoind 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

2 réponses

Réponse 1 / 2

tryan44 Messages postés 1381 Statut Membre 220

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!

Réponse 2 / 2

ThEBiShOp Messages postés 9307 Statut Contributeur 1 566

30 secondes de recherche sur google.

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

Discussions similaires

Dissocier les photos de ma galerie sur Google Photos

Ne plus lier galerie et google photos

Transfert de photo reçue par mail vers ma galerie

Désynchroniser Google photo sur android

Votre réponse

Discussions similaires