Call fancybox once AJAX content loaded

Question

I am dynamically loading content (Via Ajax) into a <div> called <div id="displayinformation">

Some of the content is formatted in a way that if there is a link, a Fancybox lightbox is to appear.

I have tested the Fancybox and it works if the content does not load from Ajax. But loaded from Ajax, it does nothing.

I believe that it perhaps has something to do with: $(document).ready(function() { though I am not sure.

I think I need to run the code for the lightbox once the ajax content has been loaded.

My code is below, would be grateful for any insights. Kind regards, Paul.

Call in:

<a href="http://player.vimeo.com/video/61692184" title="Lower Title Text" rel="displayvideo" >XX</a>

Top JS:

<script type="text/javascript">
$(document).ready(function() {

    $("a[rel=displayvideo]").fancybox({
        'overlayShow' : true,
        'width' : 800,
        'height' : 450,
        'transitionIn' : 'elastic',
        'transitionOut' : 'elastic',
        'titlePosition' : 'inside',
        'type' : 'iframe',
        'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
        return '<span id="fancybox-title-inside">Video:' + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
});

</script>

possible duplicate of [how to bind fancybox to dynamic added element?](http://stackoverflow.com/questions/9081571/how-to-bind-fancybox-to-dynamic-added-element) — JFK, Apr 13 '13 at 21:05
You seem to be using fancybox v1.3.4 (because your API options) and that version doesn't support dynamically added elements. Check http://stackoverflow.com/a/9084293/1055987 for the workaround (includes demo) — JFK, Apr 13 '13 at 21:07
Spot on @JFK . I looked at the Stackoverflow link you placed, and that solved my trouble. Thank you so much! Seriously, your help was invaluable. Was going a little crazy there. — Brandrally, Apr 14 '13 at 09:04

Kautil · Answer 1 · 2013-04-13T04:44:12.873

When you get response in Ajax call, at that place you need to put this code.

for ex.

$.post("/index.php", {'param'   : param},
            function(response) {
                //here you need to put fancybox code
                $("a[rel=displayvideo]").fancybox({
                  'overlayShow'   : true,
                  'width'         : 800,
                  'height'            : 450,
                  'transitionIn'      : 'elastic',
                  'transitionOut'     : 'elastic',
                  'titlePosition'     : 'inside',
                  'type' : 'iframe',
                  'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                   return '<span id="fancybox-title-inside">Video:' + (title.length ? ' &nbsp; ' + title : '') + '</span>';
               }
               });
            });

Hi Kautil, Thank you for your response, though its still having issues. I did exactly as you say and placed the call inside the ajax php page that calls in the content (Not the top level) and it won't work. — Brandrally, Apr 13 '13 at 04:36
You need to put this code in Ajax call function where you get response. — Kautil, Apr 13 '13 at 04:40

Call fancybox once AJAX content loaded

1 Answers1