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

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

Can anybody see how this would be possible?

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?

• javascript
• jquery
• fancybox

• you could initialize fancybox on the document ready, then manually fire a click event on one of the images – pmandell Commented May 2, 2013 at 14:26

4 Answers 4

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").

you can use it like this:

    $.fancybox.open([
    {
        href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
        title : '1st title'
    },
    {
        href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
        title : '2nd title'
    }    
], {
    padding : 0   
});

Your code doesn't work because this $.fancybox(); doesn't tell fancybox what to open so does nothing.

What I would do, if you don't want to edit every link in your html, is:

1). add an ID to the <ul> tag so we can use that selector like

<ul id="images">

2). bind fancybox to all <a> anchors that are child of your element #images like

var fancyGallery = $("#images").find("a"); // we cache the selector here
fancyGallery.attr("rel","gallery").fancybox({
    type: "image"
});

notice that we are adding a rel attribute on the fly to all anchors so they will be part of the same gallery

3). bind a click event to the button (I would recommend you to give it an ID too so it won't mess with other possible buttons in the future) that triggers the existing fancybox script as above, so with this html

<button id="fancyLaunch">Launch Fancybox</button>

use this script

$('#fancyLaunch').on('click', function() {
    fancyGallery.eq(0).click(); // triggers a click
});

notice that we used the method .eq() to launch the gallery from the first item (first index in javascript is always 0)

Summarizing, your whole script may look like this :

jQuery(document).ready(function($) {
    var fancyGallery = $("#images").find("a");
    fancyGallery.attr("rel","gallery").fancybox({
        type: "image"
    });
    $('#fancyLaunch').on('click', function() {
        fancyGallery.eq(0).click(); 
    });
});

See JSFIDDLE

Your html:

<ul>
<li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

 <li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

<li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

<li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

Your jQuery:

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