Revision: 28141
Updated Code
at July 8, 2010 01:53 by Jamie
Updated Code
<body>
<div id="slidedeck_frame">
<dl class="slidedeck">
<dt>Slide 1</dt>
<dd>Slide content</dd>
<dt>Slide 2</dt>
<dd>Slide content</dd>
<dt>Slide 3</dt>
<dd>
<ul class="slidesVertical">
<li><p><strong>Vertical Slide 1</strong></p>
<a class="sd-nav" href="/example.html#3-1">I take you to vertical slide 1</a><br>
<a class="sd-nav" href="/example.html#3-2">I take you to vertical slide 2</a><br>
<a class="sd-nav" href="/example.html#3-3">I take you to vertical slide 3</a><br>
<a class="sd-nav" href="/example.html#3-4">I take you to vertical slide 4</a><br>
<a class="sd-nav" href="/example.html#3-5">I take you to vertical slide 5</a></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 4</dt>
<dd>Slide content</dd>
</dl>
</div>
<script type="text/javascript">
// Let's name the SlideDeck and store it somewhere.
var theSlideDeck = $('.slidedeck').slidedeck();
theSlideDeck.vertical();
$(document).ready(function() {
// Check the URL hash
var hash = document.location.hash;
if(hash){
hash = hash.split('#')[1];
var slideIndex = hash.split('-');
if(slideIndex.length > 1){
// horiz & vert
theSlideDeck.goToVertical(slideIndex[1],slideIndex[0]);
}else{
// horiz only
theSlideDeck.goTo(slideIndex[0]);
}
}
// Gather all the links with a class of sd-nav
slideDeckLinks = $('a.sd-nav');
// Process the links and add goTo commands
slideDeckLinks.each(function(index){
// Get the hashes
var hash = this.href.split('#')[1];
// Divide the hashes into horizontal-vertical array
var slideIndex = hash.split('-');
// Make each link do nothing when it's clicked.
// Figure out if it should be vertical and horizontal navigation or just horizontal
$(this).click(function(event){
event.preventDefault(); // don't follow link
if(slideIndex.length > 1){
// horiz & vert
theSlideDeck.goToVertical(slideIndex[1],slideIndex[0]);
}else{
// horiz only
theSlideDeck.goTo(slideIndex[0]);
}
});
});
});
</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>
<br>
<a class="sd-nav" href="/example.html#3-1">I take you to horizontal slide 3 with all the vertical slides</a>
<br>
<a class="sd-nav" href="/example.html#3-4">I take you to horizontal slide 3, vertical slide 4</a>
<br>
<a class="sd-nav" href="/example.html#4">I take you to horizontal slide 4</a>
</body>
Revision: 28140
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at July 2, 2010 02:36 by Jamie
Initial Code
<body>
<div id="slidedeck_frame">
<dl class="slidedeck">
<dt>Slide 1</dt>
<dd>Slide content</dd>
<dt>Slide 2</dt>
<dd>Slide content</dd>
<dt>Slide 3</dt>
<dd>
<ul class="slidesVertical">
<li><p><strong>Vertical Slide 1</strong></p>
<a class="sd-nav" href="/example.html#3-1">I take you to vertical slide 1</a><br>
<a class="sd-nav" href="/example.html#3-2">I take you to vertical slide 2</a><br>
<a class="sd-nav" href="/example.html#3-3">I take you to vertical slide 3</a><br>
<a class="sd-nav" href="/example.html#3-4">I take you to vertical slide 4</a><br>
<a class="sd-nav" href="/example.html#3-5">I take you to vertical slide 5</a></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 4</dt>
<dd>Slide content</dd>
</dl>
</div>
<script type="text/javascript">
// Let's name the SlideDeck and store it somewhere.
var theSlideDeck = $('.slidedeck').slidedeck();
theSlideDeck.vertical();
$(document).ready(function() {
// Gather all the links with a class of sd-nav
slideDeckLinks = $('a.sd-nav');
// Process the links and add goTo commands
slideDeckLinks.each(function(index){
// Get the hashes
var hash = this.href.split('#')[1];
// Divide the hashes into horizontal-vertical array
var slideIndex = hash.split('-');
// Make each link do nothing when it's clicked.
// Figure out if it should be vertical and horizontal navigation or just horizontal
$(this).click(function(event){
event.preventDefault(); // don't follow link
if(slideIndex.length > 1){
// horiz & vert
theSlideDeck.goToVertical(slideIndex[1],slideIndex[0]);
}else{
// horiz only
theSlideDeck.goTo(slideIndex[0]);
}
});
});
});
</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>
<br>
<a class="sd-nav" href="/example.html#3-1">I take you to horizontal slide 3 with all the vertical slides</a>
<br>
<a class="sd-nav" href="/example.html#3-4">I take you to horizontal slide 3, vertical slide 4</a>
<br>
<a class="sd-nav" href="/example.html#4">I take you to horizontal slide 4</a>
</body>
Initial URL
http://www.slidedeck.com/usage-documentation/
Initial Description
This snippet requires that you have SlideDeck Pro and jQuery loaded in the head of your HTML file.
Initial Title
Go To Vertical Slides in SlideDeck Pro
Initial Tags
Initial Language
JavaScript