[resolu] Arret cycle au rollover et fondu sur images dynamiques

Hello tout le monde
Bon je tâtonne un peu en javascript donc j'aurai besoin d'un petit peu d'aide

1 Je charge une série de lien et d'image issu d'une query msql
2 au lancement de la page par défault j'utilise une fonction cycle pour faire des fondus sur les images issus de la requete mysql

3 au passe de la souris sur les liens je voudray que la fonction cycle se stop et qu'un fondu s'effectue sur l'image courante (fadout) puis un fade in sur l'image associée au lien

Voila ce que je sors pour mon tableau de resultat un lien => une image

$output .= '<img src="_images/smal_arrow.jpg" width="19" height="15" alt="sllov_arrow"><a href="sllov_mobilier_design_collection_produit.php?pid='.$result['id_product'].'&&catid='.$thisid.'" class="itemI" id="l'.$result['id_image'].'">'.$result['name'].'</a><br/>';
	$outputImage .= '<img src="img/p/'.$result['id_cat2'].'/'.$result['id_cat'].'/'.$result['id_image'].'-large.jpg" width="452" height="425" alt="sllov_mobilier_design" id="'.$result['id_image'].'">'; 

Mon code jquery

$(document).ready(function() {
    $('.slideshowsub').cycle({
		
		fx: 'fade', 
        speed:  3800
	});
	
	$('.itemI').mouseover(function() {
	$('.slideshowsub').fadeOut("slow");
	$('.slideshowsub').delay("50").fadeIn("slow"); // bah la c'est pas identifier avec l'id donc ca reprend le cycle et ca n'a pas arreter le cycle c'est faux donc
	});
});

et mes div

<? echo $output;  ?><div class="slideshowsub"> <? echo $outputImage; ?> </div>

Voila si quelqu'un avait une idée pour m'aiguiller. Je n'arrive pas en faite a identifier l'image current et celle a charger en fonction de l'id de lien = id de l'image pour activer le jquery

Merci d'avance
Modifié par ubik174 (26 Jun 2011 - 20:52)

  $('.slideshowsub').cycle({
		
		fx: 'fade', 
        speed:  3800
	});

//je recherche l' ID du lien
$('.itemI').mouseover(function() {
var currid = $(this).attr("id");
alert(currid);

// Ca c'est ok
	

//Apres je voudrais trouver l'ID de l'image actuellement affichée
//Et faire un fadeIn sur l'image ayant la meme ID que le lien 
// Bon mais la le code c'est pas bon du tout

	var $pictoswap	= $('.slideshowsub'),
	$pic		= $pictoswap.find('img #id'),
	$('.slideshowsub').fadeIn("slow");
	});

déja, si tu as une img et un lien ayant la meme id c'est que t'as raté un paragraphe dans tes tuto web

ensuite je te conseille plutot de passer l'id en class pour l'img, ainsi tu peux la matcher en mettant simplement

    $('.' + currid)
    //et tu en fais ce que tu veux, comme par ex.
    $('.' + currid).fadeIn('slow')

Edit : Petite précision au cas ou tu n'ai pas saisis :

$outputImage .= '<img src="img/p/'.$result['id_cat2'].'/'.$result['id_cat'].'/'.$result['id_image'].'-large.jpg" width="452" height="425" alt="sllov_mobilier_design" class="'.$result['id_image'].'">';

Modifié par ptitvincent (23 Jun 2011 - 17:27)

ah oui en effet l'interaction est deja mieux, merci pour la réponse rapide
Bon donc la en effet avec la class je peux interagir

maintenant une toute petit question ca se passe comment dans la mesure ou j'ai une fonction cycle au chargement de la page ?

comment je choppe la l'id de l'image pour lui dire :
je fade out l'image actuellement affichée avec celle associée au lien

Et pour information plus générale si le rollover intervient alors que le cylce est entrain de faire fadin fadout sur deux images j'identifie comment id de l'image affichée (en somme il considere une image affiché lors d'un fade jusqu'a quand?) il faut que je stop d'abor mon cycle ?

je ne sais pas si je suis tres clair

non, tu fais exactement ce que je t'ai dit

tu as récupé l'id du lien dans la varriable "currid", avec le code de boucle qui créé les image et que je t'ai modifié, j'ai une class identique à l'id du lien en question.

ex.

si ma boucle fabrique un lien avec id="0014"

alors currid vaudra 0014 on est d'accord ?

à coté de ca une image a été ajouté grace à la boucle avec class="0014"

donc si je lui dit :
$('.' + currid)
lui verra :
$('.0014')

et donc je sais que c'est l'image qui correspond à ce lien.

Non ? C'est pas ce que tu cherche ?

	
$(document).ready(function() {
    $('.slideshowsub').cycle({
		
		fx: 'fade', 
        speed:  3800
	});

	$('.itemI').mouseover(function() {
	var currid = $(this).attr("id");
	$('.' + currid).fadeOut('slow') ;
		
	});
});

Hello
Alors si je fais ca et que je rollover le premier lien en effet l'image de droite fadeout
Par contre pour le fadein ca ne marche pas dans la mesure ou je devrais dire
Fadout toute les images qui sont deja affichées et fadin $('.' + currid)

Merci pour tes réponses efficaces
Modifié par ubik174 (25 Jun 2011 - 07:08)

Bon la je comprend pas
j'ai bien fait comme il semblerait que ce soit fait en dissociant bien les id et les class

Ma query donc sort

$output .= '<a href="'" class="itemI" id="'.$result['id_image'].'">'.$result['name'].'</a>';
$outputImage .= '<img src="img/p/'.$result['id_cat2'].'/'.$result['id_cat'].'/'.$result['id_image'].'-large.jpg" class="apic" id="picx'.$result['id_image'].'" ">'; 

et mon jquery

On a bien si survoll des liens avec la class itemI
On extrait pour cet element ID
On fadeOut toutes les images de la class apic
On fadeIn l'image avec l'ID picx+ID

$(document).ready(function() {
    $('.slideshowsub').cycle({
		fx: 'fade', 
        speed:  3800
	});
	
       $('.itemI').mouseover(function() {
		var currid = $(this).attr("id");	
		$('.slideshowsub').cycle('stop');
		$('.apic').fadeOut(300);
		$('#picx' + currid).fadeIn(300);
	}); 
	

	
		
});

lol le boulet navré