Blog

Slide URLs: How to Link to a Specific Slide

On July 7, 201010 Comments

Linking users to a SlideDeck is common, but what if slide 1 is not what you want the user to see first? Imagine that you would like to view slide 3 when the page loads or maybe a vertical slide on slide 4, how can this be done? By utilizing the goTo function from the SlideDeck API,  guiding users to a specific slide is very simple.

The code snippet below provides a detailed example or view the full screen version:


<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>

Leave a Reply

Comments (10) Responses

  1.  

    James

    Great post. Is it possible to show more than one slide on the initial load? I would like to show a part of each slide when loading, if possible.

    •  

      Dave

      Hey James, there aren’t any plans for this kind of feature at this time, but you could always try programming something with a custom Lens.

  2.  

    Josh

    I’m getting theSlideDeck is null or not an object
    and
    this.verticalSlides is null or not an object errors in IE

  3.  

    Josh

    will this process external links as well? Say if I want to link to slide #3-4 from a different page can i put in and have it automatically go to slide #3-4 when the page is loaded?

  4.  

    Bobby

    I’m trying to do this with the wordpress plugin and linking my footer links to individual slides for alternate navigation. What am I doing wrong?

    •  

      Angela

      Hello Bobby,

      We’d have to take a look at your site to better understand what’s going on. Please post your inquiry on http://getsatisfaction.com/slidedeck where our Support Team can assist you. Please be sure to select the product you need help with. All PRO users get priority support over LITE users. Our typical response time is 24-48 hours during business hours(M-F 8am-5pm), often requests made after 3pm on Friday will be responded to the following Monday.

      Thank you!

    •  

      paige

      Did you ever find an answer to this?. I am having the same problem. Thx!

  5. Pingback: SlideDeck how-to tutorial paginated slide loop code snippet | SlideDeck Web Slider