Comment puis-je utiliser fancybox en utilisant onclick?

Question

Je suis en train d'utiliser JQuery et Fancybox. Voici comment il doit être utilisé: http://fancy.klade.lv/howto

Cependant, je ne peux pas générer beaucoup ids pour « a href » et je ne veux pas faire de nombreux cas de fancybox prêt. Donc, je veux être en mesure d'utiliser une instance de boîte de fantaisie pour beaucoup de liens qui font la même chose.

Chaque fois que l'un de ces liens sont cliqués, le fancybox devrait popup pour elle. Je pensais que j'utiliser l'attribut onclick pour une balise « <a href » ou toute autre balise, je peux chnage cela, mais comment puis-je utiliser le fancybox? J'ai essayé mais rien venu:

<a href="#not-working" onclick="fancybox(hideOnContentClick);">Not Working?</a>

Merci pour toute aide

Answer 1

Ne pas le faire de cette façon. Si vous ne pouvez pas générer des identifiants uniques (ou ne veulent tout simplement pas) vous devriez le faire avec des classes CSS au lieu:

<a href="image.jpg" class="fancy"><img src="image_thumbnail.jpg"></a>

avec:

$(function() {
  $("a.fancy").fancybox({
    'zoomSpeedIn': 300,
    'zoomSpeedOut': 300,
    'overlayShow': false
  }); 
});

(à partir de leur page d'utilisation).

Answer 2

Cela montre comment utiliser fancybox (1.3.4) sans que l'élément de liaison en appelant fancybox <a href> directement.

Inline:

<div id="menuitem" class="menuitems"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('.menuitems').click(function() {
    $.fancybox({
        type: 'inline',
        content: '#dialogContent'
    });
});

Iframe :

<div id="menuitem" class="menuitems"></div>

$('.menuitems').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});

Answer 3

HTML:

<a href="http://domain.com/bigimage.jpg" onclick="return fancybox(this);><img scr="http://domain.com/smallimage.jpg" /></a>

codeJS:

function fancybox(elem) {
elem = $(elem);
if (!elem.data("fancybox")) {
    elem.data("fancybox", true);
    elem.fancybox({
        'overlayColor' : '#000',
        'overlayOpacity' : 0.5
    });
    elem.fancybox().trigger('click');
}
return false; 
}

Answer 4

EN CAS, vous voulez ouvrir le contenu de plusieurs divs dans la page. dire une partie de la même page en fancybox, vous pouvez le faire par le code suivant:

<a href="#show-in-fancy1" class="popup">open_fancy1</a>
<a href="#show-in-fancy2" class="popup">open_fancy2</a>
<div style="display:none">
  <div id="show-in-fancy1">
    this content is shown in fancybox.
  </div>
  <div id="show-in-fancy2">
    this content is shown in fancybox.
  </div>
</div>
<script>
  $(document).ready(function(){
    $('.popup').fancybox({
          'zoomSpeedIn': 300,
          'zoomSpeedOut': 300,
          'overlayShow': false
      });
  });
</script>

REMARQUE: Assurez-vous que vous avez inclus fancybox.js

Answer 5

réponse Ronald m'a donné chaîne contenu dans #dialogContent FancyBox v2.1.5. Essayez d'utiliser:

<div id="item"></div>

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery("#item").fancybox({
       type: 'inline',
       content: jQuery('#data').html()
   });

});
</script>

Answer 6

Dans fancybox 3, il peut être fait en utilisant le code suivant.

jQuery().fancybox({
    selector : 'your selector'
});