Ouvrir une fenêtre Fancybox sans clic

jeudi 7 janvier 2010

SPIP / jQuery / plugin / astuce / fancybox

Voici une petite astuce pour ceux et celles qui utilisent le plugin Fancybox pour SPIP. Dans certains cas, on souhaite ouvrir une fenêtre Fancybox sans que le visiteur clique sur un lien (au chargement de la page par exemple). Pour ce faire, il suffit d’utiliser le code suivant.

<a href="http://www.spip.net/squelettes/img/spip.png" id="fancy_auto"></a>
<script type="text/javascript">
        (function($){
                $(function(){
                        $("a#fancy_auto").fancybox({
                                "hideOnContentClick": false
                        }).trigger("click");
                });
        })(jQuery);
</script>

Le principe est assez simple. Pour commencer on insère un lien vide dans sa page. On pourra le cacher à l’aide des CSS avec la propriété display:none; si nécessaire.

Ensuite, on insère un petit bout de javascript qui dans notre cas se lancera au chargement de la page. Ce script va "simuler" un clic sur notre lien à l’aide de la fonction jQuery trigger().

Et voilà :)

Source de l’astuce sur la liste de Fancybox.

Vos commentaires

  • ?

    Bonjour,

    Merci du tuyau, mais cel ne fonctionne pas avec le plugin spip, en l’occurence, les paramètre personnalisé via cfg ne sont pas retenus et impossible de lancer une galerie.

    Pour lancer avec les paramètres de spip :

    <script type="text/javascript">

           (function($){

                   $(function(){

                           $("a.fancybox").extend({

                                   "setting": []

                           }).trigger("click");

                   });

           })(jQuery);

    </script>

    mais je n’arrive pas à conserver les données du diaporama.

    avis aux bonnes idées ?

    7 février 2010, 08:41

  • vaillant

    Trop bien merci, c’est exactement ce que je chercher.

    28 mai 2010, 09:58

  • synopsis

    Peut-on resizer la boite ? Et si oui, où ? Je suis bien embêté, je suis en html (ça fonctionne, mais probleme de taille de la boite d’affichage).

    Merci

    21 août 2010, 17:05

  • bb

    Oui c’est possible, toutes les potions sont décrites sur la page de documentation du script fancybox :

    http://fancybox.net/api

    Il sufit donc d’ajouter les paramètres width et height à ton appel de fancybox.

    ++

    21 août 2010, 20:20

  • ?

    Merci !
    Je viens juste de m’en servir pour mon site et ça marche très bien :)

    18 octobre 2010, 17:02

  • anonyme

    Merci vous m’enlevez une sacrée épine du pied Merci beaucoup ;)

    28 janvier 2011, 09:11

  • kvf300

    Génial ! Par contre j’aurai une question bète mais où doit on mettre le contenu que l’on souhaite afficher ?

    28 février 2011, 19:50

  • bb

    Salut, comme c’est expliqué dans la source de l’astuce, il faut placer le contenu à afficher dans un lien comme d’habitude :

    <a id="fancy_auto" href="images/pic01.jpg"></a>

    Ou dans une div si c’est du contenu "inline", etc.

    ++

    1er mars 2011, 10:19

  • hg

    Bonjour,

    Merci, cela marche très bien mais comment faire pour mettre un lien sur l’image dans la fancybox ?

    Merci d’avance

    hg

    16 septembre 2011, 17:50

  • romain calmon

    encore plus simplement sans simulation de click, manual call ( dans la doc )

    $.fancybox(

    Hi !

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque

    ’,

    ’autoDimensions’  : false,
    ’width’  : 350,
    ’height’  : ’auto’,
    ’transitionIn’  : ’none’,
    ’transitionOut’  : ’none’

    ) ;

    29 septembre 2011, 11:11

  • jluc

    Esct- ce que l’on peux la programmer pour la fermer ?

    8 novembre 2011, 07:39

  • bb

    Salut, on peut tout faire ou presque. Comme l’indique la doc de fancybox, on peut fermer la box ouverte avec la méthode suivante : $.fancybox.close().

    cf : http://fancybox.net/api

    ++

    11 novembre 2011, 11:25

  • zaralander

    Salut,

    Excellente solution mais chez moi aucun argument n’a besoin d’être spécifié :

    $("#element").fancybox().trigger("click") ;

    merci.

    16 avril 2013, 12:05

Répondre à cet article

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.