Question

I am trying to create my own next and previous arrows in a fancybox 2 popup.
It works fine to include them but when I click them I get that $.fancybox is undefined.
I am opening a page using ajax.

This is my fancybox init code:

$(".popup").fancybox ({

maxWidth    : 1200,
maxHeight   : 550,
width       : '90%',
height      : '90%',
autoSize    : false,
openEffect  : 'none',
closeEffect : 'none',
nextEffect: 'none',
prevEffect: 'none',
arrows: false,
padding: 0,
scrolling: 'no',
afterShow: function (e) {

var toolbar = "<div id='next'>Next</div><div id='prev'>Prev</div>";

$(".fancybox-inner").append(toolbar);

}

});

This is my next and previous code:

$("#next").live ("click", function() {

$.fancybox.next();

});

$("#prev").live ("click", function() {

$.fancybox.prev();

});

Both of these code samples resizes in a javascript file called popup.js that I have
included on the page where I call the popup window.

What is wrong?

Answer 1

I would rather do

var toolbar = "<div id='next'><a href="javascript:$.fancybox.next();">Next</a></div><div id='prev'><a href="javascript:$.fancybox.prev();">Prev</a></div>";

and forget about your .live() scripts.

BTW, as of jQuery 1.7, the .live() method is deprecated. Use .on() instead. For older versions of jQuery the use of .delegate() is preferred over .live().