FooBox lets you open iFrame content inside a FooBox.
Example Code
<code><a href=”https://css-tricks.com” class=”foobox” target=”foobox”>Open iFrame</a>
Walkthrough
This method is for loading external content into FooBox via an iFrame. All that’s really necessary is adding the foobox class and target.
There are also a few other handy attributes you can utilize as well.
Set a Max Height or Width
You can also set a max height or width in case you don’t want the iFrame to fill the entire screen on larger screens. These settings should be thought of as “max-height” or “max-width”. The iFrame will continue to be responsive to screen sizes that are shorter or narrower than these setting, but it will not grow larger than these settings.
To do this, just add your desired pixel height and width to the following attributes:
<code>data-height=”600″ data-width=”480″
It’s important to notice that there is NO “px” in the attributes. You can also set the data-height and data-width.
And here’s the code used to do that:
<code><a class=”foobox” href=”https://www.nytimes.com/newsgraphics/2013/07/21/silk-road/” target=”foobox” data-caption-title=”NYTimes Magazine Perfects Long-Form Journalism” data-caption-desc=”These stunning images, longform stories, and responsive designs sent a shockwave through the web design and development communities. <a href=’http://www.nytimes.com/newsgraphics/2013/07/21/silk-road/’>Visit this story here</a>” data-width=”600″ data-height=”480″>Open “The New Silk Road” in an iframe with “data-wdith=’600′” and “data-height=480″</a>
Insecure Content
Please note that if your website is secured by https using a SSL certificate and you try to open an insecure http connection in a FooBox iframe the content will be blocked resulting in FooBox showing a blank content area. Please make sure you use an https:// connection.