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

Mary_B Messages postés 6 Statut Membre -
SkRo91 Messages postés 135 Date d'inscription Statut Membre Dernière intervention - 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>



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


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

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

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

Afficher la suite

A voir également:

Galerie photo en javascript sans jQuery [besoin d'aide svp ]
Galerie photo en ligne gratuite - Guide
Google photo - Télécharger - Albums photo
Comment masquer une photo dans la galerie - Guide
Photo filtre 7 gratuit - Télécharger - Retouche d'image
Google maps photo maison - Guide

9 réponses

Réponse 1 / 9

SkRo91 Messages postés 135 Date d'inscription Statut Membre Dernière intervention 39

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>

Réponse 2 / 9

SkRo91 Messages postés 135 Date d'inscription Statut Membre Dernière intervention 39

Salut,

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

SkRo

Réponse 3 / 9

Mary_B Messages postés 6 Statut Membre

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

Mary_B Messages postés 6 Statut Membre

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>



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


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

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

Réponse 4 / 9

SkRo91 Messages postés 135 Date d'inscription Statut Membre Dernière intervention 39

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.

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

Posez votre question

Réponse 5 / 9

Mary_B Messages postés 6 Statut Membre

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 =)

Réponse 6 / 9

Mary_B Messages postés 6 Statut Membre

Super merci je vais essayer ca =)

Réponse 7 / 9

SkRo91 Messages postés 135 Date d'inscription Statut Membre Dernière intervention 39

Tiens moi au courant ;)

Réponse 8 / 9

Mary_B Messages postés 6 Statut Membre

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

Réponse 9 / 9

SkRo91 Messages postés 135 Date d'inscription Statut Membre Dernière intervention 39

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

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