How can I use fancybox using onclick?

Question

I am trying to make use of JQuery and Fancybox. This is how it should be used: http://fancy.klade.lv/howto

However, I can not generate many ids for "a href" and I do not want to make many instances of fancybox ready. So I want to be able to use one fancy box instance for many hyperlinks that do the same thing.

Whenever any of these links are clicked, the fancybox should popup for it. I thought I would use the onclick attribute for a "<a href" tag or any other tags, I can chnage this but how do I use the fancybox? I tried this but nothing came up:

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

Thanks for any help

Answer 1

Don't do it that way. If you can't generate unique IDs (or simply don't want to) you should be doing it with CSS classes instead:

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

with:

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

(from their usage page).

Answer 2

This demonstrates how to use fancybox (1.3.4) without requiring the <a href> link element by calling fancybox directly.

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>

JSCode:

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

IN CASE, you want to open contents of multiple divs within the page. i.e. part of the same page in fancybox, you can do it by following code:

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

NOTE: Make sure that you have included fancybox.js

Answer 5

Ronald answer gave me string #dialogContent content in fancyBox v2.1.5. Try to use:

<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

In fancybox 3 it can be done by using following code.

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