plugin carousel et plugin fancybox

Version imprimable

24/04/2009, 20h50
DiPSoMaNiE

plugin carousel et plugin fancybox
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:

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:

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... :cry:

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 ;)
24/04/2009, 20h59
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.
24/04/2009, 22h07
DiPSoMaNiE
Citation:

Envoyé par 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.

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:

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...
02/08/2009, 14h24
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
19/02/2010, 22h40
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).
09/03/2010, 09h40
Appollyon666

Bonjour,

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

Merci
09/03/2010, 10h55
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.

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:

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:

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.

09/03/2010, 12h13
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:

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.
09/03/2010, 12h19
Appollyon666

Je viens de tester, mais malheureusement cela ne fonctionne pas mieux!
09/03/2010, 12h26
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. 8O

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:

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:

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(); } });

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 :aie:, 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:

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>

10/03/2010, 16h22
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