Comment puis-je utiliser fancybox en utilisant onclick?

Question

J'essaie d'utiliser JQuery et Fancybox. Voici comment il devrait être utilisé: http://fancy.klade.lv/howto

Cependant, je ne peux pas générer beaucoup d'identifiants pour "un href" et je ne veux pas que beaucoup d'instances de fancybox soient prêtes. Donc, je veux être en mesure d'utiliser une instance de boîte de fantaisie pour de nombreux liens hypertexte qui font la même chose.

Chaque fois que l'un de ces liens est cliqué, le fancybox devrait popup pour cela. Je pensais que j'utiliserais l'attribut onclick pour un tag "<a href" ou tout autre tag, je peux le chnager mais comment 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

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 3

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 4

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

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