Jump to content

can't display all the images of the gallery, when clicked 2nd display first one is hide, i want to display all

shifat24

By shifat24
in JavaScript

 Share

Recommended Posts

shifat24 Newbie

shifat24

Posted
Posted

In this code, here are 3 image gallery, but only first galleries top image is visible, when i clicked 2nd gallery image then 1st galleries Upper image is hide, i want that all of the galleries  top images will dispaly.  Code is below:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>w3schools foorum qna</title>
 
    <style>
 
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    text-align: center;
  }
   
    * {
      box-sizing: border-box;
    }
    p{
        margin: 20px;
        word-wrap: break-word;
      }
   
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
   
    /* Hide the images by default */
    .mySlides {
      display: none;  
      max-width: 300px;
      max-height: 300px;
     
    }
   
  .row:after {
    content: "";
      display: table;
      clear: both;
    }
   
    .row{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
 
    /* Six columns side by side */
    .column {
      width: 10%;
      border: 1px solid black;
      border-radius: 5px;
      padding: 2px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      margin: 2px;
    }
    .columImg {
      opacity: 1;
      width:100%;
      cursor: pointer;
    }
     .active,
    .columImg:hover {
      opacity: 1;
    }
    </style>
 
 
</head>
 
<body>
 
   
 
<!-- 1st States -->
 
<h3 style="text-align:center">Dell laptop display</h3>
 
<div class="container">
   <div class="mySlides">
    <img src="https://cdn.pixabay.com/photo/2016/03/27/07/12/apple-1282241_960_720.jpg" style="width:100%">
   </div>
 
   <div class="mySlides">
    <img src="https://cdn.pixabay.com/photo/2015/01/09/02/45/laptop-593673_960_720.jpg" style="width:100%">
   </div>
 
   <div class="mySlides">
    <img src="https://cdn.pixabay.com/photo/2016/11/23/14/37/apple-1853259_960_720.jpg" style="width:100%">
   </div>
   
</div>
 <div class="row">
     <div class="column">
      <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2016/03/27/07/12/apple-1282241_960_720.jpg"  onclick="currentSlide(1)" alt="">
     </div>
 
     <div class="column">
      <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/01/09/02/45/laptop-593673_960_720.jpg" onclick="currentSlide(2)" alt="">
     </div>
 
     <div class="column">
      <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2016/11/23/14/37/apple-1853259_960_720.jpg" onclick="currentSlide(3)" alt="">
     </div>
     
 </div>
 
<!-- 2nd States -->
 
<h3 style="text-align:center">MackBook display</h3>
 
 <div class="container">
    <div class="mySlides">
     <img src="https://cdn.pixabay.com/photo/2015/09/05/22/33/office-925806_960_720.jpg" style="width:100%">
    </div>
 
    <div class="mySlides">
     <img src="https://cdn.pixabay.com/photo/2017/06/23/11/49/laptop-2434393_960_720.jpg" style="width:100%">
    </div>
 
    <div class="mySlides">
     <img src="https://cdn.pixabay.com/photo/2015/05/15/02/07/computer-767781_960_720.jpg" style="width:100%">
    </div>
     
 </div>
 
   <div class="row">
      <div class="column">
       <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/09/05/22/33/office-925806_960_720.jpg"  onclick="currentSlide(4)" alt="">
      </div>
 
      <div class="column">
       <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2017/06/23/11/49/laptop-2434393_960_720.jpg" onclick="currentSlide(5)" alt="">
      </div>
 
      <div class="column">
       <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/05/15/02/07/computer-767781_960_720.jpg" onclick="currentSlide(6)" alt="">
      </div>
     
  </div>
 
  <!-- 3rd States -->
 
  <h3>Dell & Mac laptop display</h3>
 
  <div class="container">
   <div class="mySlides">
    <img src="https://cdn.pixabay.com/photo/2016/10/12/13/32/office-1734485_960_720.jpg" style="width:100%">
   </div>
 
   <div class="mySlides">
    <img src="https://cdn.pixabay.com/photo/2015/09/05/23/54/macbook-926425_960_720.jpg" style="width:100%">
   </div>
 
   <div class="mySlides">
    <img src="https://cdn.pixabay.com/photo/2015/09/05/19/42/macbook-924781_960_720.jpg" style="width:100%">
   </div>
   
</div>
 
   <div class="row">
     <div class="column">
      <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2016/10/12/13/32/office-1734485_960_720.jpg"  onclick="currentSlide(7)" alt="">
     </div>
 
     <div class="column">
      <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/09/05/23/54/macbook-926425_960_720.jpg" onclick="currentSlide(8)" alt="">
     </div>
 
     <div class="column">
      <img class="columImg cursor" src="https://cdn.pixabay.com/photo/2015/09/05/19/42/macbook-924781_960_720.jpg" onclick="currentSlide(9)" alt="">
     </div>
     
 </div>
 
<script>
   
  var slideIndex = 1;
 
showSlides(slideIndex);
 
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 
function showSlides(n) {
 
  var x;
 
  var topSlides = document.getElementsByClassName("mySlides");
  var colImg = document.getElementsByClassName("columImg");
 
  if (n > topSlides.length)
           {slideIndex = 1}
 
  for (x = 0; x < topSlides.length; x++) {
      topSlides[x].style.display = "none";
  }
  for (x = 0; x < colImg.length; x++) {
      colImg[x].className = colImg[x].className.replace(" active", "");
  }
 
  topSlides[slideIndex-1].style.display = "block";
  colImg[slideIndex-1].className += " active";
}
 
</script>
 
</body>
</html>
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
 Share
Go to topic listing
×
×
  • Create New...