Fancybox in APEX dynamic report

Using fancybox in Oracle Application Express (APEX) can increase the page load performance specially when You have lot of items in one page and user needs to scroll down to reach the bottom which is quite annoying for some users. You can split your long page scrolling content into few pages and use link to open these additional information on demand using fancy box. So you are not leaving the main page but you can still access additional resources if you want to. It is working so good so far for me. Read my previous article if you do not know how to implement fancybox in APEX.

Now when it comes to the point where I wanted to implement fancybox in APEX dynamic report. Basically what I am trying to do in my report is – provide URL link for relevant image and display the image in fancybox when user click on it.

It works good when I load the page and rendered the report with the following code –

<script type="text/javascript">

$(document).ready(function(){
          $("a.fancyImg").fancybox({
                                   'transitionIn'	: 200,
                                    'transitionOut'	: 200
                                   });
                          });
</script>

The fancybox functionality breaks when partial post back happened into the page. So when I want to do column sorting or perform any other action in dynamic report fancybox link does not work. I understand that because my function only called once on document ready and it does not work for partial page load. Here is the screen capture of my report.

I have used custom SQL report query for URL link column. Here is the sample if you want to know how –

SELECT F.FAC_ID,
       F.FAC_TYPE,
       F.LOCATION,
       F.FAC_ASSET_DESC "Description",
       F.FAC_ASSET_NO "Asset No",
       F.FAC_ASSET_CONDITION "Condition",
       F.FAC_REPLACEMENT_COST "Initial Cost",
       F.REPLACEMENT_COST_TODAY "Todays Cost",
       F.FAC_LATITUDE_DEC "Latitude",
       F.FAC_LONGITUDE_DEC "Longitude",
       CASE
          WHEN fil.fil_id IS NOT NULL
          THEN
                '<a class="fancyImg" href="f?p=&APP_ID.:44:&SESSION.:::44:P44_FIL_ID:'
             ¦¦ fil_id
             ¦¦ '">View Image</a>'
          ELSE
             'No image'
       END
          Image
  FROM FACILITIES F, BUILDINGS B, FILES FIL
 WHERE     F.FAC_ID = B.FAC_ID(+)
       AND F.FAC_TYPE = 'BUILDING'
       AND FIL.SOURCE_ID(+) = F.FAC_ID

Now I have changed my javascript to use without document ready function. Here is the code –

<script type="text/javascript">

function fancyGallery(){
$("a.fancyImg").fancybox({
   'transitionIn'		: 200,
   'transitionOut'		: 200
});
}
</script>

Call this function in the report dynamically in onClick event.

CASE
          WHEN fil.fil_id IS NOT NULL
          THEN
                '<a class="fancyImg" onClick="javascript:fancyGallery();" href="f?p=&APP_ID.:44:&SESSION.:::44:P44_FIL_ID:'
             ¦¦ fil_id
             ¦¦ '">View Image</a>'
          ELSE
             'No image'
       END
          Image

It works fine in IE but I am not sure about FireFox.