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 it 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
});
});
Note that pixels is 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!
Yes! Helped me. Thanks.
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
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.