Posted By

Jamie on 12/14/10

Tagged

Versions (?)

Last Edited at 12/14/10 12:01pm

Statistics

Viewed 680 times

Favorited by 0 user(s)

Related snippets

Demo SlideDeck HTML & JavaScript Code for Brian

/ Published in: HTML

I'm using the callback functions to turn autoPlay on and off.

Highlighted TextExpand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>SlideDeck v.1.2.0 Pro Example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="jquery-mousewheel/jquery.mousewheel.min.js"></script>
		
		<link rel="stylesheet" type="text/css" href="slidedeck.skin.css" media="screen,handheld" />
        
        
		
        
		<script type="text/javascript" src="slidedeck.jquery.js"></script>
        
        <style type="text/css">
            #slidedeck_frame {
                width: 901px;
                height: 300px;
            }        
        </style>
	</head>
	<body>
		<div id="slidedeck_frame" class="skin-slidedeck">
			<dl 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>
                    <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>
			</dl>
		</div>
        
        <script type="text/javascript">
            var autoPlayInt = 2000;          // duration between slides
            var restartSlide = 4;            // the horizontal slide we want to restart playback on
            var verticalSlide = 5;           // the slide that is our "autoplay vertical slide"
            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,
            	before: function(deck){
                    /* Horizontal slide "before" function */
                    // before each horizontal slide animates, we do a check.
            		if( verticalSlide == deck.current ){
                        // if the current slide is our user-defined vertical slide, pause autoPlay
            			deck.pauseAutoPlay = true;
            		}
            	},
            	complete: function(deck){
                    /* Horizontal slide "complete" function */
                    // after each horizontal slide, we do two checks.
            		if( deck.current == restartSlide && deck.pauseAutoPlay == false && overrideAutoPlay == false){
                        // if the current slide is our "restart slide" & autoPlay is not paused.
            			deck.pauseAutoPlay = true;
                        // set a timer to go back to the start slide and then resume autoPlay.
            			setTimeout(function(){
            				deck.goTo(1);
            				deck.pauseAutoPlay = false;
            			}, autoPlayInt - slideSpeed );
            		}
            		if( verticalSlide == deck.current && 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 & the autoPlay override is not set,
                        // set a timer to go back to the start slide and then resume autoPlay.
            			setTimeout(function(){
            				deck.goTo(1);
            				parentDeck.pauseAutoPlay = false;
            			}, autoPlayInt - slideSpeed );
            		}
            	}
            });
            slideDeckSelector.find('.verticalSlideNav').click(function(){
                // let's prevent autoPlay after a verticalNav element is clicked on.
            	// kill all autoPlay no if ands or buts!
            	overrideAutoPlay = true;
            	parentDeck.pauseAutoPlay = true;
            });
        </script>
        
        <noscript>
             <p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
        </noscript>
	</body>
</html>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.