Galerie photo en javascript sans jQuery [besoin d'aide svp ] [Fermé]

Signaler
Messages postés
6
Date d'inscription
jeudi 17 janvier 2013
Statut
Membre
Dernière intervention
18 janvier 2013
-
Messages postés
135
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
28 janvier 2013
-
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="main.css" />
<script type="text/javascript" src="galerie.js"></script>
<title>Galerie</title>
</head>

<body>

<!--/* miniatures des images*/-->

<div id="content">
<h1 id="titre">Fall in Central Park </h1>
<h2>Série photos de Jamie Scott </h2>

<div id="fileattente">

<a id="previous" onclick="affiche" href="#"></a>
<a id="next" onclick="affiche" href="#"></a>

<div class="image1">
<a href="#">
<img name="mini" style="width: 100%; height: 100%;" src="img/1.jpg" alt="image_1"/></a>

<a href="#">
<img name="mini" style="width: 100%; height: 100%;" src="img/2.jpg" alt="image_2"/></a>


<a href="#">
<img name="mini" style="width: 100%; height: 100%;" src="img/3.jpg" alt="image_3"/></a>


<a href="#">
<img name="mini" style="width: 100%; height: 100%;" src="img/4.jpg" alt="image_4"/></a>


<a href="#">
<img name="mini" style="width: 100%; height: 100%;" src="img/5.jpg" alt="image_5"/></a>


<a href="#">
<img name="mini" style="width: 100%; height: 100%;" src="img/6.jpg" alt="image_6"/></a>
</div>
</div>



<!--/* image affichée */-->
<div id="box_principale">
<a onclick="effacage" id="slide" href="#">
<div id="current">
<img style="width: 100%; height: 100%;" src="img/1.jpg" alt="slideactive">
<img style="width: 100%; height: 100%;" src="img/2.jpg" alt="slideactive">
<img style="width: 100%; height: 100%;" src="img/3.jpg" alt="slideactive">
<img style="width: 100%; height: 100%;" src="img/4.jpg" alt="slideactive">
<img style="width: 100%; height: 100%;" src="img/5.jpg" alt="slideactive">
<img style="width: 100%; height: 100%;" src="img/6.jpg" alt="slideactive">
</div>
</a>
</div>


</div>

</body>

</html>




----------------------------------------------------------------------
CSS
----------------------------------------------------------------------




body{
background: black url(img/background.jpg) no-repeat;
}

#content {
position: relative;
background: url(img/fond_3copie.png) no-repeat;
height: 800px;
width: 680px;
margin:0 auto;
}

.image1, a, img{
margin: auto 0;
}

h1{
font-size: 50px;
font-family: helvetica;
color: white;
padding: 10px 0px 0px 20px;
margin-bottom: 0px;
}

h2{
font-size: 20px;
font-family: Helvetica;
font-weight: lighter;
color: white;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px 0px 0px 410px;
}


#previous, #next {
display: block;
position: absolute;
width: 70px;
height: 70px;
}
#previous{
background: url(img/previous.png) no-repeat;
position: absolute;
margin: 50px 0px;
margin-left: -25px;
}

#next{
background: url(img/next.png) no-repeat;
margin: 50px 0px;
margin-left: 640px;
}

#previous:hover{
background: url(img/previous_2.png) no-repeat;
}

#next:hover{

background: url(img/next_2.png) no-repeat;
}

.image1{
width:3000px;
height:150px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px 0px 0px 40px;
overflow:hidden;
}

#fileattente a{
display:inline-block;
width:197px;
height:147px;
margin-bottom: 0px;
padding: 0px 0px 1px 0px;
}

#box_principale{
width:640px;
height:540px;
position:absolute;
<!-- visibility:hidden;-->
opacity:0;
padding: 22px 0px 0px 0px;
}

#slide{
display:inline-block;
width:640px;
height:480px;
overflow:hidden;
}

#slide #current{
position:relative;
width:640px;
height:480px;
}

#slide img{
width:640px;
height:480px;
margin-top: 10px;
padding: 0px 0px 0px 40px;
}


-------------------------------------------------------------------------------------------------------------

9 réponses

Messages postés
135
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
28 janvier 2013
35
Dans ton <head> </head> tu met le js

<SCRIPT LANGUAGE="JavaScript">
var rotate_delay = 5000;
current = 0;
rotate();
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>


puis dans ton <body>


<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center bgcolor="#b6a664"> <b>Galerie des sites réalisés</b>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=200 height=250>
<img src="Diapo/photo1.jpg" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="#b6a664">
<select class="diapo" name="slide" onChange="change();">
<option value="Diapo/photo1.jpg" selected>Skro Corp
<option value="Diapo/photo2.jpg">Blog Tigre
<option value="Diapo/photo3.jpg">Portefeuille de Compétences
<option value="Diapo/photo4.jpg">Gestion des Pannes
<option value="Diapo/photo5.jpg">Master Of Drums
<option value="Diapo/photo6.jpg">GSB
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#b6a664">
<input class="diapo" type=button onClick="previous();" value="<<" title="Previous">
<input class="diapo" type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input class="diapo" type=button onClick="next();" value=">>" title="Next">
</td>
</tr>
</table>
</form>
3
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 76687 internautes nous ont dit merci ce mois-ci

Messages postés
135
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
28 janvier 2013
35
Salut,

Si je récapitule tu dois faire une sorte de diaporama sans utiliser de javascript ??

SkRo
Messages postés
6
Date d'inscription
jeudi 17 janvier 2013
Statut
Membre
Dernière intervention
18 janvier 2013

Hey !

euh non en utilisant javascript mais sans utiliser la fonction jQuery.

Mais sinon oui une galerie simple où tu as des images, tu cliques dessus elles s'agrandissent et si tu cliques sur les flèches les miniatures défilent. =)

Mary_B
Messages postés
6
Date d'inscription
jeudi 17 janvier 2013
Statut
Membre
Dernière intervention
18 janvier 2013

Je te mets une nouvelle version de mon code:


<!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="main.css" />
<script type="text/javascript" src="galerie.js"></script>
<title>Galerie</title>
</head>

<body>

<!--/* miniatures des images*/-->

<div id="content">
<h1 id="titre">Fall in Central Park </h1>
<h2>Série photos de Jamie Scott </h2>

<div id="fileattente">

<a id="previous" onclick="afficheprev('previous')" href="#"></a>
<a id="next" onclick="affichenxt('next')" href="#"></a>

<div class="miniatures">
<a href="javascript:;" onClick="Affiche1('image1');">
<img name="mini" style="width: 100%; height: 100%;" src="img/1.jpg" alt="image_1"/></a>

<a href="javascript:;" onClick="Affiche2('image2');">
<img name="mini" style="width: 100%; height: 100%;" src="img/2.jpg" alt="image_2"/></a>


<a href="javascript:;" onClick="Affiche3('image3');">
<img name="mini" style="width: 100%; height: 100%;" src="img/3.jpg" alt="image_3"/></a>


<a href="javascript:;" onClick="Affiche4('image4');">
<img name="mini" style="width: 100%; height: 100%;" src="img/4.jpg" alt="image_4"/></a>


<a href="javascript:;" onClick="Affiche5('image5');">
<img name="mini" style="width: 100%; height: 100%;" src="img/5.jpg" alt="image_5"/></a>


<a href="javascript:;" onClick="Affiche6('image6');">
<img name="mini" style="width: 100%; height: 100%;" src="img/6.jpg" alt="image_6"/></a>
</div>
</div>



<!--/* image affichée */-->
<div id="box_principale">
<a onclick="afficheGrd('slide')" id="slide" href="#">
<img style="width: 100%; height: 100%;" src="img/1.jpg" alt="slideactive">
<img style="width: 100%; height: 100%;" src="img/2.jpg" alt="slideactive">
<img style="width: 100%; height: 100%;" src="img/3.jpg" alt="slideactive">
<img style="width: 100%; height: 100%;" src="img/4.jpg" alt="slideactive">
<img style="width: 100%; height: 100%;" src="img/5.jpg" alt="slideactive">
<img style="width: 100%; height: 100%;" src="img/6.jpg" alt="slideactive">

</a>
</div>


</div>

<script type="text/javascript">

function Affiche1(image1){//afficher l'image 1 en grand (passage de miniature en grand) + ajouter une opacité pour hover
alert(image1);
}

function Affiche2(image2){//afficher l'image 2 en grand (passage de miniature en grand) + ajouter une opacité pour hover
alert(image2);
}

function Affiche3(image3){//afficher l'image 3 en grand (passage de miniature en grand) + ajouter une opacité pour hover
alert(image3);
}

function Affiche4(image4){//afficher l'image 4 en grand (passage de miniature en grand) + ajouter une opacité pour hover
alert(image4);
}

function Affiche5(image5){//afficher l'image 5 en grand (passage de miniature en grand) + ajouter une opacité pour hover
alert(image5);
}

function Affiche6(image6){//afficher l'image 6 en grand (passage de miniature en grand) + ajouter une opacité pour hover
alert(image6);
}

function afficheprev(previous){//faire defiler les miniatures vers la gauche
alert(previous);
}

function affichenxt(next){//faire defiler les miniatures vers la droite
alert(next);
}

function afficheGrd(slide){ //mettre en grand lorsque l'on clique dessus
alert(slide);
}

</script>

</body>

</html>


------------------------------------------------------------------------------------------------------------
CSS
------------------------------------------------------------------------------------------------------------




body{
background: black url(img/background.jpg) no-repeat;
}

#content {
position: relative;
background: url(img/fond_3copie.png) no-repeat;
height: 800px;
width: 680px;
margin:0 auto;
}

.miniatures, a, img{
margin: auto 0;
}

h1{
font-size: 50px;
font-family: helvetica;
color: white;
padding: 10px 0px 0px 20px;
margin-bottom: 0px;
}

h2{
font-size: 20px;
font-family: Helvetica;
font-weight: lighter;
color: white;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px 0px 0px 410px;
}


#previous, #next{
display: block;
width: 70px;
height: 70px;
position: absolute;
}
#previous{

border: 1px red solid;
background: url(img/previous.png) no-repeat;
position: absolute;
margin: 50px 0px;
margin-left: -25px;

}

#next{border: 1px red solid;
background: url(img/next.png) no-repeat;
margin: 50px 0px;
margin-left: 640px;
}

#previous:hover{
background: url(img/previous_2.png) no-repeat;
}

#next:hover{

background: url(img/next_2.png) no-repeat;
}

.miniatures{
width:3000px;
height:150px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px 0px 0px 40px;
overflow:hidden;
}

#fileattente a{
display:inline-block;
width:197px;
height:147px;
margin-bottom: 0px;
padding: 0px 0px 1px 0px;
}

#box_principale{
width:640px;
height:540px;
position:absolute;
<!-- visibility:hidden;-->
opacity:0;
padding: 22px 0px 0px 0px;
}

#slide{
display:inline-block;
width:640px;
height:480px;
overflow:hidden;
}

#slide #current{
position:relative;
width:640px;
height:480px;
}

#slide img{
width:640px;
height:480px;
margin-top: 10px;
padding: 0px 0px 0px 40px;
}
Messages postés
135
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
28 janvier 2013
35
Genre un truc comme sur l'image de gauche ça irai ?

http://hpics.li/22f9d4b


Pcq le zoom avec des fleches tout ça je ne l'ai encore jamais optimisé et donc pas envie de dire ou donner nimporte quoi.
Messages postés
6
Date d'inscription
jeudi 17 janvier 2013
Statut
Membre
Dernière intervention
18 janvier 2013

Oui sur le principe c'est ça je veux pouvoir faire passer les images grâce aux boutons (flèches) mais je n'arrive pas a les relier aux images.

c'est pas grave pour le zoom, j'essaierai de trouver merci déjà de répondre =)
Messages postés
6
Date d'inscription
jeudi 17 janvier 2013
Statut
Membre
Dernière intervention
18 janvier 2013

Super merci je vais essayer ca =)
Messages postés
135
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
28 janvier 2013
35
Tiens moi au courant ;)
Messages postés
6
Date d'inscription
jeudi 17 janvier 2013
Statut
Membre
Dernière intervention
18 janvier 2013

Eh bien merci bien ma galerie sera légèrement différente de celle que j'avais en tête à la base mais au moins elle marche maintenant =)

Merci encore pour ton aide.
Bonne journée ;)
Messages postés
135
Date d'inscription
mercredi 6 juin 2012
Statut
Membre
Dernière intervention
28 janvier 2013
35
Je t'en pris désolé si c'est pas comme tu le voyais mais au moins ça te fera ça le temps que tu apprennes à faire comme tu le voulais mdr

Bonne continuation
SkRo