FOLLOW US

Blog

Go To Vertical Slides in SlideDeck Pro

By On July 12, 20100 Comments
<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="https://dlle0tbyq9gc6.cloudfront.net/example.html#3-1">I take you to vertical slide 1</a><br> 
				  <a class="sd-nav" href="https://dlle0tbyq9gc6.cloudfront.net/example.html#3-2">I take you to vertical slide 2</a><br> 
			      <a class="sd-nav" href="https://dlle0tbyq9gc6.cloudfront.net/example.html#3-3">I take you to vertical slide 3</a><br> 
				  <a class="sd-nav" href="https://dlle0tbyq9gc6.cloudfront.net/example.html#3-4">I take you to vertical slide 4</a><br> 
			      <a class="sd-nav" href="https://dlle0tbyq9gc6.cloudfront.net/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="https://dlle0tbyq9gc6.cloudfront.net/example.html#3-1">I take you to horizontal slide 3 with all the vertical slides</a> 
		<br> 
		  <a class="sd-nav" href="https://dlle0tbyq9gc6.cloudfront.net/example.html#3-4">I take you to horizontal slide 3, vertical slide 4</a> 
		<br> 
		  <a class="sd-nav" href="https://dlle0tbyq9gc6.cloudfront.net/example.html#4">I take you to horizontal slide 4</a> 
	</body>

Comments are closed.