Linking to specific slide

Question

I've got this slideshow on one page and on my homepage I've got a list of images (the same ones as in the slide).

I want to be able to, by clicking on a specific picture on the homepage, come to the same picture of the slide on the slideshow-page.

I tried to ID everything, but the slide starts from the first picture however I do it.

Is there any way to make the slideIndex a specific number from the start by having something in the link?

<div class="nav" style="font-size: 15px; margin-top: 7px;">
<div class="">
  <a class="" onclick="plusDivs(-1)"><div class="triangle-right"></div></a>
  <a href="home.html"><div class="fyrkant"></div></a>
  <a class="" onclick="plusDivs(1)"><div class="triangle-left"></div></a>
</div>

Slides

<div class="w3-display-container mySlides">
 <img src="img/1.jpg" style="width:100%">
  <div class="">
    <h1>
     1
    </h1>
    <p>
     Description
    </p>
 </div>
 <img src="img/1.1.jpg" style="width:100%">
</div>

<div class="w3-display-container mySlides">
 <img src="img/2.jpg" style="width:100%; background-color: #fff;">
  <div class="">
   <h1>
    2
   </h1>
   <p>
   </p>
  </div>
 <img src="img/2.2.jpg" style="width:100%">
</div>

Script

<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
 showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
 if (n > x.length) {slideIndex = 1}    
 if (n < 1) {slideIndex = x.length}
 for (i = 0; i < x.length; i++) {
  x[i].style.display = "none"; 
 }
 x[slideIndex-1].style.display = "block";
 }
</script>

You would need to get the hash from the URL with `location.hash`. Then your JS would need to loop through the slides to find the index of the corresponding slide with the matching ID and have it advance to that position. The other option would be to pass the index of the slide you want and the slider advances to that position. Either way, you will need to update your slider JS to look for a query param or hash to advance to. — hungerstar, Dec 20 '17 at 15:44

score 0 · Answer 1 · answered Dec 20 '17 at 15:47

Is this what you're looking for maybe?

<script>
  var slideIndex = 1;
  var hash = window.location.hash;
  if(hash){
    hash = parseInt(hash.split('#')[1]);
    slideIndex = hash;
  }
  showDivs(slideIndex);
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }

In this way you can pull a number from the url when a user visits your site and uses a "#[number]" at the end of the url. example: http://google.com/#3 - would show slide 3

score 0 · Answer 2 · answered Dec 20 '17 at 15:59

hope to help

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<body>

<h2 style="text-align:center">Lightbox</h2>

<div class="row">
  <div class="column">
    <img src="http://placekitten.com/420/600" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="http://placekitten.com/450/600" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="http://placekitten.com/460/700" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="http://placekitten.com/420/600" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="http://placekitten.com/420/600" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="http://placekitten.com/450/600" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="http://placekitten.com/460/700" style="width:100%">
    </div>
    
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="http://placekitten.com/420/600" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="http://placekitten.com/420/600" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="http://placekitten.com/450/600" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
    </div>
    <div class="column">
      <img class="demo cursor" src="http://placekitten.com/460/700" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="http://placekitten.com/420/600" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>   
</body>
</html>

Linking to specific slide

2 Answers2