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

Fermé

m.perraud Messages postés 3 Date d'inscription jeudi 17 janvier 2013 Statut Membre Dernière intervention 19 novembre 2013 - 17 janv. 2013 à 22:48
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 - 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;
}

A voir également:

Galerie photo javascript sans JQuery [besoind d'aide svp]
Galerie photo en ligne gratuite - Guide
Photo aérienne de ma maison - Guide
Traduction photo gratuit - Guide
Telecharger javascript - Télécharger - Langages
Photo filtre 7 gratuit - Télécharger - Retouche d'image

2 réponses

Réponse 1 / 2

tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
Modifié par tryan44 le 18/01/2013 à 06:42

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 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
18 janv. 2013 à 09:25

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

Connaitre la date d'une photo.