Posted By

Jamie on 07/02/10


Tagged

to vertical go goto pro slidedeck


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

mchadwick


Go To Vertical Slides in SlideDeck Pro


 / Published in: JavaScript
 

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

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

  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>

Report this snippet  

You need to login to post a comment.