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:
<a id="opener" href="http://www.google.com">Google</a> |
To create and size the fancybox that will open when it's clicked, you'd just add the following javascript to your page:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("#opener").fancybox({ 'width': 390, 'height': 400 }); }); </script> |
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!
By Steve Suhr June 7, 2010 - 2:50 pm
Yes! Helped me. Thanks.
By ravi kumar June 9, 2010 - 6:39 am
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
By Matt June 9, 2010 - 7:51 am
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.
By Maira October 18, 2010 - 12:33 pm
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.
By Matt October 18, 2010 - 2:35 pm
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
By Omar December 23, 2010 - 3:25 pm
Very Helpful!
By Thomas Yates January 31, 2011 - 4:41 am
This doesnt seem to work when using the fancybox iframe, it only seems to accept a percentage.
This is annoying
By Matt January 31, 2011 - 8:43 am
@Yates – are you declaring the iframe in your source link as outlined in the fancybox documentation?
a href="http://www.example?iframeor
a class="iframe" href="http://www.example"By Evan Mullins February 24, 2011 - 9:12 am
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
By Matt February 24, 2011 - 9:37 am
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.
By Ben June 17, 2011 - 8:01 pm
Just what I needed. Thanks.