Revision: 37629
Updated Code
at December 31, 2010 04:07 by Jamie
Updated Code
<!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>
<!-- Include jQuery first. -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<!-- Include the below script, Copyright 2010, Brandon Aaron (http://brandonaaron.net/) for scrollwheel support. -->
<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" />
<!-- Styles for the skin that only load for Internet Explorer -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="slidedeck.skin.ie.css" media="screen,handheld" />
<![endif]-->
<!-- Include the SlideDeck jQuery script. -->
<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>
<!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
<noscript>
<p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
</noscript>
</body>
</html>
Revision: 37628
Updated Code
at December 31, 2010 04:06 by Jamie
Updated Code
<!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>
<!-- Include jQuery first. -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<!-- Include the below script, Copyright 2010, Brandon Aaron (http://brandonaaron.net/) for scrollwheel support. -->
<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" />
<!-- Styles for the skin that only load for Internet Explorer -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="slidedeck.skin.ie.css" media="screen,handheld" />
<![endif]-->
<!-- Include the SlideDeck jQuery script. -->
<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>
<!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
<noscript>
<p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
</noscript>
</body>
</html>
Revision: 37627
Updated Code
at December 31, 2010 03:41 by Jamie
Updated Code
<!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>
<!-- Include jQuery first. -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<!-- Include the below script, Copyright 2010, Brandon Aaron (http://brandonaaron.net/) for scrollwheel support. -->
<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" />
<!-- Styles for the skin that only load for Internet Explorer -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="slidedeck.skin.ie.css" media="screen,handheld" />
<![endif]-->
<!-- Include the SlideDeck jQuery script. -->
<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;
var restartSlide = 4;
var verticalSlide = 5;
var slideSpeed = 500;
var overrideAutoPlay = false;
/* Initiate the SlideDeck */
var slideDeckSelector = $('.skin-slidedeck dl.slidedeck');
var parentDeck = slideDeckSelector.slidedeck({
speed: slideSpeed,
autoPlay: true,
autoPlayInterval: autoPlayInt,
before: function(deck){
if( verticalSlide == deck.current ){
deck.pauseAutoPlay = true;
}
},
complete: function(deck){
if( deck.current == restartSlide && deck.pauseAutoPlay == false && overrideAutoPlay == false){
deck.pauseAutoPlay = true;
setTimeout(function(){
deck.goTo(1);
deck.pauseAutoPlay = false;
}, autoPlayInt - slideSpeed );
}
if( verticalSlide == deck.current && overrideAutoPlay == false){
deck.pauseAutoPlay = false;
}
}
});
parentDeck.vertical({
complete: function(deck){
if( ( deck.current + 1 ) == deck.slides.length && overrideAutoPlay == false ){
setTimeout(function(){
deck.goTo(1);
parentDeck.pauseAutoPlay = false;
}, autoPlayInt - slideSpeed );
}
}
});
slideDeckSelector.find('.verticalSlideNav').click(function(){
// kill all autoplay! No ifs, ands, or buts!
overrideAutoPlay = true;
parentDeck.pauseAutoPlay = true;
});
</script>
<!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
<noscript>
<p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
</noscript>
</body>
</html>
Revision: 37626
Updated Code
at December 29, 2010 08:12 by Jamie
Updated Code
<!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>
<!-- Include jQuery first. -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<!-- Include the below script, Copyright 2010, Brandon Aaron (http://brandonaaron.net/) for scrollwheel support. -->
<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" />
<!-- Styles for the skin that only load for Internet Explorer -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="slidedeck.skin.ie.css" media="screen,handheld" />
<![endif]-->
<!-- Include the SlideDeck jQuery script. -->
<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;
var restartSlide = 4;
var verticalSlide = 5;
var slideSpeed = 500;
/* Initiate the SlideDeck */
$('.skin-slidedeck dl.slidedeck').slidedeck({
speed: slideSpeed,
autoPlay: true,
autoPlayInterval: autoPlayInt,
before: function(deck){
if( verticalSlide == deck.current ){
deck.pauseAutoPlay = true;
}
},
complete: function(deck){
if( deck.current == restartSlide && deck.pauseAutoPlay == false){
deck.pauseAutoPlay = true;
setTimeout(function(){
deck.goTo(1);
deck.pauseAutoPlay = false;
}, autoPlayInt - slideSpeed );
}
if( verticalSlide == deck.current ){
deck.pauseAutoPlay = false;
}
}
}).vertical();
</script>
<!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
<noscript>
<p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
</noscript>
</body>
</html>
Revision: 37625
Updated Code
at December 14, 2010 12:02 by Jamie
Updated Code
<!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.1.9 Pro Example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="slidedeck.skin.css" media="screen,handheld" />
<!-- Styles for the skin that only load for Internet Explorer -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="slidedeck.skin.ie.css" media="screen,handheld" />
<![endif]-->
<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>
<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 3</dt>
<dd>Slide content</dd>
<dt>Slide 4</dt>
<dd>Slide content</dd>
<dt>Slide 5</dt>
<dd>Slide content</dd>
</dl>
</div>
<script type="text/javascript">
/** Initiate the SlideDeck */
var slideWithVerticalSlides = 2;
var theDeck = $('.skin-slidedeck dl.slidedeck').slidedeck({
scroll: 'stop',
autoPlay: true,
autoPlayInterval: 1000,
complete: function(){
if( slideWithVerticalSlides == theDeck.current ){
theDeck.pauseAutoPlay = false;
}
},
before: function(){
if( slideWithVerticalSlides == theDeck.current ){
theDeck.pauseAutoPlay = true;
}
}
});
/**
* Take advantage of the loaded() method of the SlideDeck library to move the vertical navigation
* for slide 1 (.slide_2) from the slide area (dl.slidedeck .slide_2) to the spine area (dl.slidedeck .spine_2)
*/
theDeck.loaded(function(){
theDeck.pauseAutoPlay = true;
$('.skin-slidedeck dl.slidedeck .slide_2 .verticalSlideNav').appendTo('.skin-slidedeck dl.slidedeck .spine_2');
});
/** Enable vertical slides */
theDeck.vertical();
</script>
<!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
<noscript>
<p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
</noscript>
</body>
</html>
Revision: 37624
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at December 14, 2010 12:01 by Jamie
Initial Code
<!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.1.9 Pro Example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="slidedeck.skin.css" media="screen,handheld" />
<!-- Styles for the skin that only load for Internet Explorer -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="slidedeck.skin.ie.css" media="screen,handheld" />
<![endif]-->
<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>
<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 3</dt>
<dd>Slide content</dd>
<dt>Slide 4</dt>
<dd>Slide content</dd>
<dt>Slide 5</dt>
<dd>Slide content</dd>
</dl>
</div>
<script type="text/javascript">
/** Initiate the SlideDeck */
var slideWithVerticalSlides = 2;
var theDeck = $('.skin-slidedeck dl.slidedeck').slidedeck({
scroll: 'stop',
autoPlay: true,
autoPlayInterval: 1000,
complete: function(){
if( slideWithVerticalSlides == theDeck.current ){
theDeck.pauseAutoPlay = false;
}
},
before: function(){
if( slideWithVerticalSlides == theDeck.current ){
theDeck.pauseAutoPlay = true;
}
}
});
/**
* Take advantage of the loaded() method of the SlideDeck library to move the vertical navigation
* for slide 1 (.slide_2) from the slide area (dl.slidedeck .slide_2) to the spine area (dl.slidedeck .spine_2)
*/
theDeck.loaded(function(){
theDeck.pauseAutoPlay = true;
$('.skin-slidedeck dl.slidedeck .slide_2 .verticalSlideNav').appendTo('.skin-slidedeck dl.slidedeck .spine_2');
});
/** Enable vertical slides */
theDeck.vertical();
</script>
<!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
<noscript>
<p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p>
</noscript>
</body>
</html>
Initial URL
Initial Description
I'm using the callback functions to turn autoPlay on and off.
Initial Title
Demo SlideDeck HTML & JavaScript Code for Brian
Initial Tags
Initial Language
HTML