0

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;
}```

1 Answer 1

1

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";

});```

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.