Accueil > Docs > Ouvrir une fenêtre Fancybox sans clic

Ouvrir une fenêtre Fancybox sans clic

jeudi 7 janvier 2010, par b_b

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.

Messages

  • 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 ?

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

  • 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

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

    ++

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

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

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

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

    ++

  • Bonjour,

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

    Merci d’avance

    hg

  • 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’

    ) ;

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

  • 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

    ++

  • Salut,

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

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

    merci.

Un message, un commentaire ?

Qui êtes-vous ?
Votre message

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.