Facebox manque Btn close & pas de loading. [Fait]

**bigdule** · 03/01/2009, 17h05

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

|
+---image

|thinapp_serial.JPG

|
+---js

|jquery.js

|
---vignette

|thinapp-popup.jpg

Voici maintenant le code de ma page html :

Code html :

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
<!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.

**Kerod** · 04/01/2009, 17h08

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.

**bigdule** · 05/01/2009, 07h53

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.

**Kerod** · 05/01/2009, 16h50

Par rapport à ton arborescence pourquoi tu fais pas ce que je t'ai proposé ?
A savoir :'facebox/loading.gif' ?

**bigdule** · 05/01/2009, 17h33

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.

**gtraxx** · 07/01/2009, 11h08

La meilleur config c'est comme ceci :

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
$('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.

**bigdule** · 18/01/2009, 18h40

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.

**Kerod** · 18/01/2009, 18h50

J'utilise prettyPhoto : http://www.no-margin-for-errors.com/...s/prettyPhoto/

**bigdule** · 18/01/2009, 18h54

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.

**Kerod** · 18/01/2009, 18h58

pas à ma connaissance

Facebox manque Btn close & pas de loading. [Fait]

jQuery

Discussions similaires

Partager

Partager