Search code examples
javascriptsliderexpand

Adding zoom function to slider

I have this code that i took from W3School for and image gallery slider. I am looking to add a function for it to enlarge the main image. Basicaly, i would like to click the expand button and that a new div appears above everything taking the full viewport and showing the image in a larger size.

Anyone can help?

Here is my html

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="slider.css">
</head>

<body>
  <!-- Container for the image gallery -->
  <section class="slider">

    <!-- Frame for the image -->
    <div class="gallery_img">

      <div><a id="expand" onclick="????">
          <img src="expand.png" id="expand"></a></div>
      <!-- Full-width images with number text -->
      <div class="mySlides">
        <img src="img_woods_wide.jpg">
      </div>

      <div class="mySlides">
        <img src="img_5terre_wide.jpg">
      </div>

      <div class="mySlides">
        <img src="img_mountains_wide.jpg">
      </div>

      <div class="mySlides">
        <img src="img_lights_wide.jpg">
      </div>

      <div class="mySlides">
        <img src="img_nature_wide.jpg">
      </div>

      <div class="mySlides">
        <img src="img_snow_wide.jpg">
      </div>
    </div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <!-- Thumbnail images -->
    <div class="thumbs">
      <div class="thumbs_style">
        <img class="demo cursor" src="img_woods.jpg" onclick="currentSlide(1)" alt="The Woods">
      </div>
      <div class="thumbs_style">
        <img class="demo cursor" src="img_5terre.jpg" onclick="currentSlide(2)" alt="Cinque Terre">
      </div>
      <div class="thumbs_style">
        <img class="demo cursor" src="img_mountains.jpg" onclick="currentSlide(3)" alt="Mountains and fjords">
      </div>
      <div class="thumbs_style">
        <img class="demo cursor" src="img_lights.jpg" onclick="currentSlide(4)" alt="Northern Lights">
      </div>
      <div class="thumbs_style">
        <img class="demo cursor" src="img_nature.jpg" onclick="currentSlide(5)" alt="Nature and sunrise">
      </div>
      <div class="thumbs_style">
        <img class="demo cursor" src="img_snow.jpg" onclick="currentSlide(6)" alt="Snowy Mountains">
      </div>
      <div class="thumbs_style">
        <img class="demo cursor" src="img_snow.jpg" onclick="currentSlide(6)" alt="Snowy Mountains">
      </div>
      <div class="thumbs_style">
        <img class="demo cursor" src="img_snow.jpg" onclick="currentSlide(6)" alt="Snowy Mountains">
      </div>
      <div class="thumbs_style">
        <img class="demo cursor" src="img_snow.jpg" onclick="currentSlide(6)" alt="Snowy Mountains">
      </div>
    </div>
  </section>
  <script src="slider.js"></script>
</body>

</html>

Here is my CSS


/* Position the image container (needed to position the left and right arrows) */
.slider {
  position: relative;
  width:800px;
    height:720px;
    margin:0px auto;
    border-radius:3px;s

}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Fit box for the image and style for stretch */
.mySlides img{
  width:800px;
  height:600px; 
  object-fit: cover;

}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous and expand buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  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);
}
#expand
{
    width:18px;
    position:absolute;
    top:6px;
  right:6px;
  z-index: 1;
}



/* Six columns side by side */
.thumbs{
  height:100px;
    width:800px;
    float:left;
  overflow-y:hidden;
  overflow-x: scroll;
    margin-top:10px;
    white-space:nowrap;
}

.thumbs_style
{
    display:inline-block;
}

.thumbs_style img
{
    width:105px;
    height:80px;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

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

Here is my JS

showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  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;
}```
Solution

  • Figured a way to do it by mainly focusing on changing the z-index and display properties. Best solution my beginner a** could come up with. If anyone has a suggestion to better my codes, I would be gratefull.

    Here is my HTML:

    </section>


    <!-- Frame for the image -->
<div>
  <a class="prev prev-exp  show" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next next-exp  show" onclick="plusSlides(1)">&#10095;</a>
  <div>
    <img src="expand.png" id="expand-btn" class="hide"></div>
  <div>
    <img src="close.png" id="close-btn" class="show expandables"></div>

  <a class="prev hide" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next hide" onclick="plusSlides(1)">&#10095;</a>


  <!-- Full-width images with number text -->
  <div class="mySlides expandables">
    <img class='lrg-img' src="img/nature/nature1.jpg">
  </div>
  <div class="mySlides expandables">
    <img class='lrg-img' src="img/nature/nature2.jpg">
  </div>
  <div class="mySlides expandables">
    <img class='lrg-img' src="img/nature/nature3.jpg">
  </div>
  <div class="mySlides expandables">
    <img class='lrg-img' src="img/nature/nature4.jpg">
  </div>
  <div class="mySlides expandables">
    <img class='lrg-img' src="img/nature/nature5.jpg">
  </div>
  <div class="mySlides expandables">
    <img class='lrg-img' src="img/nature/nature6.jpg">
  </div>
  <div class="mySlides expandables">
    <img class='lrg-img' src="img/nature/nature7.jpg">
  </div>
  <div class="mySlides expandables">
    <img class='lrg-img' src="img/nature/nature8.jpg">
  </div>
  <div class="mySlides expandables">
    <img class='lrg-img' src="img/nature/nature9.jpg">
  </div>
</div>
<!-- Next and previous buttons -->


<!-- Thumbnail images -->
<div class="thumbs hide">
  <div class="thumbs_style">
    <img class="demo cursor" src="img/nature/nature1.jpg" onclick="currentSlide(1)" alt="The Woods">
  </div>
  <div class="thumbs_style">
    <img class="demo cursor" src="img/nature/nature2.jpg" onclick="currentSlide(2)" alt="Cinque Terre">
  </div>
  <div class="thumbs_style">
    <img class="demo cursor" src="img/nature/nature3.jpg" onclick="currentSlide(3)" alt="Mountains and fjords">
  </div>
  <div class="thumbs_style">
    <img class="demo cursor" src="img/nature/nature4.jpg" onclick="currentSlide(4)" alt="Northern Lights">
  </div>
  <div class="thumbs_style">
    <img class="demo cursor" src="img/nature/nature5.jpg" onclick="currentSlide(5)" alt="Nature and sunrise">
  </div>
  <div class="thumbs_style">
    <img class="demo cursor" src="img/nature/nature6.jpg" onclick="currentSlide(6)" alt="Snowy Mountains">
  </div>
  <div class="thumbs_style">
    <img class="demo cursor" src="img/nature/nature7.jpg" onclick="currentSlide(7)" alt="Snowy Mountains">
  </div>
  <div class="thumbs_style">
    <img class="demo cursor" src="img/nature/nature8.jpg" onclick="currentSlide(8)" alt="Snowy Mountains">
  </div>
  <div class="thumbs_style">
    <img class="demo cursor" src="img/nature/nature9.jpg" onclick="currentSlide(9)" alt="Snowy Mountains">
  </div>
</div>

    ```

    Here is my CSS:

    .slider {
  position: relative;
  width: 80vh;
  height: 75vh;
  margin: 0px auto;
}

.slider-exp {
  position: relative;
  width: 135vh;
  height: 90vh;
  margin: 0px auto;
  padding-top: 4vh;
}

/* Hide the images by default */
.mySlides {
  position: relative;
  display: none;
  z-index: 0;
}

/* Fit box for the image and style for stretch */
.lrg-img {
  width: 80vh;
  height: 60vh;
  object-fit: cover;
  margin: 0px auto;
  border-radius: 3px;
}

.exp-size {
  position: relative;
  width: 135vh;
  height: 90vh;
  margin: 0px auto;

}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous, expand  and close buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  margin-top: -30px;
  top: 30vh;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);
}

.prev-exp,
.next-exp {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  display: none;
  text-shadow: 1px 1px 2px rgb(0, 0, 0);
  z-index: 4;

}

.prev-exp {
  left: 0;
}

/* 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,
.prev-exp:hover,
.next-exp:hover,
#close-btn:hover,
#expand-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-filter: drop-shadow(1px 1px rgba(0, 0, 0, 0));
  filter: drop-shadow(1px 1px rgba(0, 0, 0, 0));
}



#expand-btn,
#close-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  width: 18px;
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 1;
  border-radius: 0 3px 0 3px;
  padding: 16px;
  -webkit-filter: drop-shadow(1px 1px 2px rgb(0, 0, 0));
  filter: drop-shadow(1px 1px 2px rgb(0, 0, 0));
}

#close-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #333;
  z-index: 4 !important;
  top: 4vh;
  right: 0;
  border-radius: 0 3px 0 3px;
  display: none;
}

/* Thumbs style*/
.thumbs {
  height: 11vh;
  width: 80vh;
  float: left;
  overflow-y: hidden;
  overflow-x: scroll;
  margin-top: 0rem;
  white-space: nowrap;
  z-index: 0;
}

/* width */
.thumbs::-webkit-scrollbar {
  height: 4px;
  border-radius: 50%;
}

/* Track */
.thumbs::-webkit-scrollbar-track {
  background: #fff;
}

/* Handle */
.thumbs::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.thumbs::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.thumbs_style {
  display: inline-block;
}

.thumbs_style img {
  width: 10vh;
  height: 8vh;
  border-radius: 3px;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
  border: 2px solid rgba(0, 0, 0, 0.4);
}


.active,
.demo:hover {
  opacity: 1;
  border: 2px solid #ffbc00;
}

/* Expand-Window style */

#expand-window {
  display: none;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;

}

.hide {
  display: block;
}

    Here is my Javascript:

    var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}



function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  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";

}

// EXPAND FUNCTION
// Open the expanded slider
document.querySelector('#expand-btn').addEventListener('click', function () {
  let expandables = document.querySelectorAll('.expandables')
  let hide = document.querySelectorAll('.hide')
  let show = document.querySelectorAll('.show')
  let expSize = document.querySelectorAll('.lrg-img')
  for (i = 0; i < expandables.length; i++) {
    expandables[i].style.zIndex = "3";
  }
  for (i = 0; i < hide.length; i++) {
    hide[i].style.display = "none";
  }
  for (i = 0; i < show.length; i++) {
    show[i].style.display = "block";
  }
  for (i = 0; i < expSize.length; i++) {
    expSize[i].classList.add("exp-size");
  }
  document.querySelector('.slider').classList.add("slider-exp");

  // document.querySelector('#close-btn').style.display = "block";
  // document.querySelector("#expand-window").style.display = "block";
});

// Close the expanded slider
document.querySelector('#close-btn').addEventListener('click', function () {
  let expandables = document.querySelectorAll('.expandables')
  let hide = document.querySelectorAll('.hide')
  let show = document.querySelectorAll('.show')
  let expSize = document.querySelectorAll('.lrg-img')
  for (i = 0; i < expandables.length; i++) {
    expandables[i].style.zIndex = "0";
  }
  for (i = 0; i < hide.length; i++) {
    hide[i].style.display = "block";
  }
  for (i = 0; i < show.length; i++) {
    show[i].style.display = "none";
  }
  for (i = 0; i < expSize.length; i++) {
    expSize[i].classList.remove("exp-size");
  }
  document.querySelector('.slider').classList.remove("slider-exp");

  document.querySelector("#expand-window").style.display = "none";

});```