Posted By

Jamie on 07/02/10

Tagged

Versions (?)

Last Edited at 07/02/10 02:36am

Statistics

Viewed 946 times

Favorited by 1 user(s)

Related snippets

Go To Vertical Slides in SlideDeck Pro

/ Published in: JavaScript

This snippet requires that you have SlideDeck Pro and jQuery loaded in the head of your HTML file.

Highlighted TextExpand

<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>Vertical Slide 1
		 <a class="sd-nav" href="/example.html#3-1">I take you to vertical slide 1</a> 
				 <a class="sd-nav" href="/example.html#3-2">I take you to vertical slide 2</a> 
			 <a class="sd-nav" href="/example.html#3-3">I take you to vertical slide 3</a> 
				 <a class="sd-nav" href="/example.html#3-4">I take you to vertical slide 4</a> 
			 <a class="sd-nav" href="/example.html#3-5">I take you to vertical slide 5</a></li> 
	 <li>Vertical Slide 2</li> 
	 <li>Vertical Slide 3</li> 
	 <li>Vertical Slide 4</li> 
	 <li>Vertical Slide 5</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>
	  
		<noscript> 
		 Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a> 
 </noscript> 
		 
		 <a class="sd-nav" href="/example.html#3-1">I take you to horizontal slide 3 with all the vertical slides</a> 
		 
		 <a class="sd-nav" href="/example.html#3-4">I take you to horizontal slide 3, vertical slide 4</a> 
		 
		 <a class="sd-nav" href="/example.html#4">I take you to horizontal slide 4</a> 
	</body>

URL: http://www.slidedeck.com/usage-documentation/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.