JQuery ensemble img src selon l'endroit où vous cliquez
J'ai utilisé du javascript pour le chargement d'une image sur mon site en fonction de la "petite" photos à l'ul sur lequel vous avez cliqué...
J'ai eu quelque chose comme ça :
<script type="text/javascript">
function viewImage(src, legende) {
document.getElementById("imageBig").src = "images/photos/"+src;
document.getElementById("legend").innerHTML = legende;
}
</script>
et en html, il suffit de :
des choses comme ça :
<ul id="ulPhotos">
<li>
<a href="#centre" onclick="javascript:viewImage('flute.jpg','La Reine de la Nuit au Comedia')">
<img src="images/photos/carre-09.jpg" alt="" />
</a>
<a href="#centre" onclick="javascript:viewImage('perichole.jpg','Manuelita - <em>La Périchole</em> à l’Opéra Comique')">
<img src="images/photos/carre-03.jpg" alt="" />
</a>
</li>
<li>
<a href="#centre" onclick="javascript:viewImage('12.png','Récital à Carnac, septembre 2008')">
<img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac Ré" />
</a>
<a href="#centre" onclick="javascript:viewImage('01.jpg','')">
<img src="images/photos/carre-01.jpg" alt="" />
</a>
</li>
</ul>
donc, vous voyez, j'ai pu, selon laquelle les petites photos dans la liste non triée sur lequel vous avez cliqué, la charge, notamment des photos, en passant par la src chaîne de caractères en argument à mon viewImage fonction...
mais j'ai décidé d'utiliser Jquery pour obtenir un certain effet de fondu. Mais je ne peux pas trouver un moyen de passer un argument qui serait de dire ma fonction JQuery photo à charge en fonction de là où j'ai cliqué...
coincé ici :
$(document).ready(function(){
$('#ulPhotos').click(function() {
var newSrc = $('#imageBig').attr("src", "images/photos/11.jpg");
});
});
Je ne veux pas le 11.jpg pour être codé en dur, j'ai besoin de faire passer au travers d'argument quand je clique sur un élément li dans mon élément ul id #ulPhotos...
J'espère que je suis assez clair désolé !
Vous devez vous connecter pour publier un commentaire.
karim79 donne une bonne solution, mais n'est pas réellement expliquer votre problème.
Vous installer le gestionnaire de clic à la liste elle-même, et non directement sur les images. Lorsqu'un joint jQuery comportement de rappel des feux,
this
est l'élément qui a été cliqué, vous voulez être l'un des liens environnant les images. Dans votre casthis
sera la liste elle-même.Vous n'avez pas nécessairement besoin d'ajouter une classe pour les vignettes.
$('#ulPhotos a')
vous aller tout aussi facilement. Je suis d'accord avec la suggestion d'utiliser undata-
attribut sur l'cliquable pour savoir qui grande image que vous souhaitez afficher.En outre, si vous sont va ajouter secondaires sur le comportement de l'un des éléments, vous voulez probablement pour empêcher le comportement par défaut de passe, donc quelque chose comme:
Une jolie solution simple consisterait à attribuer à une commune (le pouce ou quoi que ce soit) de la classe à toutes les petites images, et de stocker le nom du fichier le plus gros des images à l'intérieur de leurs attributs rel, par exemple:
données
est un autre mécanisme de stockage que vous pourriez envisager.Il est également assez fréquent (et simple) de suivre une convention particulière et "assembler" le nom de fichier de l'image basée sur le src de l'cliqué plus petit, par exemple:
Qui suppose que l'ensemble de vos images en pleine taille avec le préfixe 'big_', donc c'est une simple question de l'ajoutant "big_" à la src de l'cliqué sur la miniature.
merci à vous deux, mon site fonctionne, je donne le code final pour les débutants comme moi qui pourrait avoir les mêmes besoins...
voici la fonction :
voici les éléments html :
J'ai utilisé l'attribut alt pour ajouter des légendes afin d'être en mesure d'ajouter des balises html comme <em > parce que le titre s'affiche lorsque vous passez votre souris sur les vignettes, et je ne voulais pas les gens à voir des balises pour eux...
c'est parfois un peu lent lorsque vous cliquez sur très rapide, il peut rester sur la photo précédente pour un peu de temps à essayer d'abord, peut-être parce que je n'ai pas utiliser un CDN pour mettre la version compacte de jquery (j'ai lu un tel avis), je ne sais pas, je suis vraiment un débutant, mais il n'est rien de grave de toute façon...
par le chemin, la page est ici..http://www.marion-baglan.net/photos.htm