11548 sujets

JavaScript, DOM et API Web HTML5

JQuery, récuperation attribut : undefined

Bonjour,

J'ai un petit problème, je pense tout bête, de JQuery.
Je n'arrive pas à récupéré la source de mon image !

j'ai "undefined" et je ne vois pas pourquoi.

Merci.

PHP

<div id="galerie">
		<?php
			$nbimg = count($fichier);
			for ($i=1;$i<$nbimg+1;$i++)
			{	
				echo '<a href="#">';
				echo '<img src="'.$dirImg.$fichier[$i].'" alt="image de la commune" title="cliquez pour zoomer" onclick="Zoomit();" />';
				echo '</a>';
			}
		?>
	</div>


JQuery

function Zoomit()
{
	//$(this).find("img").css("border","9px solid red");
	//alert( $(this)  );
	var urlimg= $("img",this).attr("src");
	
	var moi = $(this);
	var moi2 = $(this).find("img");
	var moi3 = $("img",this);
	
	alert(urlimg);
	$(this).css("border","9px solid blue");
	//$("img",this).css("border","9px solid blue")
}
l'idéal serait de séparer le JS et le HTML

Tu mets une class sur tes images : <img class="monOnClick" ...>

Puis tu fais une action sur le clic


$('.monOnClick').click(function(e) {
  e.preventDefault();

 alert($(this).attr('src'));
});
Le click je le mets sur le a href, je sais que je n'ai normalement pas besoin des a href, mais c'est quand même plus correct de mettre les images dedans d'autant plus que j'ai un survol.


#galerie a:hover img ,#galerie a.courant img {
	border:solid 2px red; 
}


Mon Js est bien dans un fichier js, je sais que je pourrais attacher un évènement sur l'id de mon div par exemple, mais le fait est que mon js est commun à plusieurs pages et que la partie "galerie" n'est présente que sur 2 pages, ce qui signifie que la tentative de "link" de l’évènement sera fait dans les autres pages non ?
conan76 a écrit :
Le click je le mets sur le a href, je sais que je n'ai normalement pas besoin des a href, mais c'est quand même plus correct de mettre les images dedans d'autant plus que j'ai un survol.

Si j'en crois ton code source du premier message, tu ne met pas ton click sur le href ...
Et non ce n'est pas du tout plus correcte. Un lien c'est fait pour linker quelque chose. Si le JS est désactivé ton lien n'amène nul part à l'heure actuelle.
Ce n'est ni bon pour le référencement, ni bon pour la sémantique.

conan76 a écrit :


#galerie a:hover img ,#galerie a.courant img {
	border:solid 2px red; 
}


Mon Js est bien dans un fichier js, je sais que je pourrais attacher un évènement sur l'id de mon div par exemple, mais le fait est que mon js est commun à plusieurs pages et que la partie &quot;galerie&quot; n'est présente que sur 2 pages, ce qui signifie que la tentative de &quot;link&quot; de l’évènement sera fait dans les autres pages non ?

Là encore non ... à toi de mettre un id unique sur la page de ta galerie, et aucune action ne sera faites sur les autres pages.
Pour le onclick, désolé c'est en le bougeant en faisant différent test, je pensais avoir tout remis en "normal" avant le post.
donc oui, voilà pourquoi je voulais le mettre sur le "a".

J'ai trouvé pour le onclick, il me fallait passer le this à la fonction sinon le this correspond à l'ensemble de la page, j'ai cru que le contexte était passé.

justement pour l'id unique, comme j'utilise des composant externe, je ne voudrais pas que mon id que je pense unique existe dans un composant externe par exemple lightbox utilisé dans une autre page et que l’évènement soit donc déclenché.
je viens de prendre en compte ce que tu m'as dis :


$(document).ready(function(){

	$("#khorgalerie a").click(function(e){

		var me = $("#khorgalerie a");
		me.addClass("active");		
	});
});


Mon problème maintenant c'est que mon "me" n'est pas l'élément cliqué,c'est tout mes "a", comment puis-je le récupérer ?
var me = $("#khorgalerie a");

à remplacer par

var me = $(this);
Modifié par kenor (16 Feb 2012 - 11:54)
Bon ça avance mais voilà que maintenant ce morceau de code est devenu "incompatible" avec lightbox.

Je mets "prototype.js" : pas de problème
Je mets "scriptaculous.js?load=effects,builder" : problème, j'ai (sous chrome parce que sur IE c'est moins clair) le message suivant :

Uncaught TypeError: Cannot call method 'click' of null
(anonymous function) common.js:15
f.Callbacks.n jquery.js:2
f.Callbacks.o.fireWith jquery.js:2
e.extend.ready jquery.js:2
c.addEventListener.B jquery.js:2

Donc je ne comprends pas car je n'ai encore rien mis pour lightbox que j'ai déjà un script qui "analyse" mes liens ?

Mon code common.js (pour le moment)

$(document).ready(function(){

	$("#khorgalerie a").click(function(e){	
		e.preventDefault();	
		
		$("#khorgalerie img").removeClass("active");
		$("img",this).addClass("active");
		
		$("#zoom img").attr("src",$("img",this).attr("src"));
		
	});
});
Sujet clos
Aller à