Ce code a été mis à jour en réponse aux commentaires qui signalaient un dysfonctionnement

Je ne sais pas si vous connaissez déjà Fancybox, une alternative à Lightbox, pour créer facilement des galeries de photos avec jQuery, mais dans ce tutoriel, je vais plutôt vous présenter la méthode pour ouvrir des fausses popup en JavaScript à l’aide de ce sympathique plugin.

Prérequis

D’abord, rendez-vous sur le site de Fancybox pour télécharger les fichiers nécessaires au bon fonctionnement de ce plugin.

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.6"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<script type="text/javascript" src="fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="fancybox/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript" src="fancybox/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>

Le code

Créez ensuite 2 fichiers : test.html et test.php par exemple.

Voici le code pour le fichier test.html (dans le head entre les balises script bien sûr)

$(document).ready(function(){ // quand la page est chargée
    $(".test").fancybox({
 	maxWidth	: 800, 		
        maxHeight	: 600,
        fitToView	: false,
 	width		: '50%',
 	height		: '50%',
 	autoSize	: false,
 	closeClick	: false,
 	openEffect	: 'none',
 	closeEffect	: 'none',
 	ajax: {
 		type     : "POST",
 		cache    : false,
 		data	 : "var=Artcompix à votre service",
 		success	 : function(data){ $.fancybox(data); },
 	}
     }); 
});

Ensuite, créez un lien quelque part dans le body de votre page html pour pouvoir appeler votre fichier php

<a class="test fancybox.ajax" href="test.php">Ajax</a>

Remarque : La classe fancybox.ajax permet de demander à Fancybox de récupérer l’url du fichier php directement dans l’attribut href du lien considéré.

Le fichier php

Créez ensuite un fichier php chargé de traiter les données au niveau du serveur. Notre fichier à nous ne fait pas grand-chose, mais vous avez maintenant le principe pour faire des requêtes à une base de données par exemple…

<?php
  if( isset($_POST['var']) && !empty($_POST['var']) ) {
    $retour = $_POST['var'];
  } else {
    $retour = 'Une erreur est survenue.';
  }
  echo $retour;
?>

Voilà ! Si ça ne fonctionne pas, vérifiez d’abord que jQuery est bien chargé, ainsi que les différents fichiers JavaScript et CSS nécessaires au bon fonctionnement de Fancybox. Vérifiez ensuite les chemins, source d’erreur très fréquente…

Si rien ne marche, utilisez les commentaires ci-dessous, nous vous aiderons.

Les fichiers de l’exemple à télécharger

17 réponses

  1. Bonjour

    J’ai ptit soucis :

    En gros je génère un tableau dynamiquement avec des checkbox. Au moment où l’utilisateur coche une case je rempli dynamiquement un input[hidden] avec un séparateur et les id…
    Quand l’utilisateur à fini son choix il clique sur un lien qui ouvre un fancybox contenant un autre tableau avec seulelment les lignes qu’il a coché…
    Bref la fancybox contient une page php qui est censé recevoir les « id » en post pour pouvoir construire le nouveau tableau.

    $(« #preValid »).fancybox({
    ajax : { type : « POST », data : var=’+$(‘#listFtra’).val() }
    );

    Le soucis c’est qu’il me renvoi « var » vide alors que mon input est bien rempli (vérifié avec firebug)… J’ai même testé en faisant un simple alert et je récupèrerai bien les données de mon input…

    une idée ?

      1. Ouah ça fait un moment ce bug… J’ai réussi à le régler mais je me rappelles plus trop le comment… Désolé si je retrouve je vous préviens :p

  2. Bonjour,

    Je ne dois pas être aussi doué que les précédents. J’ai le message d’erreur suivant affiché dans une « Fancybox » :
    « The requested content cannot be loaded.
    Please try again later. »

    Pourtant le lien dans l’attribut href est correct.

    Merci d’avance pour votre aide.

        1. Je viens de tester vite fait et j’ai la même erreur que toi… Moralité : ce code ne marche plus !
          Pour quelles raisons ? Des raisons liées au serveur peut-être… (sécurité). Je ne sais pas
          Je suis allé faire un tour sur le site de fancybox et beaucoup de personnes ont la même erreur que toi.
          J’essaye de regarder ça dès que j’ai un peu de temps 😉

          Question : pourquoi as-tu besoin de fancybox ? Parce qu’avec jQuery, tu peux lancer des appels AJAX aussi

          A+

          1. Ok. Tu développes une boutique entièrement à la main ? Lot of work 😉

            Je mets le code à la fin de l’article parce que wordpress me bouffe le code…

            J’ai oublié de te préciser que pour cet exemple il faut créer un DIV #popup que tu styles à ton goût.

    1. Bonjour,
      tiens moi je suis sur Paris mais originaire de Rully…

      Bon le code d’origine fonctionne mais impossible de l’adapter a une page php appelée depuis un template smarty

      Si vous avez des tuyaux je suis preneur

      Merci

      Et bon we

      1. Bonjour,

        Et bienvenue au club fancybox71 😉 Tiens un petit verre de Rully blanc…
        Heum, concernant le code d’origine, c’est vrai que pour moi ça a fonctionné jusqu’ici, mais sur des sites basés sur worpdress.
        Donc, je suis content de voir que pour toi ça fonctionne aussi basiquement.
        Concernant ta page, aucune idée comme ça sans voir du code ou des messages d’erreurs (Firebug ?)
        Tu t’en sers aussi pour afficher des données avec AJAX ?

        A+

Répondre à Sébastien Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.