Sizing and Positioning Fancybox

You’ve probably seen Fancybox all over the place. In a way, it’s the living-successor of ThickBox and Lightbox.

I was recently on a project where I had to both size and place it. Sizing it is easy. Say you have a link tag with an id of opener, like this:

Google

To create and size the fancybox that will open when it’s clicked, you’d just add the following javascript to your page:


Note that pixels are assumed, you should not say something like “390 pixels” like you would in css, it won’t work then.

So, above we have defined a fancybox that is 390 pixels wide, and 400 pixels high. Next we need to position it.

(Note this is based on Fancybox 1.3 – I can’t say if it’ll work with other versions.)

Fancybox puts everything in a layer with an id of “fancybox-wrap” – so we can easily manipulate it with basic css, like so:

#fancybox-wrap {
  margin: -70px 0 0 290px;
}

You can do the same with padding, maybe even positioning.

Hope that helps someone!

11 thoughts on “Sizing and Positioning Fancybox

  1. hi,

    your positioning of fancybox-wrap is placing every box on same position over entire site.

    i want it to be placed over different places for different items.

    how to do it

    thanks

  2. Ravi – one way to do that would be to overwrite the original #fancybox-wrap CSS on the pages you want to place it differently from the global style declaration. For example, use inline styles or import another stylesheet after the main one that has the particular positioning you want for that page. Or, you may be able to wrap the #fancybox layer in another layer, and use CSS to target each one differently, like so:

    #page-1 #fancybox { etc… }
    #page-2 #fancybox { etc… }

    Hope that helps.

  3. But I have two fancybox in the same page and I need them in different positions. Do you have any idea about how to that?

    Thank you.

  4. Maira – you would do this with CSS, after giving each fancybox item on your page it’s own ID attribute. Then place each one as needed in your CSS. Using the example on this page, you might have #fancybox-wrap-1 and #fancybox-wrap-2

  5. @Yates – are you declaring the iframe in your source link as outlined in the fancybox documentation?

    a href="http://www.example?iframe
    or
    a class="iframe" href="http://www.example"

  6. I too (like Maira and perhaps Ravi) am interested in creating multiple fancybox links, but on one page and having each one positioned differently. I’m not seeing an option to have seperate id’s for each fancybox-wrap div. Can you point me in the right direction, Matt? Thanks

  7. Ah, after re-reading this I think I understand the question better. It’s in the Fancybox core-script to put the box in the #fancybox-wrap layer, so that’s really all we have to work with here because that’s how fancybox is coded. My hunch, though untested, is perhaps to use jQuery to manipulate the positioning of the fancybox, by targeting which one is clicked and called. I’m not exactly sure how that’d work off-hand. Maybe whenever I have some time to take that into the lab I’ll make a separate post on my findings.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>