Fancybox can load more than just YouTube videos, images, and asynchronous content. The three content types we are going to cover in this recipe are SWF (flash files), inline, and iframe. We have already discussed the iframe content type to some extent when we loaded a YouTube video into Fancybox. However, iframes can contain more than just YouTube videos, so we will discuss some of the settings that are useful when using iframe content.
Before we start loading these different types of content, we'll need to find an SWF file. There is one included in the code examples; so if you need one, you can use that one. This is the file that I will be using in the instructions of this recipe. We will be creating a page with a link to each type of content in the order SWF, inline, and iframe.
Add three links to the
index.htmlfile. We need one for the SWF file, one forinlinecontent, and one for an iframe content, shown as follows:<a class="show-popup" data-fancybox-type="swf" href="demo.swf">Flash File(SWF)</a> <a class="show-popup" data-fancybox-type="inline" href="#inline">Inline Content</a> <a class="show-popup" data-fancybox-type="iframe" href="">iFrame Content</a>
In the given code, we have an anchor tag for each content type. The first one is for the SWF file, which has the
hrefattribute populated with the filename of the SWF file to use. The second is for theinlinecontent, and the third is for the iframe content.Put the SWF file in the same directory as the
index.htmlfile. In the example code, the file is calleddemo.swf, but you can call it whatever you like.The
scripts.jsfile should have a call to Fancybox on theshow-popupclass, shown as follows:$('.show-popup').fancybox();The Flash File link should now work with Fancybox. If you click on it, you should see your SWF file displayed in the Fancybox pop up. The
demo.swffile included with the code examples is just the Fancybox Flash Demo text bouncing around a white stage, as shown in the following screenshot:
Next up is the
inlinecontent. First, we need to add someinlinecontent to the page that we want Fancybox to load. Let's just add some simple HTML:<div id="inline"> <h2>Some Inline Content!</h2> <p>With some simple text as well!</p> </div>
The HTML code we are adding is a
divtag with an ID ofinlineand thedivtag contains some basic HTML contents. This content can be added anywhere inside thebodytag of theindex.htmlfile.Next we need to make sure that our link is correct. The
hrefattribute of theinlinelink should be#inline. Note thatinlineis the ID of ourdivtag and is how Fancybox identifies the content it needs to grab from the HTML file. You should now see the contents of thedivtag with the ID ofinlinedisplayed in Fancybox.Any external website can be loaded with the
iframeoption in Fancybox. For this example, we're going to load the Fancybox website at http://fancyapps.com/fancybox/.Our last link already has the
data-fancybox-typeattribute set toiframe, so we just have to add the Fancybox website URL to thehrefattribute of the anchor tag as follows:<a class="show-popup" data-fancybox-type="iframe" href="http://fancyapps.com/fancybox/">iFrame Content</a>
You should see the Fancybox website loaded in the Fancybox pop up.
All three links should continue to work on the page.
Fancybox provides functionality for properly loading most of the common types of website content. For SWF files, it creates the appropriate HTML and uses the file provided in the href attribute. For inline content, it moves the content with the ID provided into the Fancybox div tag and replaces it with a placeholder string. Then, when Fancybox is closed, it knows where to put the content back on the page. For the iframe content, it relies on the functionality of iframes in web browsers to properly render the content from the URL provided in the href attribute of the link.
There isn't much extra that Fancybox can do with these less common forms of content. However, some of the functionality regarding inline content may require some additional work to get the desired effect.
As mentioned earlier, Fancybox likes to hide inline content once it has been shown in the Fancybox pop up. Fortunately, we can rely on one of the callback methods to make our content visible after Fancybox has closed. The method we will be using is afterClose. Let's make the inline content from step 5 display after Fancybox has been closed:
We're going to expand on the inline functionality used earlier. Open the
scripts.jsfile and add an object to the Fancybox call that has theafterClosesetting.Define the
afterClosesetting as a function, which shows the content using thejQuery .show()method:$('.show-popup').fancybox({ afterClose: function() { this.content.show(); } });The
thiskeyword in theafterClosefunction is the Fancybox object that is being used to show the content. It has a property calledcontent, which is the content that the Fancybox pop up is configured to display. In this case, thecontentproperty is thedivtag with an ID ofinline. When we call theshow()method on it, jQuery adds thedisplay: blockstyle to thedivtag.
The inline content should now be displayed on the page when the Fancybox pop up is closed.