Jump to content

shifat24

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by shifat24

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

    in JavaScript

    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>

    Multiple image Gallery in one or two page javascript event problem

    in JavaScript

    Posted

    My code is 90% alright just not displaying my 2nd and 3rd image gallery topslides, it works when i clicked the 2nd gallery image but then the first one & 3rd one is hide when I clicked them,
    I want that all topslides will visible & when i clicked it will change image one by one. Also want to add multiple imgae gallery like this in this page, & add same galleries with some pages & want that it works like all of the galleries topSlides will display.& if I clicked anyone of them, no galleries will hide,
    I think it's function event loop for every page, so please help me to solve my problem please..

    I uploaded the index.html file below.

    Thanks

    index.html

×
×
  • Create New...