Jump to content

shifat24

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

shifat24's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. shifat24
    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>
  2. shifat24
    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...