Facebox manque Btn close & pas de loading.

Version imprimable

1 pièce(s) jointe(s)

bonjour,

Je suis en train de mettre en place sur un site le plugin Facebox, j'ai la librairie jquery 1.2.6, et le module facebox.

J'ai réussi à mettre en place, non sans mal l'ouverture d'une popup par dessus ma page contenant les vignettes, mais voila, pas d'image de chargement lors de l'ouverture de ma popup, ni de bouton "close" dans le coin droit de cette derniere.

Voici l'arborescence de mon dossier :

D:\SITE
| index.html
|
+---facebox

| b.png
| bl.png
| br.png
| closelabel.gif
| facebox.css
| facebox.js
| loading.gif
| README.txt
| tl.png
| tr.png
|
+---image

|thinapp_serial.JPG
|
+---js

|jquery.js
|
---vignette

|thinapp-popup.jpg

Voici maintenant le code de ma page html :
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test plugin jquery</title> <link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="facebox/facebox.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox({ loading_image : 'loading.gif', close_image : 'closelabel.gif' }) }) </script> </head> <body> <p> <a href ="image/thinapp_serial.JPG" rel="facebox"><img src="vignette/thinapp-popup.jpg" /></a> </p> </body> </html>
Je ne comprends pas pourquoi il me manque ces 2 éléments, pouvez vous m'aider, s'il vous plait. J'ai mis en piéce jointe le projet au format .zip

D'avance merci de votre aide, et de vos réponses.

04/01/2009, 17h08
Kerod

Ton architecture est mal représentée. Comme tu nous le montres je comprends que les images sont à la racine et que tu donnes pas le contenu des différents répertoires.

Mais je suppose que c'est pas le cas et que les images de facebox sont dans le répertoire du même nom. Si c'est bien le cas il faut donc mettre dans ton fichier l'url complète de ton image et non te référencer par rapport au répertoire facebox.
05/01/2009, 07h53
bigdule

Architecture

Bonjour,

et merci pour le post, mon architecture a été réalisée avec une commande permettant d'éditer le contenu d'un dossie. Mes images sont dans le dossier facebox (pour la partie facebox), dans le dossier vignette j'ai les miniatures, dans le dossier image il y a les images qui seront dans les popup. J'ai tenté d'adapter au code qui se trouve dans le head, celui qui appelle le plugin et ensuite initialise la mise en page de facebox. Mes recherche sur le web sont infructueuse, ce module est mal documenté, même sur le site de l'auteur (http://famspam.com/facebox), je n'ai pas trouvé mon bonheur.

j'ai réussi a adapté mon architecture en fonction de ce que j'ai compris dans le code, et les differents appels du module, des vignettes et images. Reste le probleme des 2 images (le loader & le btn close), qui bien que presentent ne sont pas visible. J'opte pour un mauvais adressage d'url. Je ne desespere pas de trouver, même si je commence a ramer grave.

A bientôt.
05/01/2009, 16h50
Kerod

Par rapport à ton arborescence pourquoi tu fais pas ce que je t'ai proposé ?
A savoir :'facebox/loading.gif' ?
05/01/2009, 17h33
bigdule

loading

Bonjour,

A l'origine, tout était dans la racine de mon site, tous les éléments facebox,

Dans mon dossier facebox, il y a les images loading.gig et closelabel.gif, tout est dans l'archive au format .zip sur mon premier post, comme ça l'arborescence de mon dossier est nickel.

Au début j'ai même été jusqu'a les mettre dans la racine de mon site (en doublons), mais rien non plus.

Je viens de trouver dans le dossier facebox, le fichier facebox.js il y a deux ligne qui appelent les images que je ne vois pas, je vais modifier les URLs : /facebox/loading.gif par facebox/loading.gif et même chose pour l'image closelabel.gif

En modifiant cela, mes 2 images manquantes sont maintenant visibles.

Je vais conserver mon fichier facebox.js ainsi, puisque je vois tous les éléments dans IE, Opera, Firefox, et Safari.

Cdt.

La meilleur config c'est comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('a[rel*=facebox]').facebox({
 	opacity : 1,
 	overlay : true
 });
 // lightbox activation
  if ($.facebox) 
    $('a[rel*=galerie]').facebox({
      loading_image : '/facebox/loading.gif',
      close_image   : '/facebox/closelabel.gif',
      next_image    : '/facebox/next.png',
      play_image    : '/facebox/play.png',
      pause_image   : '/facebox/pause.png',
      prev_image    : '/facebox/prev.png',
      slide_duration: 6
    });

Vérifier avec firebug en jetant un oeil dans réseau pour voir si une erreur 404 est retourné pour le fichier.
;)

18/01/2009, 18h40
bigdule

merci

Bonjour,

de retour chez moi (après une longue absence), je prends connaissancce de vos réponses, merci. J'ai modifie un peu certains fichiers, et j'ai enfin le resultats attendu.

Je trouve ça un peu tordu, pas facile a mettre en place, et surtout leger sur les explications sur le site du concepteur.

Qu'utilisez vous de votre coté ? est plus facile a mettre en place ?

Cdt.
18/01/2009, 18h50
Kerod

J'utilise prettyPhoto : http://www.no-margin-for-errors.com/...s/prettyPhoto/
18/01/2009, 18h54
bigdule

prettyPhoto

Merci pour la réponse, en plus ça a l'air bien expliqué.

Une question cependant, le projet que je suis en train de réalisé, contient des feuilles de styles, l'insertion d'un tel plug, s'il contien lui aussi un style, ne rien t'il pas de créer un conflit ?

Cdt.
18/01/2009, 18h58
Kerod

pas à ma connaissance :roll: