Sujet Précédent Sujet Suivant

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

Fermé
Mary_B Messages postés 6 Date d'inscription jeudi 17 janvier 2013 Statut Membre Dernière intervention 18 janvier 2013 - 17 janv. 2013 à 22:48
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 - 21 janv. 2013 à 09:13
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;
}


-------------------------------------------------------------------------------------------------------------
A voir également:

9 réponses

Réponse 1 / 9
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
18 janv. 2013 à 14:10
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
Réponse 2 / 9
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
18 janv. 2013 à 12:45
Salut,

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

SkRo
0
Réponse 3 / 9
Mary_B Messages postés 6 Date d'inscription jeudi 17 janvier 2013 Statut Membre Dernière intervention 18 janvier 2013
18 janv. 2013 à 12:49
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
0
Mary_B Messages postés 6 Date d'inscription jeudi 17 janvier 2013 Statut Membre Dernière intervention 18 janvier 2013
18 janv. 2013 à 12:52
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;
}
0
Réponse 4 / 9
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
18 janv. 2013 à 12:58
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
Mary_B Messages postés 6 Date d'inscription jeudi 17 janvier 2013 Statut Membre Dernière intervention 18 janvier 2013
18 janv. 2013 à 13:01
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 =)
0
Réponse 6 / 9
Mary_B Messages postés 6 Date d'inscription jeudi 17 janvier 2013 Statut Membre Dernière intervention 18 janvier 2013
18 janv. 2013 à 14:11
Super merci je vais essayer ca =)
0
Réponse 7 / 9
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
18 janv. 2013 à 14:29
Tiens moi au courant ;)
0
Réponse 8 / 9
Mary_B Messages postés 6 Date d'inscription jeudi 17 janvier 2013 Statut Membre Dernière intervention 18 janvier 2013
18 janv. 2013 à 17:26
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 ;)
0
Réponse 9 / 9
SkRo91 Messages postés 135 Date d'inscription mercredi 6 juin 2012 Statut Membre Dernière intervention 28 janvier 2013 39
21 janv. 2013 à 09:13
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
0

Discussions similaires

Dissocier les photos de ma galerie sur Google Photos
BourrinOman83 -
Pierr10 -

9 réponses
Connaitre la date d'une photo.
Lilouu.UK -
o -

18 réponses