Galerie photo en javascript avec href
valerie
-
valérie_o.O Messages postés 34 Statut Membre -
valérie_o.O Messages postés 34 Statut Membre -
Bonjour!
Je suis présentement en train de faire une galerie photo pour mon portfolio. Elle comporte un petit tableau de miniatures, qui lorsqu'on clique dessus affiche l'image correspondante en gros, à côté. Voici le lien d'une autre galerie que j'ai fait sur le même principe: http://valprovostmultimedia.com/portfolio_images.html (le site est toujours en construction)
Donc, cette galerie fonctionne très bien, maintenant le hic c'est que, pour la partie portfolio de site web, je voudrais qu'en cliquant sur la grosse image ça nous redirige vers le site web correspondant.
Comme je ne m'y connais pas trop en javascript (j'avais suivi un tutoriel qqpart pour construire cette galerie) j'ai de la difficulté à ajouter cette fonctionnalité.
Voici le js:
Le code de la galerie est dispo sur le lien donné en haut (je ne veux pas trop alourdir le message).
Donc j'avais pensé ajouter un attribut "name" (ou n'importe quoi d'autre en fait) à la ligne de la miniature, comme ceci:
pour pouvoir ensuite aller chercher cette valeur et la remplacer dans le code référant à la grosse photo, à l'url:
Mais je suis toute mélangée en fait de firstChild et de childNodes, j'ai à peu près essayé toutes les combinaisons possibles (je pense :P) et je n'arrive toujours pas à cibler l'adresse qui se trouve dans le code de la grosse photo:
J'ai pensé ajouter une variable comme celle ci:
pour pouvoir ensuite aller la chercher dans la boucle en bas:
Mais ce code ne fonctionne pas, l'adresse où mes photos m'envoie est toujours celle par défaut dans le code html, et donc le js ne remplace pas l'adresse comme je voudrais quand on change de photo...
Merci de m'aider, et excusez moi pour le long message, on m'a toujours dit que vaut mieux trop que pas assez ;)
Je suis présentement en train de faire une galerie photo pour mon portfolio. Elle comporte un petit tableau de miniatures, qui lorsqu'on clique dessus affiche l'image correspondante en gros, à côté. Voici le lien d'une autre galerie que j'ai fait sur le même principe: http://valprovostmultimedia.com/portfolio_images.html (le site est toujours en construction)
Donc, cette galerie fonctionne très bien, maintenant le hic c'est que, pour la partie portfolio de site web, je voudrais qu'en cliquant sur la grosse image ça nous redirige vers le site web correspondant.
Comme je ne m'y connais pas trop en javascript (j'avais suivi un tutoriel qqpart pour construire cette galerie) j'ai de la difficulté à ajouter cette fonctionnalité.
Voici le 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('h3')[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
Le code de la galerie est dispo sur le lien donné en haut (je ne veux pas trop alourdir le message).
Donc j'avais pensé ajouter un attribut "name" (ou n'importe quoi d'autre en fait) à la ligne de la miniature, comme ceci:
<td> <a href="images/web_big/blackblanc.jpg" title="Site web de l'agence de publicité Black & Blanc, créé avec le programme de moonfruit.com" name="http://www.blackblanc.ca/"><img src="images/web_minis/blackblanc.jpg" alt="Site web agence de publicité Black & Blanc" /></a></td>
pour pouvoir ensuite aller chercher cette valeur et la remplacer dans le code référant à la grosse photo, à l'url:
<div id="photo"> <a href="http://www.blackblanc.ca/"/><img id="big_pict" src="images/web_big/blackblanc.jpg" alt="Site web agence de publicité Black & Blanc" /></a><br/> <h3>Site web de l'agence de publicité Black & Blanc, créé avec le programme de moonfruit.com</h3> </div>
Mais je suis toute mélangée en fait de firstChild et de childNodes, j'ai à peu près essayé toutes les combinaisons possibles (je pense :P) et je n'arrive toujours pas à cibler l'adresse qui se trouve dans le code de la grosse photo:
<div id="photo"> <a href="http://www.blackblanc.ca/"/>
J'ai pensé ajouter une variable comme celle ci:
var lien_html = document.getElementById('photo').getElementsByTagName('a')[0];
pour pouvoir ensuite aller la chercher dans la boucle en bas:
lien_html.firstChild.childNodes.nodeValue= this.name;
Mais ce code ne fonctionne pas, l'adresse où mes photos m'envoie est toujours celle par défaut dans le code html, et donc le js ne remplace pas l'adresse comme je voudrais quand on change de photo...
Merci de m'aider, et excusez moi pour le long message, on m'a toujours dit que vaut mieux trop que pas assez ;)
A voir également:
- Galerie photo en javascript avec href
- 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
2 réponses
bon p-ê que mon message était trop long en fait, ça fait peut-être un peu peur...
donc, en résumé, je veux savoir quel est le chemin en (ex.:) firstChild.childNodes.etc. pour atteindre l'adresse http:// dans la ligne de code suivant:
en utilisant:
si ça se fait aussi pour commencer...
donc, en résumé, je veux savoir quel est le chemin en (ex.:) firstChild.childNodes.etc. pour atteindre l'adresse http:// dans la ligne de code suivant:
<div id="photo"> <a href="http://www.blackblanc.ca/"/><img id="big_pict" src="images/web_big/blackblanc.jpg" alt="Site web agence de publicité Black & Blanc" /></a><br/> <h3>Site web de l'agence de publicité Black & Blanc, créé avec le programme de moonfruit.com</h3> </div>
en utilisant:
var lien_html = document.getElementById('photo').getElementsByTagName('a')[?];
si ça se fait aussi pour commencer...