0

I use fancybox to show larger photo's by enclosing a smaller photo in a link. This works fine. There was small problem with a tooltip jQuery app, that's why I get the var 'title_from_alt' and set the fancybox title with that. It's not so relevant.

Okay, now I am retrieving a page via an AJAX-call. On the partial, there are new links with class 'fancyboxfoto'. But these newly added links do not have the fancybox attached to them.

I read about .on and .live and so on, but they seem to want an event (like 'click') but in the code below I don't see an event 'click'. What to do!?

jQuery(document).ready(function($){

//fancybox
var title_from_alt = $("a.fancyboxfoto").attr("alt");
$("a.fancyboxfoto").fancybox({
    'titlePosition'     : 'over',
    'onComplete'    :   function() {
        $("#fancybox-wrap").hover(function() {
            $("#fancybox-title").show();
        }, function() {
            $("#fancybox-title").hide();
        });
    },
    'overlayColor'      : '#000',
    'title'         : title_from_alt,
    'overlayOpacity'    : 0.9,
    'showCloseButton' : 'true',
    'autoScale' : 'true',
    'autoDimensions' : 'true'
});
});

the HTML

<a class="fancyboxfoto" title=" Tirzo Martha, Shipwrecked, 2002 " href="/images/Shipwrecked.jpg">
  <img class="tiptip" vspace="12" hspace="12" align="left" title=" Tirzo Martha, Shipwrecked, 2002 " src="/images/Shipwrecked-kl.jpg">
</a>
Ace Suares user1266770
  • 399
  • 1
  • 2
  • 13

2 Answers2

0

You should initialize the fancybox again after retreiving new DOM elements via AJAX.

algiecas
  • 2,108
  • 14
  • 13
0

fancybox v1.3.x doesn't support dynamically added elements.

You can find a workaround here (examples included)

BTW, if using that method, you don't need to "initialize the fancybox again after retrieving new DOM elements via AJAX"

Community
  • 1
  • 1
JFK
  • 40,963
  • 31
  • 133
  • 306