web-dev-qa-db-fra.com

Ouvrir fancybox à partir de la fonction

J'essaie d'ouvrir une fancybox à partir d'une fonction que j'ai - en bref, mon code HTML ressemble à ceci;

<a href="#modalMine" onclick="myfunction(this); return false;">
  click
</a>

et une partie de ma fonction ressemble à ceci;

function myfunction(me) {
    $(me).fancybox({
        'autoScale': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 500,
        'speedOut': 300,
        'autoDimensions': true,
        'centerOnScroll': true,
    });
}

Ce qui précède fonctionne dans IE, mais pas dans Firefox ou Chrome. Avez-vous une idée de la façon dont je peux résoudre ce problème? Je sais que l'une des raisons est de déclencher un autre lien, mais j'espère qu'une autre solution est possible.

javascriptjqueryfancybox
30
keysersoze

Puisque vous utilisez jQuery, arrêtez la liaison des gestionnaires d’événements dans votre code HTML et commencez à écrire du code JavaScript non intrusif.

$(document).ready(function ()
{
    function myfunction(me)
    {
        $(me).fancybox({
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 500,
            'speedOut': 300,
            'autoDimensions': true,
            'centerOnScroll': true // remove the trailing comma!!
        }).click();
        // fire the click event after initializing fancybox on this element
        // this should open the fancybox
    }

    // use .one() so that the handler is executed at most once per element
    $('a[href=#modalMine]').one('click', function ()
    {
        myfunction(this);
        return false;
    });
});

Cependant, je ne vois pas de raison particulière pour configurer la fancybox au clic. Vous pouvez simplement faire ceci à la place:

$(document).ready(function ()
{
    function myfunction()
    {
        // note the use of "this" rather than a function argument
        $(this).fancybox({
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 500,
            'speedOut': 300,
            'autoDimensions': true,
            'centerOnScroll': true
        });
    }

    $('a[href=#modalMine]').each(myfunction);
});

Démo de base (pas d'images) →

26
Matt Ball

Si vous souhaitez simplement ouvrir une fancybox lorsqu'une fonction javascript est appelée. Peut-être dans votre flux de code et non à la suite d'un clic. Voici comment vous le faites:

function openFancybox() {
  $.fancybox({
     'autoScale': true,
     'transitionIn': 'elastic',
     'transitionOut': 'elastic',
     'speedIn': 500,
     'speedOut': 300,
     'autoDimensions': true,
     'centerOnScroll': true,
     'href' : '#contentdiv'
  });
}

Cela crée la boîte en utilisant "contentdiv" et l'ouvre.

40
Daniel

Ce dont vous avez besoin c'est:

$.fancybox.open({ .... });

Voir la section "Méthodes API" au bas de cette page:

http://fancyapps.com/fancybox/

18
Adrian Smith

Vous n'êtes pas obligé d'ajouter votre propre gestionnaire d'événements click. Il suffit d’initialiser l’élément avec fancybox:

$(function() {
    $('a[href="#modalMine"]').fancybox({
        'autoScale': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 500,
        'speedOut': 300,
        'autoDimensions': true,
        'centerOnScroll': true  // as MattBall already said, remove the comma
    });
});

Terminé. Fancybox lie déjà un gestionnaire click qui ouvre la boîte. Jetez un oeil à la section HowTo.

Plus tard, si vous voulez ouvrir la boîte par programme, déclenchez l'événement click sur cet élément:

$('a[href="#modalMine"]').click();
8
Felix Kling

Make argument argument s'étend de <a>, Et utilise la fonction open de fancybox dans l'événement click via un délégué.

    var paramsFancy={
         'autoScale': true,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'speedIn': 500,
         'speedOut': 300,
         'autoDimensions': true,
         'centerOnScroll': true,
         'href' : '#contentdiv'
      };

    $(document).delegate('a[href=#modalMine]','click',function(){
               /*Now you can call your function ,
   you can change fields of paramsFancy via this function */
                 myfunction(this);

                paramsFancy.href=$(this).attr('href');
                $.fancybox.open(paramsFancy);

    });
3
Abdennour TOUMI

Vous n'avez pas besoin de déclencher un événement click, vous pouvez le faire avec le type fancybox en tant que ajax.

$.fancybox.open({
      href: "http://........",
      type: 'ajax'
});
3
Burcu Co

La réponse semble un peu compliquée. J'espère que je n'ai pas mal compris la question. 

Si vous voulez simplement ouvrir une boîte de fantaisie d'un clic à une balise "A". Il suffit de définir votre code HTML sur

<a id="my_fancybox" href="#contentdiv">click me</a>

Le contenu de votre boîte sera à l'intérieur d'une div avec l'id "contentdiv" et dans votre javascript, vous pourrez initialiser fancybox comme ceci:

$('#my_fancybox').fancybox({
    'autoScale': true,
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'speedIn': 500,
    'speedOut': 300,
    'autoDimensions': true,
    'centerOnScroll': true,
});

Cela affichera une boîte contenant "contentdiv" lorsque vous cliquerez sur votre balise d'ancrage.

2
Daniel

Voici le code de travail selon l'auteur Tips & Tricks blog post, mettez-le dans le document prêt:

  $("#mybutton").click(function(){
    $(".fancybox").trigger('click');  
  })

Cela déclenche la version plus petite de l'image ou du contenu actuellement affiché, comme si vous l'aviez cliqué manuellement. Cela évite d’initialiser à nouveau la Fancybox, mais garde les paramètres que vous avez initialisés avec le document prêt. Si vous devez faire quelque chose de différent en ouvrant la boîte avec un bouton séparé par rapport à un clic sur la boîte, vous aurez besoin des paramètres, mais pour beaucoup, ce sera ce qu'ils cherchaient.

2
Henrik Erlandsson
...
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
...
if($(".img_file[data-img]").length) {
                var imgs_slider_img = [];
                $(".img_file[data-img]").each(function(i) {
                    imgs_slider_img.Push({
                        href:$(this).attr('data-img')
                    });
                    $(this).attr('data-index-img', i);
                }).on("click", function(e) {
                    e.preventDefault();
                    $.fancybox.open(imgs_slider_img, {
                         index: $(this).attr('data-index-img'),
                         padding: 0,
                         margin: 0,
                         prevEffect: 'elastic',
                         nextEffect: 'elastic',
                         maxWidth: '90%',
                         maxHeight: '90%',
                         autoWidth: true,
                         autoHeight: true
                    });
                });
            }
...
1
Олег Стасюкевич
function myfunction(){
    $('.classname').fancybox().trigger('click'); 
}

Ça marche pour moi..

1
Prabhagaran

si jQuery.fancybox.open n'est pas disponible (sur fancybox 1.3.4), vous devrez peut-être utiliser semafor pour résoudre le problème de la récursion: 

<a href="/index.html" onclick="return myfunction(this)">click me</a>

<script>

var clickSemafor = false;
myfunction(el)
{
 if (!clickSemafor) {
   clickSemafor = true; 
   return false; // do nothing here when in recursion
 }
 var e = jQuery(el); 
 e.fancybox({
    type: 'iframe',
    href: el.href
  }); 
 e.click();  // you could also use e.trigger('click');
 return false; // prevent default

}
</script>
0
stAn