¿Cómo puedo usar FancyBox usando onclick?

Question

Estoy tratando de hacer uso de jQuery y FancyBox. Esta es la forma en que se debe utilizar: http://fancy.klade.lv/howto

Sin embargo, no puedo generar muchos ids para "a href" y no querer hacer muchas instancias de FancyBox listo. Así que quiero ser capaz de utilizar una instancia caja de lujo para muchos hipervínculos que hacen lo mismo.

Siempre que cualquiera de estos enlaces se hace clic, el FancyBox debe emergente para ello. Pensé que iba a utilizar el atributo onclick para una etiqueta "<a href" o cualquier otra etiqueta, puedo chnage esto, pero ¿cómo puedo usar el FancyBox? He intentado esto pero nada ocurrió:

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

Gracias por cualquier ayuda

Answer 1

No hacerlo de esa manera. Si no puede generar identificadores únicos (o simplemente no quieren) que debería estar haciendo con clases CSS en lugar:

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

por:

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

(desde su página de uso).

Answer 2

Esto demuestra cómo utilizar FancyBox (1.3.4) sin que el elemento de enlace <a href> llamando FancyBox directamente.

En línea:

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

códigoJS:

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 el caso, que desea abrir contenido de varios divs dentro de la página. es decir, parte de la misma página en FancyBox, puede hacerlo mediante la siguiente código:

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

NOTA: Asegúrese de que ha incluido fancybox.js

Answer 5

Ronald respuesta me dio contenido #dialogContent cadena en FancyBox v2.1.5. Trate de usar:

<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

En FancyBox 3 se puede hacer mediante el uso de código siguiente.

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