Advanced Search

Go To Vertical Slides in SlideDeck Pro

/ Published in: JavaScript
Save to your folder(s)
This snippet requires that you have SlideDeck Pro and jQuery loaded in the head of your HTML file.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <body> 
  2. 		<div id="slidedeck_frame"> 
  3. 			<dl class="slidedeck"> 
  4. 				<dt>Slide 1</dt> 
  5. 				<dd>Slide content</dd> 
  6. 				<dt>Slide 2</dt> 
  7. 				<dd>Slide content</dd> 
  8. 				<dt>Slide 3</dt> 
  9. 				<dd> 
  10.                 <ul class="slidesVertical"> 
  11. 	              <li><p><strong>Vertical Slide 1</strong></p>
  12. 		          <a class="sd-nav" href="/example.html#3-1">I take you to vertical slide 1</a><br> 
  13. 				  <a class="sd-nav" href="/example.html#3-2">I take you to vertical slide 2</a><br> 
  14. 			      <a class="sd-nav" href="/example.html#3-3">I take you to vertical slide 3</a><br> 
  15. 				  <a class="sd-nav" href="/example.html#3-4">I take you to vertical slide 4</a><br> 
  16. 			      <a class="sd-nav" href="/example.html#3-5">I take you to vertical slide 5</a></li> 
  17. 	              <li><p><strong>Vertical Slide 2</strong></p></li> 
  18. 	              <li><p><strong>Vertical Slide 3</strong></p></li> 
  19. 	              <li><p><strong>Vertical Slide 4</strong></p></li> 
  20. 	              <li><p><strong>Vertical Slide 5</strong></p></li> 
  21. 	            </ul> 
  22.  
  23. 				</dd> 
  24. 				<dt>Slide 4</dt> 
  25. 				<dd>Slide content</dd> 
  26. 			</dl> 
  27. 		</div> 
  28. 		<script type="text/javascript"> 
  29. 			// Let's name the SlideDeck and store it somewhere. 
  30. 			var theSlideDeck = $('.slidedeck').slidedeck();
  31. 			theSlideDeck.vertical();
  32.  
  33. 			$(document).ready(function() {
  34. 				// Check the URL hash
  35. 				var hash = document.location.hash;
  36. 				if(hash){
  37. 					hash = hash.split('#')[1];
  38. 					var slideIndex = hash.split('-');
  39. 					if(slideIndex.length > 1){
  40. 						// horiz & vert
  41. 						theSlideDeck.goToVertical(slideIndex[1],slideIndex[0]);
  42. 					}else{
  43. 						// horiz only
  44. 						theSlideDeck.goTo(slideIndex[0]);
  45. 					}
  46. 				}
  47.  
  48. 				// Gather all the links with a class of sd-nav
  49. 				slideDeckLinks = $('a.sd-nav');
  50.  
  51. 				// Process the links and add goTo commands
  52. 				slideDeckLinks.each(function(index){
  53.  
  54. 					// Get the hashes
  55. 					var hash = this.href.split('#')[1];
  56.  
  57. 					// Divide the hashes into horizontal-vertical array
  58. 					var slideIndex = hash.split('-'); 
  59.  
  60. 					// Make each link do nothing when it's clicked.
  61. 					// Figure out if it should be vertical and horizontal navigation or just horizontal
  62. 					$(this).click(function(event){
  63. 						event.preventDefault(); // don't follow link
  64. 						if(slideIndex.length > 1){
  65. 							// horiz & vert
  66. 							theSlideDeck.goToVertical(slideIndex[1],slideIndex[0]);
  67. 						}else{
  68. 							// horiz only
  69. 							theSlideDeck.goTo(slideIndex[0]);
  70. 						}
  71. 					});
  72. 				});
  73. 			});
  74.  
  75. 		</script>
  76. 	    <!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! --> 
  77. 		<noscript> 
  78. 		    <p>Powered By <a href="http://www.slidedeck.com" title="Visit SlideDeck.com">SlideDeck</a></p> 
  79.         </noscript> 
  80. 		<br> 
  81. 		  <a class="sd-nav" href="/example.html#3-1">I take you to horizontal slide 3 with all the vertical slides</a> 
  82. 		<br> 
  83. 		  <a class="sd-nav" href="/example.html#3-4">I take you to horizontal slide 3, vertical slide 4</a> 
  84. 		<br> 
  85. 		  <a class="sd-nav" href="/example.html#4">I take you to horizontal slide 4</a> 
  86. 	</body>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.