When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article

ASP ASP.NET ASP FAQs Message Board Feedback
 
Print this Page!
Published: Wednesday, March 10, 2010

Displaying Multimedia Content In A Floating Window Using FancyBox

By Scott Mitchell


Introduction


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?

In years past, adding such rich client-side functionality to a website required a solid understanding of JavaScript and the "eccentricities" of various web browsers. Today, thanks to powerful JavaScript libraries like jQuery, along with an active developer community creating plugins and tools that integrate with jQuery, it's possible to add snazzy client-side behaviors without being a JavaScript whiz.

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!

- continued -

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.

<a id="lnkFullSize" href="full_size_image.jpg">
   <img src="thumbnail_image.jpg" />
</a>

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


Thumbnail images displayed in a web page.

When The Thumbnail Image Is Clicked, The Full Sized Image Is Displayed


When a thumbnail is clicked the full sized image is displayed.

FancyBox is a nifty little client-side library that uses jQuery to display text, images, and other multimedia content in a floating window. With FancyBox you can greatly improve the user experience of viewing multimedia content with very little extra effort on your part. Using the existing markup shown above, all we would need to do is add a single line of JavaScript to have FancyBox display the full sized image in a floating window when the thumbnail was clicked. And FancyBox includes a suite of effects and styles that allow us to add titles to the floating window, to fade the floating window in and out, and so on. The screen shot below shows the full sized image when displayed in a floating window. Note how the user remains on the web page, but it is grayed out. The focus is on the full sized image, which floats over the middle of the screen.

When The Thumbnail Image Is Clicked, The Full Sized Image Is Displayed In A Floating Window


The full size image is displayed using a floating window courtesy of FancyBox.

Getting Started With FancyBox


To get started with FancyBox you need to download a JavaScript file (jquery.fancybox-version.js) and add it to your website. In addition to this core file, the FancyBox download also includes additional JavaScript files for added functionality (such as scrolling through images using the mouse wheel) along with a CSS file (jquery.fancybox-version.css) and accompanying images. The download also includes a demo that shows using FancyBox's assorted features. These files, and more, can be found from the FancyBox Homepage. The demo available for download at the end of this article includes the core JavaScript file and the default CSS file and images for FancyBox version 1.3.1, along with images, text, and video that demonstrate using FancyBox in an ASP.NET application.

Underneath the covers, FancyBox uses the jQuery library, a powerful JavaScript library. Consequently, you'll also need to add the jQuery library to your website. You can download the latest version of jQuery from jQuery.com or you can directly reference a particular version of the jQuery library directly from the jQuery.com website. For example, jQuery version 1.4.2 can be pulled directly from http://code.jquery.com/jquery-1.4.2.min.js. (We'll talk about how to add these JavaScript libraries to the pages in your ASP.NET website momentarily.)

Adding the FancyBox and jQuery Libraries To The Web Pages In Your Website


To use FancyBox in a web page you need to reference the necessary JavaScript files in the <head> portion of your ASP.NET page. If you want FancyBox to be available on all pages in your website, you can add these to the master page. One challenge inherent in referencing JavaScript files in the master page is that the master page and its content page may exist in different directories. Care must be taken to ensure that regardless of the locations of the master page and content page that the script references are correctly based. The easiest way to ensure this is to use the Page.ResolveUrl or Page.ResolveClientUrl methods directly in the script reference tags, like so:

<script type="text/javascript" src='<%=Page.ResolveClientUrl("~/Scripts/jquery-1.4.2.min.js")%>'></script>
<script type="text/javascript" src='<%=Page.ResolveClientUrl("~/Scripts/jquery.fancybox-1.3.1.js")%>'></script>

Note that I include the jQuery library (jquery-1.4.2.min.js) and the core FancyBox JavaScript library (jquery.fancybox-1.3.1.js), both of which exist in the Scripts folder. The Page.ResolveUrl and 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 /MyWebsite/Scripts/jquery.fancybox-1.3.1.js) whereas Page.ResolveClientUrl returns a relative path (such as ../../Scripts/jquery.fancybox-1.3.1.js).

In addition to referencing the JavaScript libraries, the master page's <head> element also includes a link to the FancyBox CSS file, jquery.fancybox-1.3.1.css.

<link href="Styles/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />

However, with the <link> element I do not need to use Page.ResolveUrl or Page.ResolveClientUrl because the <head runat="server"> element automatically re-bases <link> elements. (I'm not quite sure why it doesn't also automatically re-base <script> elements.)

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:

<a id="linkID" href="#inlineContentID">
   Click me to see a floating window!
</a>

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 in a <div> element like so:

<div style="display: none;">
   <div id="inlineContentID" style="width:555px;height:300px;overflow:auto;">
      <p>
         This is the content that will appear in the <b>floating window</b>.
      </p>
   </div>
</div>

Note how the <div> element's id attribute is set to the same value as the href attribute in the link element. Also note that this

is surrounded by another <div> whose display style 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.

The final piece of the puzzle is to add a tad of JavaScript that tells FancyBox to display the inline content when the link is clicked. This is accomplished by creating a $(document).ready function, which is the JavaScript function that jQuery executes once the page has been loaded. You'd add the following within a <script> block on your page:

$(document).ready(function() {
   $("#linkID").fancybox();
});

The syntax $("#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!

Displaying iframe Content And Content From An External Source
In addition to displaying inline content within the floating window, FancyBox can also be configured to display an iframe within a floating window or content retrieved from an external source. Using an iframe you could have a user visit and interact with another website, all from a floating window on your site. When using an external source for the floating window's content, you must provide a URL to the content. FancyBox will then asynchronously make an HTTP request to that URL and display the returned markup in the floating window.

For more information on the markup and JavaScript syntax needed for these two scenarios, refer to the FancyBox HOWTO page.

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.

Information about the board game Axis And Allies is displayed in a floating window.

Displaying Images With FancyBox


Displaying images with FancyBox works much like displaying inline content in that you start by defining a bit of markup and then add a line of JavaScript to wire everything up. FancyBox is useful for displaying smaller images on the screen with the option for the visitor to view the image in full size by clicking on it. To accomplish this, use markup like the following:

<a id="linkID" href="full_size_image.jpg">
   <img src="thumbnail_image.jpg" alt="image title" />
</a>

Once you have that markup defined, all that remains is to call the fancybox() function in $(document).ready:

$(document).ready(function() {
   $("#linkID").fancybox();
});

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 alt 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:

$(document).ready(function() {
   $("#linkID").fancybox(
      {
         'titleShow': false
      }
   );
});

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:

$(document).ready(function() {
   $("#linkID").fancybox(
      {
         'titleShow': true,
         'titlePosition': 'inside',
         'transitionIn': 'fade',
         'transitionOut': 'fade'
      }
   );
});

Considerations With ASP.NET


FancyBox, like jQuery, is an entirely client-side technology. It can work equally well with static HTML websites, ASP.NET websites, PHP websites, and so on. However, there are a few issues that you may run into when using it in an ASP.NET Web Forms application if you use HyperLink control to render the link element that, when clicked, displays the floating window. The JavaScript code that wires everything up needs to reference the link element by its client-side id value. In some circumstances a server-side ASP.NET control's ID property value equates to its client-side id value, but most often the server-side ID property is prefixed with the ID values 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 id value of ctl00_MainContent_lnkViewDetails.

You can programmatically determine a control's rendered id value via its ClientID property. Consequently, when writing the JavaScript code to wire up FancyBox to a HyperLink control you should use syntax like so:

$("#<%=HyperLinkID.ClientID%>").fancybox();

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:

$("#ctl00_MainContent_HyperLinkID").fancybox();

Rather than using <%=...%> blocks in the markup, you can alternatively create a server-side method that emits the necessary JavaScript to turn a HyperLink 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.

Conclusion


FancyBox is a free client-side library for displaying text, images, and other multimedia content within a floating window. With just a dash of JavaScript you can quickly add some pizazz to your website by displaying detail information, full size images, or other information in an aesthetic floating window instead of showing it inline or in a new browser window. And while not discussed in this article, it is possible to use FancyBox to display a series of images in a gallery-like format.

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).

Happy Programming!

  • By Scott Mitchell


    Attachments:


  • Download the code used in this article

    Further Readings:


  • FancyBox Homepage
  • The FancyBox HOWTO Page
  • jQuery Homepage


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article