[Résolu] FancyBox et Pagination

Bonjour,

Suite à mon précédent problème résolut avec le plug in pagination ( http://forum.alsacreations.com/topic-5-43193-1-Resolu-JQuery-et-le-plugin-quotpaginationquot.html ), j'ai intégré Fancybox pour ouvrir d'une jolie manière les images paginées.

Sauf que ... ça ne marche pas :D:D

pour exemple voici la page en question : http://tsu-info.info/novart/galtest.php

Les trois premières images sont inclues en brute dans le HTML pour servir de témoins : fancybox fonctionne.
Les suivantes sont paginées... et ça ne marche plus ...
Elles sont affichées par la fonction :

function admMontrerGalerie($database_test, $test)
{
	mysql_select_db($database_test, $test);
	$query_R = "SELECT * FROM novart_tableaux ORDER BY `ordre` DESC";
	$R = mysql_query($query_R, $test) or die(mysql_error());
	$row_R = mysql_fetch_assoc($R);
	//$totalRows_R = mysql_num_rows($R);
	$cpt = 0;
	$nbafficher = 3;
	do { 
		echo '<div class="result">';
		echo '<a id="single_image" href="'.$row_R['img_g'].'" alt="" ><img src="'.$row_R['img_p'].'" alt=""/>';
		echo '</div>';
		if($cpt%$nbafficher == 0) { echo "<br />"; }
		$cpt++;
	} while ($row_R = mysql_fetch_assoc($R)); 	

}

J'avais essayé de rajouter

    <script type="text/javascript">
		$(document).ready(function() {
			$("a#single_image").fancybox();
		 });
	</script> 

juste avant la boucle while, et là, le fancybox de la première page fonctionnait, mais le fancybox sur les suivantes ne marchait plus

C'est à n'y rien comprendre, ais-je loupé quelque chose ?

Merci !
Sébastien
Modifié par Sebastien_91 (12 Aug 2009 - 11:45)

Sebastien_91 a écrit :
C'est à n'y rien comprendre, ais-je loupé quelque chose ?

Oui: travailler avec un code HTML valide, par exemple. Le validateur du W3C signale 41 erreurs. Pour ma part, je vois deux erreurs flagrantes qui peuvent expliquer le problème rencontré.

Re-bonjour !

Je suis désolé d'avoir laissé un code cracra, je n'avais pas fais attention, je pensais l'avoir passé au validator mais c'était une autre en fait .
Ça me tiens aussi à cœur car j'apprends à travailler le plus proprement possible désormais.
Il ne reste qu'une erreur mais je ne sais comment la résoudre donc au passage peut être que tu sauras ^^ (tu la verras façilement au validator).

Merci encore du temp que tu m'accordes

Sébastien

Sebastien_91 a écrit :
Il ne reste qu'une erreur mais je ne sais comment la résoudre donc au passage peut être que tu sauras ^^ (tu la verras façilement au validator).

Pour l'erreur sur le signe «<» dans ton code JavaScript, tu peux l'éviter soit en plaçant ton code JavaScript dans un fichier externe, soit en utilisant HTML 4.01 plutôt que XHTML 1.0. Ou bien tu peux ignorer cette erreur, qui n'a pas de conséquences.

Il reste par contre une autre erreur signalée par validator.nu cette fois:

<a class="single_image" href="tableaux/norm_J.jpg" />

L'élément A ne peut pas être fermé ainsi. Le / est en trop et il manque un </a>. Et ce, pour de multiples liens. J'avoue être assez étonné que le validateur du W3C ne relève pas cette erreur.

Bonjour,

Effectivement je suis plutôt étonné de ne pas m'en être rendu compte par moi même avant, pour le fait de n'avoir pas fermé les balises a ... !

En ce qui concerne l'erreur Javascript, je passerais le code en fichier externe (car de toutes façon à terme, il y en aura pas mal), merci du conseil !

Ça me semble beaucoup mieux non ? C'est beaucoup plus propre mais le fancybox sur la pagination ne fonctionne toujours pas

Sans vouloir faire de "up", personne ne saurait m'aider ?

Ok, je crois avoir cerné le problème.

Tu as dans ta page deux séries d'images. La première est celle utilisée comme test (série de trois images) en début de contenu. La seconde est une liste d'images dans un bloc en display:none.

Lorsque la page se charge, et que tu initialises le plugin Fancybox, il s'applique correctement à la fois sur les images de test, et sur les images cachées. Tu peux le vérifier avec Firebug (ou outil équivalent), en désactivant le display:none de div#hiddenresult. Ta deuxième série d'images apparait alors, et tu peux alors constater que les fonctions de Fancybox fonctionnent pour ces images.

Maintenant, qu'en est-il des images affichées dans div#Searchresult? Les noeuds DOM correspondant à ces images sont créés APRÈS l'appel de Fancybox. Donc forcément, ça ne peut pas marcher.

Le chargement de la page se déroule ainsi:

1. Le code HTML de la page est reçu par le navigateur.

2. Le code JavaScript externe est téléchargé, et le code JS qui le suit directement cet appel est lu galement. La méthode ready de l'objet jQuery(document) stocke les fonctions à exécuter une fois que le DOM sera construit, dans l'ordre où elles apparaissent.

3. Le contenu de BODY est chargé et analysé.

4. Une fois le code HTML analysé (arbre DOM construit), le code suivant est exécuté:

$("a.single_image").fancybox();

Cette méthode associe un gestionnaire d'évènement (click) aux liens portant la classe "single_image". À ce stade du chargement de la page, ces liens correspondent aux deux séries d'images évoquées au début de ce message. Le contenu de div#Searchresults est le noeud texte suivant: "This content will be replaced when pagination inits."

5. Juste après, le code JS exécuté est:

initPagination();

Code qui va remplacer le contenu de div#Searchresults par une série de DIV contenant des liens avec classe "single_image". Aucun évènement particulier ne sera associé à ces liens (vu que tu ne le demandes jamais).

En conclusion: tout marche parfaitement comme tu le demandes, affaire classée.

Une solution, tout de même: si tu inverses les actions 4 et 5, le plugin Fancybox sera actif sur les trois images affichées dans div#Searchresults.

Un problème avec cette solution: dès que tu changes de «page», le contenu de div#Searchresults est modifié, et ça ne marche plus.

Solution au problème de la solution: il faut appeler $("a.single_image").fancybox(); après chaque changement de «page». C'est un peu bourrin comme méthode, mais ça peut suffire. Pour une solution plus subtile, il y a http://docs.jquery.com/Events/live (requiert jQuery 1.3), mais le script utilisé (Fancybox) n'est peut-être pas prévu pour, donc à toi de voir si tu te sens capable de l'adapter.

Génial !

Je ne pensais pas que le problème venait de ça ! Car les liens de classes single_image sont présent dès que la page est chargée, et je me disais que la mise à jour de la page (via la pagination) ne perturbait rien vu que ça ne faisait que "déplacer" des div (et donc toucher au DOM). On sent que vous avez beaucoup plus d'expérience que moi, je m'incline

J'ai donc appellé

$("a.single_image").fancybox();

après chaque changement de "page", et ça marche :

			function pageselectCallback(page_index, jq){ 
			  $('#Searchresult').empty(); 
			  start_item_index = page_index * items_per_page; 
			  for(i = start_item_index; i < start_item_index + items_per_page; ++i) { 
				var new_content = $('#hiddenresult div.result:eq('+i+')').clone(); 
				$('#Searchresult').append(new_content); 
				$("a.single_image").fancybox();
			  } 
			  return false; 
			} 

Merci beaucoup de ton aide ! le soucis était tout bête une fois qu'on en avait connu sa cause (comme toujours me direz-vous).

Au passage je remercie la communauté Alsacréation, qui est très sympathique et à l'écoute !

Problème résolu, merci encore,
Au prochain problème

Sébastien.