Fancybox inline to have no scrollbars and be 100%

Question

Not sure how to explain this, but here goes:

Instead of Fancybox opening a 'box' on the page which can have a scroll bar inside it to view overflow content, I want the content to just sit on top of the current / parent content.

So, at the moment, if the browser inner width was 800px and you were opening content that needed 1200px height, then the Fancybox 'box' height can be set at 800px and a scrollbar is used to scroll the content of the new 'box' (as the content is 1200px). I want to do it so there is no new scrollbar, but the new content is the full 1200px which pushes the main/parent page down (forcing a scroll bar on the parent if none already existed).

Clicking the close button would still close it.

Is this possible? Do I make sense?

This is for FancyBox 2.

Answer 1

So for this html

<a class="fancybox" href="{target content}">open content at 1200px height</a>

use this script

$(".fancybox").fancybox({
 type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
 width: 800, // or whatever
 height: 1200,
 autoSize : false, // so the size will be 800x1200
 autoCenter: false, // so fancybox will scroll down if needed
 fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
 scrolling : "no" // so no scroll bars inside fancybox
});

NOTES: You cannot set specific dimensions to images, they will be either full size (when fitToView is set to false) or scaled to the viewport (when fitToView is set to true); the other types of content can be adjusted to the dimensions of width and height as in the code above.

TIP : you may open different type of content (or target different contents) with different heights each and change the height of fancybox dynamically using the HTML5 data-* attribute .... so for this html:

<a class="fancybox" href="{target content 01}" data-height="1200">open content 01 at 1200px height</a>
<a class="fancybox" href="{target content 02}" data-height="1000">open content 02 at 1000px height</a>
<a class="fancybox" href="{target content 03}" data-height="1450">open content 03 at 1450px height</a>

then add the callback beforeShow to your script to get the value of data-height like this

$(".fancybox").fancybox({
 type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
 width: 800, // or whatever
 // height: 1200, // no fixed height but obtained dynamically
 autoSize : false, // so the size will be 800x1200
 autoCenter: false, // so fancybox will scroll down if needed
 fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
 scrolling : "no", // so no scroll bars inside fancybox
 beforeShow : function(){
  this.height = $(this.element).data("height");
 }
});