Blog

These articles are in reference to our original plugin, SlideDeck 1 PRO. If you are searching for articles related to our SlideDeck 2 WordPress Plugin, please check the blog category for SlideDeck 2 or search our Knowledge Base.

Using SlideDeck with a Modal or Lightbox

On December 10, 201013 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.

First, you’ll have to add the Fancybox JavaScript and CSS to your page. See the Fancybox how to use page for more information.

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)

<a id="fancybox_example_deck" onclick="return false;" href="#">Fancybox SlideDeck</a>

<script type="text/javascript">
jQuery("#fancybox_example_deck").fancybox({
	type:'iframe',
	overlayOpacity: 0.8,
	overlayColor: '#000',
	scrolling: 'no',
	href:'http://www.slidedeck.com/demo/rotatingbanner_no_layout.html',
	width: 620,
	height: 250
});
</script>

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.

Leave a Reply

Comments (13) Responses

  1.  

    Jonathan

    I had luck by using Easy Fancybox and the class “fancybox-iframe” as indicated on the Media settings page in WP. I put that class in the link and omitted the whole Javascript part of the tutorial as it had no affect. The iframe in the tutorial displayed perfectly as a modal overlay in this way.

  2.  

    Amy Anderson

    I think Matt’s question may have addressed this, but I’m not really sure how to put it in practice. I have a slidedeck that is a vimeo feed, but it is a secondary slider and it is small, so when they click, I would like the video to open larger in a lightbox rather than playing at 249×139. Is there any way to do that?
    Thanks!

    •  

      Jason

      Hey Amy – what you’re describing would require a custom integration of SlideDeck, as currently we don’t support lightboxing of content out-of-the-box.

  3.  

    Bruno

    Hi,

    Im integrating slideDeck using fancybox, already managed to do it. But site is responsive, how can i make it responsive? Any documentation at all about it?

    Im planning to use: http://fancyapps.com/fancybox/ – it is a new fancybox version that is responsive.

    Thanks
    Bruno

  4.  

    Chris

    Is there a way to load a smart slidedeck into an iframe?

    •  

      Jamie

      Hi Chris,
      The easiest way to do this is to create a new blank template in your WordPress theme (one that only does the theme setup and has no layout and CSS) Then you should be able to make a new post with the blank template and use that as the iFrame source.

  5.  

    Matt

    Hi! On wordpress is possible using a lightbox plugin inside SlideDeck?
    Because if i activate a normal lightbox plugin in wordpress, it don’t work inside SlideDeck, how can I do?

    Thanks

  6.  

    Carl

    It all seems good, but how would one go about opening slidedeck in Fancybox with WordPress?

    •  

      Angela

      Hello Carl,
      In short, this is best achieved with the jQuery plugin, not the WordPress plugin. While not entirely impossible, WordPress definitely makes it more challenging.

    •  

      Carl

      I got it working quite well, the only problem i have now is Fancybox itself. The first time i open the lightbox it only manages to load the css, but no scripts. The second time i open the link everything works beautifully.

      Any ideas on how i could force the lightbox to load slidedecks scripts first and then the css? Any kind of answer is much appreciated.

    •  

      Angela

      Hey Carl,

      We’d be happy to take a look. Please post your inquiry on GetSatisfaction, so we can further assist you.

      Thanks!