Ouvrir une popup avec Fancybox et appel AJAX

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 commentaires

  • Maison du net dit :

    Excellent script php et javascript ! merci pour le tutoriel

  • Stick dit :

    merci beaucoup pour ce ptit tuto !

  • Stick dit :

    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 ?

  • Sébastien dit :

    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.

    • artcompix dit :

      Bonjour Sébastien,

      Pas facile de répondre sans voir un peu de code 😉 Utilisez-vous Firebug pour débugger (onglet « console ») ?

      • Sébastien dit :

        J’ai mis une archive sur mon serveur :
        http://esprit-beaune.fr/jQuery%20&%20FancyBox.zip

        Merci bien pour ton aide !

        • artcompix dit :

          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+

          • Sébastien dit :

            Merci pour ton retour.

            En fait, je veux m’en servir pour ce site :
            http://esprit-beaune.fr/

            Je veux mettre le résultat de traitements PHP dans une FancyBox.

          • artcompix dit :

            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.

  • Sébastien dit :

    Décidément, ça ne veut pas. Pourtant, je suis tes directives :/

    Si tu as le courage de jeter un dernier coup d’œil à mon archive :
    http://esprit-beaune.fr/jQuery%20&%20FancyBox.zip

    Je viens de voir que tu es de Chalon, comme moi !

    • artcompix dit :

      Salut Chalonnais 😉

      Il y a un truc que j’avais oublié de te préciser : il faut supprimer l’url dans le href pour faire un pseudo lien

      Je teste AJAX !
      

      allez cette fois c’est la bonne 😉

    • timmy dit :

      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

      • artcompix dit :

        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+

  • Sébastien dit :

    Bon, j’ai trouvé !

    http://stackoverflow.com/questions/8781722/putting-the-result-of-an-ajax-function-in-a-fancybox-1-3-4

    Merci pour ta patience et longue vie aux chalonnais.

    Sébastien, parisien à présent.

Laisser un commentaire