Timing fancybox popup

Question

I have a popup window using fancybox which I would like to add some timings to, show after 1 second maybe and disappear after 5. I cant figure out where to add any delays in the code i am using, please can anyone help?

<script type="text/javascript">
    jQuery(document).ready(function ($popup) {
        $popup("#hidden_link").fancybox({
            onComplete: function () {
                $popup("#fancybox-img").wrap($popup("<a />", {
                    href: "mylink.html",
                    target: "_blank",
                    // delay: 9000 would like a delay ideally 
                }));           
            }
        }).trigger("click");
    });
</script>

<a id="hidden_link" href="images/myimage.jpg" style="visibility:hidden;"></a>

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

You can use $.fancybox.open(), see details here - Can you explain $.fancybox.open( [group], [options] ) params and if I can add youtube link as href?, and $.fancybox.close().

setTimeout(function(){
    $.fancybox.open(...)
}, 1000);

setTimeout(function(){
    $.fancybox.close(...)
}, 5000);

edited May 23 '17 at 12:31

Community

1
1

answered Dec 02 '14 at 11:25

Sergey

5,396
3
26
38

the potential issue is that the `$.fancybox.close()` will be triggered even **before** fancybox is opened ;) – JFK Dec 03 '14 at 02:14

JFK · Answer 2 · 2014-12-02T17:34:34.650

If your link is not going to be visible, you may rather open fancybox programmatically using the $.fancybox.open() method and close it using the $.fancybox.close() method.

As pointed out, you could use setTimeout() to delay the execution of either those methods like :

jQuery(document).ready(function ($popup) {
    // open with delay
    setTimeout(function () {
        $popup.fancybox({
            href: 'images/image01.jpg',
            onComplete: function () {
                $popup("#fancybox-img").wrap($popup("<a />", {
                    href: "mylink.html",
                    target: "_blank"
                }));
                // close with delay
                setTimeout(function () {
                    $popup.fancybox.close();
                }, 9000); // setTimeout close
            }
        });
    }, 2000); // setTimeout open
}); // ready

See JSFIDDLE

Note: this is for fancybox v1.3.4.

Thanks for all the answers, this one worked great :-) – Des Bank Dec 03 '14 at 09:31 — Des Bank, Dec 03 '14 at 09:31

Timing fancybox popup

2 Answers2