Search code examples
fancybox

Fancybox 2 - Include a new Div into Image?

How can I insert a new div (not in .js) into fancybox (when fancybox - image is open)? Like this:

image

Solution

  • I'm also try to make a div css to fit that description :)) still with no avail. I suck at css styling, will get back on this one when i figured it out. my theory is that it should be a div within a div within the div if you get what i mean :))

    !!!!!!!! UPDATE I tried messing around the css and this is what i got (I'm using 1.3.4v for simplicity's sake in my part) and for reference, these images and codes I used are found in the 1.3.4 demo packege from fancybox.net

    If I didn't explain my code well, it just means I'm still working on it so I just hope you get why it is vague, but the point is it's doable and you only need to work out the css file. I hope someone has a nicer looking code

    Output: MySampleTry

    1.I all of these from jquery.fancybox-1.3.4.css just change these 1 2 3 and mess around with example7 there in the demo

     #fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
padding-right:50%;  /*this part extends the right side of the photo so it would look like thet're on the same page*/
  }

    2.This re-positions the original title to the upper right part of the image

    .fancybox-title-inside {
padding-bottom: 10px;
text-align: left;
color: #333;
position: absolute;
top:0;
left:65%;
border:1px solid black;/*for you to see how large the div is*/
height:100%;
}

    3.My new RED div where I will be

    div.fancycontent{ /*saviour do word wrap here*/
border:1px solid black;
padding:2px;
color: #333;
background: #FF0000;
width:50%;
height: 100px;
}