Displaying Multimedia Content In A Floating Window Using FancyBox

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 the full article, Displaying Multimedia Content In A Floating Window Using FancyBox



About the Author

Scott Mitchell

Scott Mitchell is the Editor, founder, and primary contributor to 4GuysFromRolla.com. In addition to founding 4GuysFromRolla.com, Scott also created ASPFAQs.com and ASPMessageboard.com. He works as a freelance writer, trainer, and consultant and resides in California.

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: September 10, 2014 Modern mobile applications connect systems-of-engagement (mobile apps) with systems-of-record (traditional IT) to deliver new and innovative business value. But the lifecycle for development of mobile apps is also new and different. Emerging trends in mobile development call for faster delivery of incremental features, coupled with feedback from the users of the app "in the wild." This loop of continuous delivery and continuous feedback is how the best mobile …

  • Java developers know that testing code changes can be a huge pain, and waiting for an application to redeploy after a code fix can take an eternity. Wouldn't it be great if you could see your code changes immediately, fine-tune, debug, explore and deploy code without waiting for ages? In this white paper, find out how that's possible with a Java plugin that drastically changes the way you develop, test and run Java applications. Discover the advantages of this plugin, and the changes you can expect to see …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds