Wednesday, May 5, 2010

Adding custom buttons to jQuery's fancybox


The fancybox is a really cool way of displaying images, divs, etc. I really love its simplicity and coolness. I have started using it in many places now. But I had a problem. I wanted to add buttons next to the close button. Just like Windows has the maximize and minimize buttons next to the close button, I wanted a button that would open in a new window the contents of the fancybox.

I tried to figure out ways to do it without changing the code or the css, but it proved difficult. I would have had to use the onStart function and make changes to the outer div of fancybox dynamically. And also have to add functions for onClick, etc. So I decided that the best way would be to customize the fancybox.

So here is what needs to be done:

Add this to jquery.fancybox-1.3.1.css
#fancybox-customButton1 {
position: absolute;
top: -15px;
right: 15px;
width: 30px;
height: 30px;
background-position: 0px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}


Add all of the following red lines to jquery-fancybox.1.3.1.js

Add var customButton1 on line 19
(function($) {
var tmp, loading, overlay, wrap, outer, inner, close, nav_left, nav_right, customButton1,


Add function on line 173
$('#fancybox-title').appendTo( outer ).hide();
},

fancybox_process_customButton1 = function() {
$('#fancybox-customButton1').css("background-image", "url(" + currentOpts.customButton1Image + ")");
}


Add this to _finish = function () around line 268
if (currentOpts.showCloseButton) {
close.show();
}
if (currentOpts.showCustomButton1) {
customButton1.show();
}

Add this around line 400,
fancybox_process_title();

fancybox_process_customButton1();

Around line 603, add the defaults
selectedOpts.showCloseButton = false;
selectedOpts.showCustomButton1 = false;

Around line 785, add the div
outer.append(
inner = $('
'),

close = $(''),
customButton1 = $(''),

nav_left = $(''),
nav_right = $('')
);

close.click($.fancybox.close);
customButton1.click($.fancybox.onCustomButton1Click);



Around line 995
} else {
wrap.fadeOut( currentOpts.transitionOut == 'none' ? 0 : currentOpts.speedOut, _cleanup);
}
};

$.fancybox.onCustomButton1Click = function() {
currentOpts.onCustomButton1Click();



Around line 1086, add the options that the user can change
showCloseButton : true,
showNavArrows : true,
enableEscapeButton : true,

showCustomButton1 : false,
customButton1Image : null,
customButton1Title : null,
onCustomButton1Click: null,

5 comments:

  1. Hi I changed the buttons on fancybox to my own graphics - literally, just changed the .pngs to my own .pngs - I made no other changes, and all works fine in IE, shwoing my new buttons, but in FF the original black and white buttons are shown. Is there something I need to add to make it work in FF?

    ReplyDelete
  2. Hi tech freak,

    Thanks for the interesting article. I am trying to implement this without having success...

    Can you please post a working modified jquery.fancybox-1.3.1.js so i can compare this one the one i have.

    Thanks in advance.

    ReplyDelete
  3. Hi there, this looks like a great solution to a problem a client just threw at me, have you had any luck updating it to jquery.fancybox-1.4.3.js?

    Thanks in advance!

    ReplyDelete
    Replies
    1. Hi Dave,

      Do you have the solution for jquery.fancybox-1.4.3.js?

      Thank you.

      Delete
  4. Hi! Great Job! this is just what I was looking for!

    Just like Dave, I have to ask :D ,

    Any luck updating it for jquery.fancybox-1.4.3.js?

    Thank you!

    ReplyDelete