Launch fancyBox from button click

Question

Im stuck with a little problem with fancyBox v2.

I want to launch fancyBox on button click. Once clicked, it will load all the images from the list (from the src attribute of the ).

I have created this jsfiddle to show what I am trying to do: http://jsfiddle.net/fPFZg/

jQuery(document).ready(function($) {
    $('button').on('click', function() {
        $.fancybox(); 
    });
});

Can anybody see how this would be possible?

Answer 1

I had the same question and found the following to be a simpler method:

HTML

    <button class="fancybox" value="Open Fancybox">Open Fancybox</button>
    <div class="hidden" id="fancybox-popup-form">
        (your Fancybox content goes in here)
    </div>

jQuery

    $('.fancybox').click(function () {
        $.fancybox([
            { href : '#fancybox-popup-form' }
        ]);
    });

CSS

    .hidden { display: none; }

Further Reading

Fancybox Docs (click the "API Methods" tab, then read up on the first method, which is called "Open").