Displaying Multimedia Content In A Floating Window Using FancyBoxBy Scott Mitchell
While surfing the web you may have come across websites with images and other multimedia content that, when clicked, were displayed in a floating window that hovered above the web page. Perhaps it was a page that showed a series of thumbnail images of products for sale, where clicking on a thumbnail displayed the full sized image in a floating window, dimming out the web page behind it. Have you ever wondered how this was accomplished or whether you could add such functionality to your ASP.NET website?
This article shows how to display text, images, and other multimedia content in a floating window using FancyBox, a free client-side library. You'll learn how it works, see what steps to take to get started using it, and explore a number of FancyBox demos. There's also a demo available for download that shows using FancyBox to display both text and images in a floating window in an ASP.NET website. Read on to learn more!
An Overview of FancyBox
An online retailer like Amazon.com has various images of assorted sizes associated with each product for sale. When viewing a product, Amazon.com shows a small version of the image, but by clicking the image the shopper can see a larger version. Such functionality can be implemented a number of different ways. Perhaps this simplest is to show the thumbnail image in the web page using an
<img>element and then surrounding that
<img>element with a link element (an
<a href="...">) that references the larger image. In this manner, the shopper would see the thumbnail image in the page; clicking the image would then display the larger image in her browser.
The downside to the above approach is that it is rather ugly. Clicking the thumbnail image takes the user away from the page they're on and shows the full size image. Sure,
you could add a
target attribute to the link element to open the full size image in a new browser window, but it still is rather blah. The screen shots below
show this interaction.
Thumbnail Images Displayed In A Web Page
When The Thumbnail Image Is Clicked, The Full Sized Image Is Displayed
When The Thumbnail Image Is Clicked, The Full Sized Image Is Displayed In A Floating Window
Getting Started With FancyBox
Adding the FancyBox and jQuery Libraries To The Web Pages In Your Website
Page.ResolveClientUrlmethods directly in the script reference tags, like so:
Note that I include the jQuery library (
jquery.fancybox-1.3.1.js), both of which exist
Scripts folder. The
Page.ResolveClientUrl methods take in a virtual path as input, which can include the tilde character
~) to specify the root of the website, and returns an appropriate path to the file.
Page.ResolveUrl returns an absolute path (such as
Page.ResolveClientUrl returns a relative path (such as
<head> element also includes a link to the FancyBox CSS file,
However, with the
<link> element I do not need to use
Page.ResolveClientUrl because the
element automatically re-bases
<link> elements. (I'm not quite sure why it doesn't also automatically re-base
Displaying Text In A Floating Window
You can use FancyBox to display a floating window that contains inline content. Inline content is just markup defined elsewhere in the web page, and can include text, images, and anything else you can display with HTML. To use FancyBox to show inline content in a floating window when some element is clicked, start by adding the following markup to your page to define the clickable region:
The text that appears within the link element - "Click me to see a floating window!", in this case - is the content that, when clicked, will prompt FancyBox to show some other
content in a floating window. The content that is displayed in the floating window is the content that exists within an element whose id attribute is
matches the inlineContentID value specified in the link element's
href attribute. Typically, the content to display in the floating window will be defined
<div> element like so:
Note how the
id attribute is set to the same value as the
href attribute in the link element. Also note that this
displaystyle attribute is set to
none. This ensures that the floating window content is not displayed in the browser until the user clicks the link and FancyBox renders the floating window. Finally, observe how the content to be displayed in the floating window can contain any legal HTML markup. Here I have a paragraph tag and bold tag, and I could include images and other rich content.
<script> block on your page:
$("#linkID") returns a reference to the HTML element named linkID; recall that this is the
id value of the link element that, when clicked,
will display the floating window. Calling the
fancybox() function on this element causes the FancyBox library to work its magic and cause the floating window to
be displayed when the link is clicked. That's all there is to it!
In addition to displaying inline content within the floating window, FancyBox can also be configured to display an |
The demo available for download at the end of this article shows how to display inline content in a floating window when clicking a link. Specifically, the demo text contains the sentence, "Did you know that you can play the fun Axis & Allies board game online, for free, at GamesByEmail.com?:" The text "Axis & Allies" is rendered as a link that, when clicked, displays a floating window with information about the board game, including an image of the board game box. The following screen shot shows this in action.
Displaying Images With FancyBox
Once you have that markup defined, all that remains is to call the
fancybox() function in
That's all there is to it!
You can get a bit fancier by specifying various display properties when calling the
fancybox() function. By default, FancyBox shows the
text of the
<img> element when displaying the full size image, but you can opt not to display the title by setting the
titleShow property to
false, like so:
You can also dictate the position of the title and specify transition effects. The following snippet shows how to show the title inside the image and to use a fading transition when displaying and closing the floating window:
Considerations With ASP.NET
idvalue. In some circumstances a server-side ASP.NET control's
IDproperty value equates to its client-side id value, but most often the server-side
IDproperty is prefixed with the
IDvalues of the control's naming containers. Long story short, that HyperLink control whose ID property you set to, say,
lnkViewDetails, might actually get rendered into HTML with an
You can programmatically determine a control's rendered
id value via its
FancyBox to a HyperLink control you should use syntax like so:
The code in the
<%=...%> block is executed on the server and emits the client-side
id value of the HyperLink control named HyperLinkID.
The net effect is that the above markup will get rendered into markup that looks something like:
Rather than using
into a FancyBox-enabled link. (This is especially useful if you only want to use FancyBox on certain links based on some server-side logic.) The demo available for download
includes a base
Page class with a method
AddFancyBoxElement that does just this.
Be sure to download the demo available at the end of this article to see FancyBox in action. You can also see some online demos of FancyBox on the FancyBox Homepage (including an image gallery demo).