Sujet Précédent Sujet Suivant

Galerie photo et lien

Fermé
widi70 Messages postés 649 Date d'inscription jeudi 4 janvier 2007 Statut Membre Dernière intervention 22 juillet 2019 - 16 nov. 2010 à 10:44
widi70 Messages postés 649 Date d'inscription jeudi 4 janvier 2007 Statut Membre Dernière intervention 22 juillet 2019 - 18 nov. 2010 à 09:12
Bonjour, j'ai trouvé ce petit script de galerie photo :
https://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html
tout est parfait sauf que j'aurais aimé rajouter un lien sur la grande image
le probleme est que même si la vignette à été changé le lien est toujours le même....
J'espère être assez explicite
merci d'avance de votre aide



A voir également:

7 réponses

Réponse 1 / 7
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
16 nov. 2010 à 11:02
Bonjour,

Il faut bien entourer la grande image de balis <a></a> mais ne rien mettre dans l'attribut href. Lui mettre un ID et ensuite, il faut modifier le code JS et dire (en Jquery) que ton attribut href change (en utilisant l'ID donnée).

Pour <a href="#" id="photo">code de to image</a>:


$('#photo').attr('href', 'lien de ton image à modifier');

En espérant t'avoir aidé

A+
Gaerebut
0
Réponse 2 / 7
widi70 Messages postés 649 Date d'inscription jeudi 4 janvier 2007 Statut Membre Dernière intervention 22 juillet 2019 65
Modifié par widi70 le 16/11/2010 à 12:17
Bonjour et merci de ton aide mais je ne sais pas ou mettre $('#photo').attr('href', 'lien de ton image à modifier');
dans le javascript?

Si je le met dans le javascript, comme ceci par exemple:
$('#photo').attr('href', 'coucou.php');
lorsqu'on clique sur les vignettes elles apparaissent en grand sur une autre page, j'ai essayer plus endroit dans le code
- apres les definition des variables
- Dans le for
- Dans le liens[i].onclick = function() {



Dsl mais je ne connait que tres peut le javscript .....

Voici mon code 
<html> 
<head> 
<script> 
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() {  
            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  
         
</script> 
</head> 
<body> 
<div id="galerie">  
    <ul id="galerie_mini">  
        <li><a href="images/1.jpg" title="photo 1"><img src="images/1.jpg" width='100px' alt="photo 1" /></a></li>  
         <li><a href="images/2.jpg" title="photo 2"><img src="images/2.jpg" width='100px' alt="photo 2" /></a></li>  
        <li><a href="images/3.jpg" title="photo 3"><img src="images/3.jpg" width='100px' alt="photo 3" /></a></li>  
        <li><a href="images/4.jpg" title="photo 4"><img src="images/4.jpg" width='100px' alt="photo 4" /></a></li>  

    </ul>  
  
      
    <dl id="photo">  
        <dt>Titre de la photo 1</dt>  
        <dd><a href="#" id="photo"><img id="big_pict" src="images/1.jpg"  width='300px' alt="Photo 1 en taille normale" /></a></dd>  
    </dl>  
</div>  
</body> 
</html>


Merci de ton aide
0
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
16 nov. 2010 à 13:58
Re,

il faut le mettre à la ligne avant return false;
Mais, en effet cela t'emmènera bien sur une autre page.
Je ne comprend pas trop ce que tu veux faire en fait avec ce lien ?

A+
Gaerebut
0
Réponse 3 / 7
widi70 Messages postés 649 Date d'inscription jeudi 4 janvier 2007 Statut Membre Dernière intervention 22 juillet 2019 65
16 nov. 2010 à 14:09
Ben j'ai mes 4 vignettes si je clique sur une elle s'aggrandit, mais par exemple si je clique sur la grande, ça m'ouvre une pop-up avec mon image en "encore plus grand"
Donc il faudrait que le lien sur la grande image soit différent à chaque fois que je change de vignette

Mais il ne faut pas que le lien s'ouvre lorsque je clique sur la petite seulement quand je clique sur la grande
tu voit le truc?
Merci de ton aide
0
Réponse 4 / 7
widi70 Messages postés 649 Date d'inscription jeudi 4 janvier 2007 Statut Membre Dernière intervention 22 juillet 2019 65
Modifié par widi70 le 16/11/2010 à 14:32
Enfaite ce que je veut vraiment c'est une galerie photo qui me permettrais d'avoir 4 petite vignette si tu clique sur une petite tu la vois un peu plus grande et si tu clique sur une grande elle devienne encore plus grande.

Si c'est pas le script d'alsacreation je m'en moque.
Par contre je ne veut pas que lorsque l'image s'aggrandit en "tout grand" elle pousse le reste de la page.....

Merci d'avance de ton aide


après quelques recherche j'ai trouvé ceci :
https://forum.alsacreations.com/topic-23-46793-1-Galerie-photo-avec-JavaScript---liens-sur-la-grande-image.html

mais mon image en grand n'apparait plus....
tu peut me donner un coup de main...
0

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

Posez votre question
Réponse 5 / 7
widi70 Messages postés 649 Date d'inscription jeudi 4 janvier 2007 Statut Membre Dernière intervention 22 juillet 2019 65
17 nov. 2010 à 09:08
up
0
Réponse 6 / 7
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
17 nov. 2010 à 15:43
Bonjour,

pour revenir au script précédent (pas le nouveau que tu as trouvé).
En fait, si tu veux que ce soit l'image dans un popup, il te suffis juste de mettre un onclick sur l'image moyenne et de changer ce onclick dynamiquement en fonction de la petite image cliquée.
En gros, c'est au même endroit que pour le "a href", sauf que là on agit sur l'attribut onclick de l'image moyenne via son id (=big_pict).
Pour faire du dynamique, je te conseil d'utiliser des noms d'images qui se suivent:

exemple:

image normale = pic.jpg

image petite = small_pic.jpg
image grande = big_pic.jpg

De cette manière, tu peux gérer les nom d'image dynamiquement !

A
Gaerebut
0
Réponse 7 / 7
widi70 Messages postés 649 Date d'inscription jeudi 4 janvier 2007 Statut Membre Dernière intervention 22 juillet 2019 65
18 nov. 2010 à 09:12
Bon alors je pense que je m'approche, mais je n'ai pas grande connaissance dans le javascript.
J'ai fait ceci : 
<html>
<head>
<script>
function ouvre(image){

window.open (image)
}
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() {  
            big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien  
			big_photo.onclick = this.href; 
            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;  

</script>
</head>
<body>
<div id="galerie"> 
    <ul id="galerie_mini"> 
        <li><a href="images/1.jpg" title="photo 1"><img src="images/1.jpg" width='100px' alt="photo 1" /></a></li> 
         <li><a href="images/2.jpg" title="photo 2"><img src="images/2.jpg" width='100px' alt="photo 2" /></a></li> 
        <li><a href="images/3.jpg" title="photo 3"><img src="images/3.jpg" width='100px' alt="photo 3" /></a></li> 
        <li><a href="images/4.jpg" title="photo 4"><img src="images/4.jpg" width='100px' alt="photo 4" /></a></li> 

    </ul>
 
     
    <dl id="photo"> 
        <dt>Titre de la photo 1</dt> 
        <dd><img id="big_pict" onclick="ouvre('images/1.jpg');" src="images/1.jpg"  width='300px' alt="Photo 1 en taille normale" /></dd> 
    </dl> 
</div> 
</body>
</html>


Le probleme est ceci :
big_photo.onclick = this.href;

je ne sait pas comment lui dire de prendre la variable qu'il y a dans la fonction onclick

Merci encore bcp de ton aide
0

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"
sidojaice -
JIP -

24 réponses
Pix
Anyssa -
vibe -

4 réponses
lien copié
alaurore -
LEFEUVRE -

7 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses