Jump to content

Link to a specific slide in W3Schools Slideshow example


sweetdiss

Recommended Posts

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;
}
Link to comment
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?

Link to comment
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);
Link to comment
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?

Link to comment
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;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...