sweetdiss Posted June 16, 2016 Share Posted June 16, 2016 I'm using the W3Schools Slideshow example here: http://www.w3schools.com/howto/howto_js_slideshow.asp I have links on a different page, and I'd like each of those links to open the slideshow page on a specific slide. Is there a simple way to do this without rewriting much of the existing HTML/JavaScript/CSS? 1 Link to comment Share on other sites More sharing options...
Ingolme Posted June 16, 2016 Share Posted June 16, 2016 How do you intend to tell it which slide to start on? What URL would the links on the other page use? Link to comment Share on other sites More sharing options...
davej Posted June 16, 2016 Share Posted June 16, 2016 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 More sharing options...
sweetdiss Posted June 17, 2016 Author Share Posted June 17, 2016 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 More sharing options...
Ingolme Posted June 17, 2016 Share Posted June 17, 2016 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 More sharing options...
sweetdiss Posted June 17, 2016 Author Share Posted June 17, 2016 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 More sharing options...
Ingolme Posted June 17, 2016 Share Posted June 17, 2016 That sounds like a Javascript error occurred. You should check your browser's Javascript console for error messages. Link to comment Share on other sites More sharing options...
davej Posted June 17, 2016 Share Posted June 17, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now