Using SlideDeck with a Modal or Lightbox13 Comments
SlideDecks are a great way to show off a lot of information without taking up too much space, but what do you do when space is extremely limited? A modal or Lightbox might be the answer you’re looking for. Here are a few easy steps for getting SlideDeck up and running with Fancybox (our Lightbox library of choice).
If you’re not sure what we mean by “Lightbox” then check out the Smart SlideDeck demo below. It’s a really slick example of a Lightbox, but it is a lightbox nonetheless.[UltimateSlideDeckDemo url=”http://feeds.feedburner.com/Slidedeck”]
And here’s an example of a standard style Fancybox Lightbox.
Clicking the above link should present you with a modal of Google’s video search page. Typically, a Lightbox shows a photo or video, but in this case I’ve made it show an entirely different web page.
Since there are so many different variables involved in the creation and initiation of a SlideDeck, the easiest and most trouble-free way to load one into a Fancybox is using an iFrame. To do this, you’ll need to have your SlideDeck on a completely blank, unformatted page like this one.
I’m using my coworker’s rotating banner SlideDeck skin as an example. I made a copy of his demo and removed the formatting around the deck.
And here’s the SlideDeck in a Fancybox Lightbox.
The trick is to create a Fancybox that’s same size as your SlideDeck.
The below code should get you started as long as you’ve already installed Fancybox: (double click the code to copy it)
The first thing you should notice when looking at this code is that I’m assigning an ID to the <a> tag. I’m then passing this ID as an argument to the jQuery selector. The Fancybox function call comes next, and within the curly braces are the arguments or options for the Fancybox. (The page where your SlideDeck lives is the href argument) That’s all there is to it.
Let me know what you think of this tip/tutorial in the comments section below.