jQuery fancybox how to call it in my own DIV?

Question

Hi I want to display the fancybox in my own <div> because I need another position for the output.

The fancy JS is creating a <div> structure in my HTML wich i cant manipulate over CSS. This structure I want only display in <div id="xyz"> for example.

Please help?

Answer 1

The fancybox div has a set of styles you can manipulate, look at the .css file included, the classnames are:

div#fancy_overlay
div#fancy_loading
div#fancy_loading div
div#fancy_outer
div#fancy_inner
div#fancy_content
div#fancy_div
img#fancy_img
div#fancy_close
#fancy_frame
#fancy_ajax
a#fancy_left, a#fancy_right
a#fancy_left
a#fancy_right
span.fancy_ico 
span#fancy_left_ico 
span#fancy_right_ico 
a#fancy_left:hover, a#fancy_right:hover
a#fancy_left:hover span 
a#fancy_right:hover span
#fancy_bigIframe 
div#fancy_bg 
div.fancy_bg 
div#fancy_bg_n 
div#fancy_bg_ne
div#fancy_bg_e 
div#fancy_bg_se
div#fancy_bg_s 
div#fancy_bg_sw
div#fancy_bg_w 
div#fancy_bg_nw
div#fancy_title
div#fancy_title div
div#fancy_title table
div#fancy_title table td
td#fancy_title_left 
td#fancy_title_main 
td#fancy_title_right

This is as-of the 1.2.6 version.

The big ones you probably want are:

div#fancy_outer
div#fancy_inner
div#fancy_content
div#fancy_div

Does manipulating these styles not accomplish what you're after? If not please clarify a bit more.

Answer 2

well its better i show you my problem in pictures:

You can see that changing the browsersize to result in that my menu is hiden. The pic1 and pic2 demostrate it.

Okay so the only thing i want is to open the fancybox in the red box. i think that i must change the JS because fancy calculate the middle of right? or is there any option to configure it? in the docu i cant find anything to do this