Open FancyBox on button click event using jquery

Fancybox is very useful javascript plugin to open popup window to display more data in different page or in the same page. It is quite flexible to work with and very user friendly. Recently in one of my Oracle APEX application I have wanted to implement fancy box on standard button instead of traditional hyperlink usage.

First of all make sure you have implemented jQuery and fancybox plugin into your application. I have done this in APEX 3.2 which does not include jQuery plugin and fancybox either even though jQuery has been added with full library in APEX 4.x.

I have included the following files in image directory

<script src="/i/themes/calm/jquery-1.4.2.js" type="text/javascript"></script>
<script src="/i/themes/calm/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="/i/themes/calm/jquery.fancybox-1.3.4.css" type="text/css" />

You can download these plugins from jQuery and Fancybox website.

Now create a simple HTML button or template style button in APEX page like the image bellow –

Below is the property of this HTML button. Make sure you the Target is selected to URL and type javascript:void(); under the URL Section. 

Now lets assign the fancybox functionality to this button. Add the following javascript into the header section of the page.

$(function() {

    $('#ADD_DISTRICT').click(function() {

        $.fancybox({
            'width': '60%',
            'height': '80%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'href': 'f?p=&APP_ID.:218:&SESSION.::NO:218:P218_PERMIT_ID:&P211_PERMIT_ID.',
            'type': 'iframe',
            'onClosed': function() {
                window.location.href = "f?p=&APP_ID.:211:&SESSION.::&DEBUG.::";
            }

        });

        return false;
    });

});

In the above code, I have set the fancybox URL dynamically to use application_id, session, page and passing the parameter to another page 211. This will open the page in fancybox window. I have also included functionality to refresh the parent page when fancybox is closed. This will update the report in the parent page and display recent changes.

In action image –