Galerie photo avec JavaScript

Bonjour à tous, je viens de me servir de votre code javascript de galerie photo, ci-dessous le lien pour être sur de parler du même tuto.
http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html
J'aurais aimé pouvoir intégré le titre des photo lorsqu'elle sont agrandit mais malheureusement mais connaissance en javascript étant limité, j'aimerais beaucoup votre aide.

Merci d'avance

Bonsoir widi7070,

widi7070 a écrit :
J'aurais aimé pouvoir intégré le titre des photo lorsqu'elle sont agrandit

C'est déjà ce que propose ce script

<li>
<a href="images/photo1.png" [#blue]title="Titre de la photo 1[/#]">
<img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a>
</li>

Le script récupère le titre du lien de l'image en taille réelle (la balise title que tu peux (dois) modifier à ta convenance) et l'affiche au dessus de la photo (taille réelle) :

<dl id="photo">
<dt>[#blue]Titre de la photo 1[/#]</dt>
<dd>
<img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" />
</dd>
</dl>

Peut-être n'ai-je pas compris ta problèmatique ?
Auquel cas, tu voudras bien avoir la gentilesse de reformuler pour qu'il n'y ait pas d'erreur d'interprétation

Cdt,
Sylvain

bonjour et merci de ton aide. J'avais reformuler ma demande mais ça n'a pas été pris en compte,... dommage...
Donc je reformule:
j'ai repris le code cité, et j'ai voulu le mettre en forme sans le style.css
Je veut simplement faire un tableau qui ressemblerait à ça:
vignette|vignette|vignette
TITRE
Image agrandie

Alors j'ai réussi le seul problème que j'ai ce que lorsque je clique sur une vignette l'image s'aggrandit en effaçant le reste dc ......
Voici mon code:

Script.js est le même que vous avez donné.
Style.css je ne m'en sert pas du tout
Et galerie.html :
dans le head:

<script type="text/javascript" src="script.js"></script>

dans le body:

<table>

	<ul id="galerie_mini">
		<tr>
		<td><li><a href="nouvelle_image/bois_fleuri.jpg" title="Titre de la photo 1"><img src="nouvelle_image/bois_fleuri.jpg" alt="Le titre de la photo 1" width=90 height=60 /></a></li></td>
		<td><li><a href="nouvelle_image/bouquet_table.jpg" title="Titre de la photo 2"><img src="nouvelle_image/bouquet_table.jpg" alt="Le titre de la photo 2" width=90 height=60/></a></li></td>
		<td><li><a href="nouvelle_image/cent_roses_compo1.jpg" title="Titre de la photo 3"><img src="nouvelle_image/cent_roses_compo1.jpg" alt="Le titre de la photo 3" width=90 height=60/></a></li></td>	
		<td><li><a href="nouvelle_image/composition.jpg" title="Titre de la photo 4"><img src="nouvelle_image/composition.jpg" alt="Le titre de la photo 4" width=90 height=60/></a></li></td>
		<td><li><a href="nouvelle_image/dahlia_pam.jpg" title="Titre de la photo 5"><img src="nouvelle_image/dahlia_pam.jpg" alt="Le titre de la photo 5" width=90 height=60/></a></li></td>
</tr>

	</ul>
	<dl id="photo">
	<tr><td colspan=5 align=center>
		<dt>Titre de la photo 1</dt>
	</td></tr>
	<tr><td colspan=5 align=center>
		<dd><img id="big_pict" src="nouvelle_image/bois_fleuri.jpg" alt="Photo 1 en taille normale" width=500 height=400/></dd>
	</td></tr>
	</dl>
</table>

*je ne voit pas ou est le problème.
Je vous remerci d'avance de votre aide

Bonjour,
Simple question...pourquoi ne pas utiliser la feuille de style?

Je dis ça je dis rien mais il y a d'énormes probblèmes au niveau du code html et des imbrications d'éléments. Tu as passé ton code au validateur?

Bah déjà une liste de cellules dans un tableau...

Bonjour,

je vous remercie pour ce tuto très clair comme toujours !

J'ai ce pendant un petit soucis :

j'ai copier très exactement tous les script, mais l'image agrandie se charge dans une nouvelle fenetre de navigateur. Le javascript est pourtant rigoureusement identiques à la source...

Seuls changements dans le html (les noms des images et leur chemin... mais comme ellles se chargent bien, je ne pense pas que cela vienne de là).

Avez vous une suggestion ?

Merci d'avance

Otto

Bonjour Ottodisk,

Tout d’abord merci pour ta question, je me suis heurtée au même problème et je me suis donc sentie un pu moins seule en te lisant.

J’ai bien relu le tutoriel à la recherche d’indices et c’est le mot « fichier » javascript qui m’a mis la puce à l’oreille.

Inutile de préciser que je suis complètement novice. Jusqu’à peu « java » était pour moi une danse à trois temps des bals populaires. Donc pour moi javascript HLTML, même combat, on les met dans le même fichier !

Que nenni ! il faut créer un fichier javascript qu’il faut attacher en suite en feuille de style.
C’est en tous les cas ce que j’ai essayé et ça marche !

Bonne chance,

Brin de reinette

Bonjour à tous,

J'ai testé le tutoriel pour créer une galerie photos en javascript. Cela fonctionne.
Par contre, lorsque je l'intègre à un site dynamique les photos s'ouvrent dans une nouvelle page. Comment faire pour que le script.js soit bien appliqué ? J'imagine qu'il faut changer le code, mais je suis débutante en php et javascript et mes essais ne sont pas concluants. J'espère que vous pourrais m'aider !

Bonjour,

Mon message n'a pas vraiment pas sa place ici, enfin,...
J'ai suivit ce même script de Olivier
(http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html)
j'ai réussit à l'intégrer dans ma page html.
Pourtant, j'aimerais pouvoir l'utiliser plusieurs fois, ce qui est impossible car le srcipt JavaScript fait appel à getElementById. La fonction getElementByClass n'existant pas, j'ai cherché à la définir (sans rien connaitre à Javascript! ).
Voilà le script

function getElementsByClass(classe)
{
var divs = document.getElementsByTagName('div');
var resultats = new Array();
for(var i=0; i<divs.length; i++)
if(divs.className == classe)
resultats.push(divs[i]);
return resultats;
}
function displayPics()

var photos = document.getElementByClass('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.getElementByClass('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.getElementByClass('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() {
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 page

Je voudrais donc avoir un avis avisé sur ce script...
Est il réellement possible de dupliquer cette galerie photo dans unemême page sans compliquer le code à outrance.

Merci d'avance.

Loofok[/i][/i]