Code snippet examples for user and how-to documentation.

We all love our WordPress plugins, but make no mistake – making them work for everyone can be a hairy beast. Each plugin developer has no control over how their user’s theme is coded, or which other developers’ plugins & scripts are being loaded, and how they behave. Given the openness of the WordPress community, it’s to be expected, but sometimes these external factors can conflict with each other to produce…interesting results…

Sometimes theme or script conflicts can prevent SlideDeck 2 from appearing and functioning as it should, right out of the box. Thankfully, we recognized this pretty early on in our internal testing, and we implemented an awesome little feature that can nip the majority of these issues in the bud – by loading them in iframes.

Already know about iframes? Skip straight to the code, below.

No, Apple did not invent the iframei-What?? Is this an Apple product?

No, no, no – iframes have been around a lot longer than the shiny white products of Jobsian heritage. They’re essentially mini web pages that are displayed within a window embedded in the surrounding parent page. Although you may not recognize them, you’ve definitely seen them around: Facebook Like buttons, Twitter search boxes and YouTube videos – all of these commonly-used social web elements are actually embedded in pages using iframes

So why is this helpful to us?

Since iframes are actually windows onto entirely separate pages, the content displayed in them is pretty well-insulated from anything else that’s happening on the surrounding page – whether that’s conflicting CSS styles, or javascript. Embedding your SlideDeck in an iframe therefore lets you effectively sandbag it from other conflicting elements on your page, thereby ensuring that it renders exactly as you intended.

Ok, I’m sold. How do I embed my SlideDeck inside an iframe?

Are you ready for this? We have two different ways to do it. Don’t worry, this won’t hurt a bit!

1. To embed a single SlideDeck inside an iframe: Simply add the parameter iframe=1 into the shortcode you used to embed the SlideDeck in your post or page – here are a couple examples:

[SlideDeck2 id=XXXX iframe=1]
<?php echo do_shortcode( '[SlideDeck2 id=XXXX iframe=1]' ); ?>

To embed all SlideDecks inside iframes, moving forward: Under “SlideDeck 2 » Advanced Options“, toggle the “Include the “iframe=1” attribute in all new shortcode embeds by default” option to ON (this will not affect any already inserted SlideDeck shortcodes, so you will need to go back and modify those)

What about SEO? Aren’t iframes, like, the devil when it comes to search rankings?

It depends what you’re going for. Google does actually crawl the content and links contained inside iframes, and gives credit to the originating page. This means that embedding your SlideDeck inside an iframe will confer no SEO benefit to the page you embed them on. The good news, however, is that your SlideDecks all reside locally on your WordPress installation, so your overall site will still be credited as the source of the content.

Hopefully that gives you a good understanding of our ‘silver bullet’ solution for script and styling conflicts. Still got questions? Let us know in the comments!

 

.slidedeck_frame.skin-image_caption_top .sd-node-image img{
border: 0 !important;
padding: 0 !important;
}

In this code example we are setting a SlideDeck to only AutoPlay through Vertical Slides and not Horizontal Slides. Instead of progressing to the next Horizontal Slide after completing its Vertical Cycle, we check to see if the last Vertical Slide is next and if so, pause the AutoPlay, progress to the first Vertical Slide and then resume AutoPlay. This will work for multiple Vertical Slides in a single Deck. We have set the clicking of the Vertical Navigation to cancel this AutoPlay, no ifs ands or buts.

<div id="slidedeck_frame" class="skin-slidedeck">
<dl class="slidedeck">
<dt>Slide 1</dt>
<dd>
<ul class="slidesVertical">
<li><p><strong>Vertical Slide 1</strong></p></li>
<li><p><strong>Vertical Slide 2</strong></p></li>
<li><p><strong>Vertical Slide 3</strong></p></li>
<li><p><strong>Vertical Slide 4</strong></p></li>
<li><p><strong>Vertical Slide 5</strong></p></li>
</ul>
</dd>
<dt>Slide 2</dt>
<dd>Slide 2 content</dd>
<dt>Slide 3</dt>
<dd>Slide 3 content</dd>
<dt>Slide 4</dt>
<dd>Slide 4 content</dd>
<dt>Slide 5</dt>
<dd>Slide 5 content</dd>
</dl>
</div>
<script type="text/javascript">
var autoPlayInt = 2000;          // duration between slides
var slideSpeed = 500;            // how fast do our slides slide?
var overrideAutoPlay = false;    // a special override to prevent autoPlay
/* ------------------------------ */
/*     Initiate the SlideDeck     */
/* ------------------------------ */
// Define the selected deck, for later use.
var slideDeckSelector = $('.skin-slidedeck dl.slidedeck');
// Create the SlideDeck, and assign it to the "parentDeck" variable for later use.
var parentDeck = slideDeckSelector.slidedeck({
speed: slideSpeed,
autoPlay: true,
autoPlayInterval: autoPlayInt,
hideSpines: false,
complete: function(deck){
if( typeof(deck.vertical().navChildren) != 'undefined' && overrideAutoPlay == false){
// if we're on our user-defined vertical slide & the autoPlay override is not set.
deck.pauseAutoPlay = false;
}
}
});
parentDeck.vertical({
complete: function(deck){
/* Vertical slide "complete" function */
// after each vertical slide, let's do yet another check.
if( ( deck.current + 1 ) == deck.slides.length && overrideAutoPlay == false ){
// if we're on the last vertical slide
// set a timer to go back to the start slide and then resume autoPlay.
parentDeck.pauseAutoPlay = true;
setTimeout(function(){
deck.goTo(1);
parentDeck.pauseAutoPlay = false;
}, autoPlayInt - slideSpeed );
}
}
});
slideDeckSelector.find('.verticalSlideNav').click(function(){
overrideAutoPlay = true;
parentDeck.pauseAutoPlay = true;
});
</script>

This code snippet will pause the current deck’s autoPlay function when the mouse enters the deck area. You will need to be sure that you enter the ID of your SlideDeck in place of the current example ID: 461

Be sure to place this code into your theme after the wp_footer(); PHP function in your theme’s footer.php file. This code needs to be run after the regular WordPress SlideDeck JavaScript has been output, so it is imperative that it goes after the wp_footer(); function as this is where SlideDeck scripts are output.

<script type="text/javascript">
jQuery('.slidedeck_461').mouseenter(function(){
jQuery(this).slidedeck().pauseAutoPlay = true;
});
</script>

The ID of your SlideDeck is shown in your list of SlideDecks after the name:

<dl id="slidedeck" class="slidedeck">
<dt>Slide 1</dt>
<dd>Slide content</dd>
<dt>Slide 2</dt>
<dd>Slide content</dd>
<dt>Slide 3</dt>
<dd>Slide content</dd>
<dt>Slide 4</dt>
<dd>Slide content</dd>
<dt>Slide 5</dt>
<dd>Slide content</dd>
</dl>
<script type="text/javascript">
var MySlideDeck = $('#slidedeck').css({
width: '900px',
height: '300px'
}).slidedeck();
// initialize an autoplay switch
var autoPlay = false;			
function myLoop(){
// only advance slides when the mouse is over.
if(autoPlay){
// Check to see if the current slide is the last slide
if(MySlideDeck.current == MySlideDeck.slides.length){
// This is the last slide, go to the first slide
MySlideDeck.goTo(1);
} else {
// This is not the last slide, go to the next slide
MySlideDeck.next();
}
}
}
setInterval(myLoop,2000);	// Run the myLoop() function every 2 seconds (2000 miliseconds)
// set autoplay to on when the mouse enters
$('.slidedeck').mouseenter(function(){
autoPlay = true;
});
// set autoplay to off when the mouse leaves
$('.slidedeck').mouseleave(function(){
autoPlay = false;
});
// set autoplay to off when the mouse clicks
$('.slidedeck').click(function(){
autoPlay = false;
});
</script>