Jump to content

Multiple image Gallery in one or two page javascript event problem


shifat24

Recommended Posts

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

Link to comment
Share on other sites

It is looking through all gallaries class names and hides them, then show current selected image.

You need it to look at current gallery image selected, transverse to parent container of that specfic gallery, transverse to main image and change that only!

Link to comment
Share on other sites

  • 2 weeks later...

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

            .column.active  {
                border-color:  #6200ff;
                border-width: 2px;
            }

            .columImg {
                opacity: 1;
                width:100%;
                cursor: pointer;
            }
            .active,
            .columImg:hover {
                opacity: .8;
            }
        </style>


    </head>

    <body>




        <!-- 1st States -->

        <h3 style="text-align:center">Dell laptop display</h3>


        <div id="A1" 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 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(this, 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(this, 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(this, 3)" alt="">
                </div>

            </div>
        </div>
        <!-- 2nd States -->

        <h3 style="text-align:center">MackBook display</h3>


        <div  id="A2" 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 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(this, 1)" 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(this, 2)" 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(this, 3)" alt="">
                </div>

            </div>

        </div>
        <!-- 3rd States -->

        <h3>Dell & Mac laptop display</h3>

        <div id="A3" 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 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(this, 1)" 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(this, 2)" 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(this, 3)" alt="">
                </div>

            </div>
        </div>

        <script>

            var slideIndex = 1;
            var QparentElment = document.querySelectorAll(".container");
            // get the first child ".mySlides" and display
            for (j = 0; j < QparentElment.length; j++) {
                //console.log(QparentElment[j].querySelector(".mySlides"));
                QparentElment[j].querySelector(".mySlides").style.display = "block";
                QparentElment[j].querySelector(".column").className += " active";
            }

            function currentSlide(elem, n) {
                // from the the closest parent that image was selected from, send parent identifying pararmeter to slideshows function
                var parentElment = elem.closest(".container");

                showSlides(parentElment, slideIndex = n);
            }

            function showSlides(elem, n) {

                var x;
//set all references of mySlides and columnImg as a refferal from parameter recieved as elem as current .container
                var topSlides = elem.getElementsByClassName("mySlides");
                var colImg = elem.getElementsByClassName("columImg");

                if (n > topSlides.length)
                {
                    slideIndex = 1
                }

                //    if (n < 1)
                //    {slideIndex = topSlides.length}
                //console.log(topSlides.length);
                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", "");
                    colImg[x].parentElement.className = colImg[x].parentElement.className.replace(" active", "");
                }

                topSlides[slideIndex - 1].style.display = "block";
                colImg[slideIndex - 1].className += " active";
                colImg[slideIndex - 1].parentElement.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
×
×
  • Create New...