Jump to content
sweetdiss

Link to a specific slide in W3Schools Slideshow example

Recommended Posts

How do you intend to tell it which slide to start on? What URL would the links on the other page use?

Share this post


Link to post
Share on other sites

You could pass different image index values at the end of each link URL.

<a href="slideshow.html?index=4">Slide 4</a>
var loc = window.location.href;
var  index = loc.indexOf('=');
var value = loc.substr(index+1);
alert(value);
if (value>=0 && value<slides.length){
slideIndex = value;
}else{
slideIndex = 1;
}

Share this post


Link to post
Share on other sites

How do you intend to tell it which slide to start on? What URL would the links on the other page use?

 

I have one page called designs.html which has links to different pictures. What I'm trying to do is have each of those links target my slideshow page (slideshow.html) with a specific image open on the slideshow. For example, link1 opens slideshow.html with image1 displayed on the slideshow, and link4 opens slideshow.html with image4 displayed.

 

My only idea is to use hashes in the links, like <a href="slideshow.html#image1"> or something, but I don't know what to link to in order to have the slideshow display a specific image...

 

Dave: I will try that, thanks! Just add the JavaScript to the slideshow's JS and that's it?

Share this post


Link to post
Share on other sites

I would look at location.hash or location.search instead of location.href. It gives access to specific parts of the URL.

 

If the URL is slideshow.html#image1 then you can access the "1" like this:

// location.hash contains "#image1"
// substring(6) gets everything from the sixth position in the string and on
var slide = location.hash.substring(6);

// Convert string to number
slide = Number(slide);

Share this post


Link to post
Share on other sites

 

You could pass different image index values at the end of each link URL.

<a href="slideshow.html?index=4">Slide 4</a>
var loc = window.location.href;
var  index = loc.indexOf('=');
var value = loc.substr(index+1);
alert(value);
if (value>=0 && value<slides.length){
slideIndex = value;
}else{
slideIndex = 1;
}

 

I tried this, but when the slideshow.html page loaded, it displayed the images going vertically down the page one after another, and not part of the slideshow itself anymore. The dots are all under the very last picture at the bottom, and the left/right arrows are gone. All the caption text is smooshed together at the bottom as well. Any idea what's going on?

Share this post


Link to post
Share on other sites

That sounds like a Javascript error occurred. You should check your browser's Javascript console for error messages.

Share this post


Link to post
Share on other sites

Try this...

function loadFirst(){
var slides = document.getElementsByClassName("mySlides");
var len = slides.length;
var loc = window.location.href;
var  index = loc.indexOf('=');
var value = parseInt(loc.substr(index+1));
//alert('value=[' + value + '] len =[' + len + ']');
if (isNaN(value)){
slideIndex = 1;
}else if (value>=1 && value<=len){
slideIndex = value;
}else{
slideIndex = 1;
}
//alert('slideIndex = ' + slideIndex);
showSlides(slideIndex);
}// end of func

window.onload = loadFirst;

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...