Bonjour à tous,
J'ai suivit cet excellent tutoriel proposé par Alsa concernant la mise en place rapide d'une petite galerie css avec un petit peu de css.
http://www.alsacreations.com/xmedia/tuto/exemples/galerie_photo_js/
Elle correspond en tout point aux fonctions que j'attends d'elle à un petit détail prêt.
En effet la seulement fonctionnalité qui me manque est le fait qu'une fois une vignette sélectionnée pour afficher le zoom celle-ci acquière un état "on" et vis et versa quand on sélectionne une autre vignette (bien entendu en éteignant celle précédemment sélectionné).
Voila le problème, je pige rien au Js je commence à peine à m'amuser avec mes css.
Une idée de mon code
et le petit morceau de js
J'ai bien quelques pistes en passant via dreamweaver mais le code est atroce, je préfère ne pas le montrer.
Je ne demande pas forcement un travail mâché mais du moins une petite piste pouvant me mettre sur la bonne vois sachant que je ne connais vraiment pas le js.
Merci d'avance si une bonne âme passe par là
[/i]
J'ai suivit cet excellent tutoriel proposé par Alsa concernant la mise en place rapide d'une petite galerie css avec un petit peu de css.
http://www.alsacreations.com/xmedia/tuto/exemples/galerie_photo_js/
Elle correspond en tout point aux fonctions que j'attends d'elle à un petit détail prêt.
En effet la seulement fonctionnalité qui me manque est le fait qu'une fois une vignette sélectionnée pour afficher le zoom celle-ci acquière un état "on" et vis et versa quand on sélectionne une autre vignette (bien entendu en éteignant celle précédemment sélectionné).
Voila le problème, je pige rien au Js je commence à peine à m'amuser avec mes css.
Une idée de mon code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
* {
margin:0;
padding:0;
}
a img, a:hover img, a:focus img {
border: none;
}
div#content {
position:absolute;
left: 50%;
top: 50%;
width: 1134px;
height: 665px;
margin-top: -332px;
margin-left: -567px;
background: url('voeux.png') no-repeat;
}
div#logo {
position:absolute;
top: 82px;
left: 30px;
}
div#dela {
position:absolute;
top: 584px;
left: 48px;
}
div#galerie {
position:absolute;
z-index:500;
width: 183px ;
top: 179px;
left: 34px;
text-align: center ;
}
ul#galerie_mini {
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li {
float: left ;
}
ul#galerie_mini li a img {
margin: 5px ;
}
dl#photo {
position: absolute;
margin: 0 auto ;
top: -140px;
left: 240px;
}
dl#photo dd {
margin: 0 ;
}
dl#photo dt {
display: none;
}
</style>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="content">
<div id="logo"><img src="titre.png" alt="" /></div>
<div id="dela"><a href=""><img src="delasoul.png" alt="" /></a></div>
<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/z1.png" title="Titre de la photo 1" class="item1"><img src="images/minis/thumb1_off.png" alt="" /></a></li>
<li><a href="images/z2.png" title="Titre de la photo 2"><img src="images/minis/thumb2_off.png" alt="" /></a></li>
<li><a href="images/z3.png" title="Titre de la photo 3"><img src="images/minis/thumb3_off.png" alt="" /></a></li>
<li><a href="images/z1.png" title="Titre de la photo 4"><img src="images/minis/thumb1_off.png" alt="" /></a></li>
<li><a href="images/z2.png" title="Titre de la photo 5"><img src="images/minis/thumb2_off.png" alt="" /></a></li>
<li><a href="images/z3.png" title="Titre de la photo 6"><img src="images/minis/thumb3_off.png" alt="" /></a></li>
<li><a href="images/z1.png" title="Titre de la photo 7"><img src="images/minis/thumb1_off.png" alt="" /></a></li>
<li><a href="images/z2.png" title="Titre de la photo 8"><img src="images/minis/thumb2_off.png" alt="" /></a></li>
</ul>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="images/blanc.png" alt="" /></dd>
</dl>
</div>
</div>
</body>
</html>et le petit morceau de js
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
for(var i = 0 ; i < liens.length ; i++)
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
{
liens[i].onclick = function()
// Au clique sur ces liens
{
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 ;
// Il ne reste plus qu'à appeler notre fonction au chargement de la pageJ'ai bien quelques pistes en passant via dreamweaver mais le code est atroce, je préfère ne pas le montrer.
Je ne demande pas forcement un travail mâché mais du moins une petite piste pouvant me mettre sur la bonne vois sachant que je ne connais vraiment pas le js.
Merci d'avance si une bonne âme passe par là
[/i]