Web Development » Fun with Fancyboxes as custom lightboxes

Fun with Fancyboxes as custom lightboxes

Fancybox. Here we go again – but no matter how many other lightbox solutions I try, I always go back to the Fancybox. Why? Because it’s simple. It works in almost all applications where I need it t0 – and it offers everything you could possible need or want out of a fancybox. But wait, you don’t like the default styling of the fancybox? No problem, with a little creativity you should have no problem at all customizing the look and feel of your fancybox implementation.

Start by creating your own close button nestled inside your fancybox (you could just as easily override the close button’s styles, but this should also work for helping you setup multiple close button solutions).

.custom_fancybox_close {
    width: 22px;
    height: 22px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    background: url(custom_fancybox_close.png) 0 0 no-repeat;
}

.some_container_class {
    background: #333;
}

Just grab a close button icon of your choice make sure you update the css (or resize/rename/reformat the graphic) and you’re all set to add the following html into your fancybox content:

<div></div>

Piece of cake.

Just a bit of jquery now to make sure your button always works:

    $('.custom_fancybox_close').live('click',function(){
        $.fancybox.close();
        return false;
    });

Side note: I like to use live to attach the click event just because you never know when you’ll be adding content dynamically and it helps you catch elements that aren’t caught by the regular .bind().

Oh yeah – here’s what my fancybox call looks like:

        $.fancybox({
            href: this.href,
            centerOnScroll: true,
            hideOnOverlayClick : false,
            showCloseButton : false,
            scrolling : false,
            padding: 0,
            margin: 0
         });

Here we go – this would be ideal for an alert style modal where you want to ensure that you get some user attention – disable click on the opaque backbground – disable the default close button (since we’re adding our own!) get rid of hideous scrolling (I like to add my own when applicable – but in this case we’re controlling the height of our fancybox) so we’re also using centerOnScroll to elegantly keep the fancybox vertically centered.

So there you have it. As long as you’re loading something similar to the following html, that’s it!

<div>
<div><!-- this is my custom close button --></div>
<div style="height: 150px; width: 300px; padding: 20px;">
<!-- just using inline styles to show you how we're controlling the height/width -->
Hey everyone!
</div>
</div>

View the working custom fancybox example here!

No, before you go assuming that I don’t like the default fancybox style – please understand that I like it just fine. It’s just that sometimes you need variety – and that’s all I’m providing here.

If you’ve got a creative Fancybox useage please feel free to share it by leaving a comment below! Thanks and happy coding!

Comments