Discussion :

[DiPSoMaNiE]

Bonjour à tous,

Voilà je poste car je m'énerve sur quelque chose que je n'arrive pas à faire marcher... J'utilise 2 modules javascript : carousel et fancybox.

La fancybox marche bien toute seule, le carousel aussi. Seulement j'aimerais que les images du carousel, au clique, s'ouvre dans la fancybox. Pour cela, je demande à la fancybox de s'éxécuter lorsque l'on clique sur un élément ayant la class "galerie", avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$(document).ready(function() {
 
	$("a.galerie").fancybox({
 
                  // PARAMETRES
 
	});
});

Je me suis dit donc que ça allait marcher en rajoutant ces options lors de la créations des images dans le carousel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var innerHTML =  '<a class="galerie" href="' + url + '"><img id="dhtml-carousel-img-' + index + '" src="' + imgUrl +'" width="' +75 +'"/>'+ '<\/a>';

Seulement ça ne marche pas...

Les images et les liens (défini dans un tableau javascript ailleurs dans le code) sont bons, mais au clique sur l'image, pas de fancybox, juste le navigateur qui ouvre l'image.

Si j'affiche la source avec mon navigateur, le <ul></ul> correspondant à la liste des images dans carousel n'est pas rempli par les <li></li> des images.
Firebug cependant me montre bien qu'il est rempli avec les <li><a class="galerie"....><img src="" /></a></li>

Je ne connais pas grand chose au javascript, donc je ne sais pas d'où ça vient. Je me doute bien que la fancybox ne trouve pas de class "galerie" dans la page, puisqu'elle ne se lance pas, mais alors comment faire pour qu'elle trouve ces <a> avec la classe galerie, générés par le script du carousel ?

Je suis un peu perdu et un peu d'aide me serait utile.

Merci d'avance

[SpaceFrog]

en fait si je me souviens bien il me semble que le carrousel créé des elements qu'il positonne en absolute dans la page donc pas faciles à caser dans un conteneur.

[DiPSoMaNiE]

en fait si je me souviens bien il me semble que le carrousel créé des elements qu'il positonne en absolute dans la page donc pas faciles à caser dans un conteneur.

Heu... si, puisque le carousel s'affiche bien, il marche...

Il place bien les <li> dans le <ul> du carousel.

Voilà comment se présente le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="carousel-clip-region">
      <ul class="carousel-list" onmouseover="stopAutoPlay()" onmouseout="startAutoPlay()"></ul>
</div>

Donc ce qui se passe c'est que carousel récupère les images et leur lien dans un tableau, les inject dans cette <ul> avec des <li></li> en face.

Seulement, en affichant le code source de la page où ça se fait, on ne voit rien dans le <ul></ul> du carousel. Il n'écrit pas tout ça dans la source, mais je sais pas trop comment ça marche javascript en tout cas ça s'affiche.

Le problème c'est de faire comprendre à la fancybox de s'ouvrir lorsque l'on clique sur le lien de l'image...

[masseur]

Personne n'a résolu ce problème?

J'ai le même soucis.

Si je clique sur les images qui sont affichés dans mon caroussel, la box s'ouvre, par contre dès que je fais défiler le carousel, au clic sur le nouveau élément apparu, la box ne s'ouvre plus et l'image s'affiche seul dans une page vide.

Peux être à cause du $(document).ready(function() qui fait que les images qui sont cachées au départ ne peuvent pas être prise en compte?

Faudrait que dès que l'on fait défiler le carousel, on fasse une fonction permettant a chaque fois de prendre en compte les nouveaux éléments apparus?

Merci

[pit-it]

Je n'ai pas de réponse mais j'ai le même genre de problème avec fancybox et simplyscrol.

Le scrol fonctionne bien, fancybox fonctionne bien dans une autre page. Je veux que fancybox fonctionne lorsque je clique sur un lien généré par lui-même par jquery et ça ne fonctionne pas. (Comme si il y avait un "double appel" de jQuery qui ne serait pas pris en compte).

[Appollyon666]

Bonjour,

Avez vous trouvé une solution car j'ai le même soucis avec galleryview et fancybox.

Merci

[danielhagnoul]

Bonjour.

Je ne connais pas les plugins, mais j'ai un peu de temps disponible. Par contre, il n'est pas possible de m'intéresser à un problème qui ne contient pas du code ou un lien vers une page web.

[Appollyon666]

Merci, donc voici les plugins utilisés

Galleryview 1.1 => http://spaceforaname.com/galleryview
Fancybox 1.3=> http://fancybox.net/
Jquery 1.3.2

Mon code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="photosOccasions">
 
 
		<ul class="filmstrip">
		     <li><a class="zoom" href="cheminGrandeImage.jpg"><img src="petiteImage.jpg"/></a></li>
                     <li><a class="zoom" href="cheminGrandeImage2.jpg"><img src="petiteImage2.jpg"/></a></li>
                     <li><a class="zoom" href="cheminGrandeImage3.jpg"><img src="petiteImage3.jpg"/></a></li>
 
		</ul>
 
 
</div>

et le javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
$(document).ready(function(){
 
 
 
 
	$('#photosOccasions').galleryView({
	    filmstrip_size: 2,
	    frame_width: 200,
	    frame_height: 150,
	    background_color: 'transparent',
	    nav_theme: 'dark',
	    border: 'none',
	    show_captions:false
	});
 
        $(".zoom").fancybox(); 
 
 
});

Le problème vient du galleryview car dès que je commente l'appelle à galleryview, mes images apparaissent bien en overlay lors du clic.

J'ai essayé d'autre lightbox, mais même problème à chaque fois. Lorsque galleryview est actif, le clic sur la miniature ouvre le lien dans une nouvelle page.

[danielhagnoul]

Ce matin je n'ai plus le temps de tester, mais avez-vous essayé avec une écriture alternative pour ne plus dépendre d'une classe, exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();
 
$("a:has(img)").fancybox();

Voir : http://fancybox.net/blog en bas de page.

[Appollyon666]

Je viens de tester, mais malheureusement cela ne fonctionne pas mieux!

[Appollyon666]

Je viens de remarquer quelque chose de bizarre que je ne m'explique pas encore

En fait, a l'affichage je n'ai que 2 miniatures qui s'affiche, et j'arrive a avoir un overlay uniquement sur celle de droite.

Quand je fais défiler les images, automatiquement c'est l'image de droite qui fonctionne, celle de gauche redevient un lien classique alors que c'etait l'image qui fonctionnait juste avant.

[Appollyon666]

Bon j'ai trouvé une solution en attendant mieux.

En fait il y avait une redirection avec location.href dans le code.
Je l'ai donc remplacé par une simulation de click afin d'executer la fonction click de Fancybox.

J'ai modifier jquery.galleriew.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
j_pointer.unbind('click').click(function(){
	var a = $('a',j_frames[i]).eq(0);
	if(a.attr('target')=='_blank') {window.open(a.attr('href'));}
		else {location.href = a.attr('href');}
	});

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
j_pointer.unbind('click').click(function(){
	var a = $('a',j_frames[i]).eq(0);
	if(a.attr('target')=='_blank') {window.open(a.attr('href'));}
	else {
		$(a).click();	
	}
       });

[danielhagnoul]

Bonsoir.

Désolé, contrairement à ce que j'espérais j'ai été occuper jusqu'à ce soir 21 h !

J'ai perdu beaucoup de temps avec le plugin galleryview , que j'ai laissé tombé, car je me perds dans son système CSS qui est différent entre les exemples sur internet et le pack téléchargé.

J'ai finalement testé le plugin fancybox avec le plugin jcarousel (http://sorgalla.com/jcarousel/) qui était déjà sur mon ordinateur et je ne vois aucun problème pour combiner les deux, exemple :

[Edit 2010-03-10 08h00 amélioration du code]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		@import url("jquery.fancybox-1.2.1/jquery.fancybox/jquery.fancybox.css");
		@import url("../jcaroussel_thickbox/jcarousel/lib/jquery.jcarousel.css");
		@import url("../jcaroussel_thickbox/jcarousel/skins/tango/skin.css");
 
		@font-face {
		  font-family: "Bitstream Vera Serif Bold";
		  src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
		}
 
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family: "Bitstream Vera Serif Bold", serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			font-family: "Graublau Web", sans-serif;
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		img.caroussel {
			border:1px solid white;
		}
		</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.2.min.js"></script>
	<script charset="utf-8" src="../lib/jquery-easing-1.3.js"></script>
	<script charset="utf-8" src="jquery.fancybox-1.2.1/jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>
	<script charset="utf-8" src="../jcaroussel_thickbox/jcarousel/lib/jquery.jcarousel.pack.js"></script>
	<script>
		$(function(){
			// limiter le fancybox aux a ayant l'attribut rel="Group"
			$("a[rel='group']").fancybox();
 
			// http://sorgalla.com/jcarousel/
			$("#fancyboxcarousel").jcarousel();
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<ul id="fancyboxcarousel" class="jcarousel-skin-tango">
			<li>
				<a rel="group" title="Group title #1" href="jquery.fancybox-1.2.1/example/2_b.jpg">
					<img class="caroussel" src="jquery.fancybox-1.2.1/example/2_s.jpg" />
				</a>
			</li>
			<li>
				<a rel="group" title="Group title #2" href="jquery.fancybox-1.2.1/example/3_b.jpg">
					<img class="caroussel" src="jquery.fancybox-1.2.1/example/3_s.jpg" />
				</a>
			</li>
			<li>
				<a rel="group" title="Group title #3" href="jquery.fancybox-1.2.1/example/4_b.jpg">
					<img class="caroussel" src="jquery.fancybox-1.2.1/example/4_s.jpg" />
				</a>
			</li>
			<li>
				<a rel="group" title="Group title #1" href="jquery.fancybox-1.2.1/example/2_b.jpg">
					<img class="caroussel" src="jquery.fancybox-1.2.1/example/2_s.jpg" />
				</a>
			</li>
			<li>
				<a rel="group" title="Group title #2" href="jquery.fancybox-1.2.1/example/3_b.jpg">
					<img class="caroussel" src="jquery.fancybox-1.2.1/example/3_s.jpg" />
				</a>
			</li>
			<li>
				<a rel="group" title="Group title #3" href="jquery.fancybox-1.2.1/example/4_b.jpg">
					<img class="caroussel" src="jquery.fancybox-1.2.1/example/4_s.jpg" />
				</a>
			</li>
		</ul>
	</div>
</body>  
</html>

[Appollyon666]

En effet, jcarousel n'a pas le même problème que galleryview, je l'ai essayé hier mais j'avais un petit bug, lors que j'arrivais sur la dernière photo, le bouton next ne se grisé pas et je pouvais encore cliquer dessus.

Mais bon pour l'instant ma solution me convient bien tant que je n'ai pas de vrais lien à mettre sur mes photos