Aide pour une galerie d'image jquery
kirkas
Messages postés
130
Statut
Membre
-
kirkas Messages postés 130 Statut Membre -
kirkas Messages postés 130 Statut Membre -
Bonjour,
J'aurai besoin d'aide pour l'amélioration d'une galerie Jquery.
voici le site en construction : http://www.restaurant-hotel-de-ville.ch/hdv/images.php
La galerie en question se situe dans la page "image"
Jusque la tout va bien, à l'aide de bout de code pris à la volé sur internet, j'ai réussis à construire une galerie avec système de vignette.
Mais il me faut, en plus des vignettes, un bouton précédant et suivant, et c'est la que je bloque.
voici mon code jquery :
et mon code html :
si quelqu'un a une idée ou alors un plugin jquery qui ferai les deux, je prends, merci
J'aurai besoin d'aide pour l'amélioration d'une galerie Jquery.
voici le site en construction : http://www.restaurant-hotel-de-ville.ch/hdv/images.php
La galerie en question se situe dans la page "image"
Jusque la tout va bien, à l'aide de bout de code pris à la volé sur internet, j'ai réussis à construire une galerie avec système de vignette.
Mais il me faut, en plus des vignettes, un bouton précédant et suivant, et c'est la que je bloque.
voici mon code jquery :
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
$("li a").animate({opacity:1},200);
$(this).animate({opacity:0.6}, 500);
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displayPics;
et mon code html :
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Restaurant de l'hôtel de ville - Galerie d'Images</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.min.js" type="text/javascript"></script>
<script src="js/myscript.js" type="text/javascript"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<style type="text/css" media="screen">
h3{
color: #;
}
</style>
</head>
<body>
<div id="general">
<div id="header">
<h1><strong><a href="index.php"><img src="img/logo.png" alt="Titre" title="Restaurant de l'hôtel de ville"/></a></strong></h1>
<div id="galerie" class="hover">
<dl id="photo">
<dt class="idontwanttoseeyou" >Titre de la photo 1</dt>
<dd><img id="big_pict" src="img/images/image1.jpg" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
<ul id="galerie_mini">
<li><a href="img/images/image1.jpg" title=""><img src="img/images/image1_m.jpg" alt="" /></a></li>
<li><a href="img/images/image2.jpg" title=""><img src="img/images/image2_m.jpg" alt="" /></a></li>
<li><a href="img/images/image3.jpg" title=""><img src="img/images/image3_m.jpg" alt="" /></a></li>
<li class="espace"><a href="img/images/image4.jpg" title=""><img src="img/images/image4_m.jpg" alt="" /></a></li>
<li><a href="img/images/image6.jpg" title=""><img src="img/images/image6_m.jpg" alt="" /></a></li>
<li><a href="img/images/image7.jpg" title=""><img src="img/images/image7_m.jpg" alt="" /></a></li>
<li><a href="img/images/image8.jpg" title=""><img src="img/images/image8_m.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
si quelqu'un a une idée ou alors un plugin jquery qui ferai les deux, je prends, merci
A voir également:
- Aide pour une galerie d'image jquery
- Galerie photo en ligne gratuite - Guide
- Légender une image - Guide
- Image iso - Guide
- Comment masquer une photo dans la galerie - Guide
- Reduire taille image - Guide