image preview from thumbnail on click and with sliders: How do I make click and sliding work together?

Question

I have an image preview from thumbnails that works on click of thumbnail by changing the preview src. I recently added previous and after navigation buttons. Both systems are working fine yet if I click on a thumbnail and then use the navigation buttons the preview will return to the starting image and not go next or previous. Here's the code to clarify:

 //thumbnail click $(".gallery").click(function() {$("#bigImage").attr("src", $(this).attr("src"));}); //image slider $( document ).ready(function (){ var slide = []; $(".gallery").each(function(){ slide.push(this.src); }); console.log(slide); $(".galimaslirig").click(function(){ var bigSrc = $("#bigImage").attr("src"); console.log(bigSrc); var slideCounter = slide.indexOf(bigSrc); console.log(slideCounter) if (slideCounter >= slide.length - 1){ slideCounter = -1; } $("#bigImage").attr("src", slide[++slideCounter]); }); $(".galimaslilef").click(function(){ var bigSrc = $("#bigImage").attr("src"); console.log(bigSrc); var slideCounter = slide.indexOf(bigSrc); console.log(slideCounter) if (slideCounter <= 0){ slideCounter = slide.length; } $("#bigImage").attr("src", slide[--slideCounter]); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-12 biimdi"> <button class="galimaslilef"><span class="fa fa-arrow-left"></span></button> <img class="img-fluid" id="bigImage" align="center" src="kids.jpg" width="50%" height="50%" alt="big screen" /> <button class="galimaslirig"><span class="fa fa-arrow-right"></span></button> </div> <div class="col-12" id= "imageGallery" align="right"> <img class="gallery" src="./kids.jpg" width="200px" height="200px" alt="kids" /> <img class="gallery" src="./family.jpg" width="200px" height="200px" alt="family" /> <img class="gallery" src="./stance.jpg" width="200px" height="200px" alt="stance" /> <img class="gallery" src="./friends.png" width="200px" height="200px" alt="friends" /> <img class="gallery" src="./woman.jpg" width="200px" height="200px" alt="woman" /> <img class="gallery" src="./jump.jpg" width="200px" height="200px" alt="jump" /> <img class="gallery" src="./man.jpg" width="200px" height="200px" alt="man" /> <img class="gallery" src="./grind.jpg" width="200px" height="200px" alt="grind" /> </div>

I am guessing this is some kind of asynchronous issue in which I am not very good at. As you can see when I console log bigSrc it logs the right src but after assigning its index to slideCounter and console log it the result is always -1 in which I am guessing means undefined. What is happening here?

Answer 1

The previous next issue arises because of this - var bigSrc = $("#bigImage").attr("src"); This returns just the image name like kids.jpg. Where as your array stores images with slide.push(this.src);- this gives full path. So it always returns -1. You can modify the function a little like this.

        $( document ).ready(function (){
            var slide = [];
            $(".gallery").each(function(){
                console.log(this.src);
                slide.push(this.src);
            });
            var bigImg =  document.getElementById('bigImage'); // big image id
            console.log(slide);
            $(".galimaslirig").click(function(){                    
                var bigSrc = bigImg.src; // big image source - full path
                console.log(bigSrc);
                var slideCounter = slide.indexOf(bigSrc);
                console.log(slideCounter)
                if (slideCounter >= slide.length - 1){
                    slideCounter = -1;
                } 
                $("#bigImage").attr("src", slide[++slideCounter]);
            });
            $(".galimaslilef").click(function(){
                var bigSrc = bigImg.src; // big image source - full path
                console.log(bigSrc);
                var slideCounter = slide.indexOf(bigSrc);
                console.log(slideCounter)
                if (slideCounter <= 0){
                    slideCounter = slide.length;
                } 
                $("#bigImage").attr("src", slide[--slideCounter]);
            });
    });

Answer 2

While T.Shah found the problem, the solution was not working "bigSrc" was logging undefined instead of -1 that I had. After doing a little research I used "$(this).attr('src').slice(2,)" in the each function to push it to the array. and then use the same slice method in the thumbnail click function. Here is the working code:

// the click function
$(".gallery").click(function() {
            $("#bigImage").attr("src", $(this).attr('src').slice(2,));
        });
//image slider
        $( document ).ready(function (){
            var slide = [];
            $(".gallery").each(function(){
                slide.push($(this).attr('src').slice(2,));
            });
            console.log(slide);
            $(".galimaslirig").click(function(){

                var bigSrc = $("#bigImage").attr("src");
                console.log(bigSrc);
                var slideCounter = slide.indexOf(bigSrc);
                console.log(slideCounter)
                if (slideCounter >= slide.length - 1){
                    slideCounter = -1;
                } 
                $("#bigImage").attr("src", slide[++slideCounter]);
            });
            $(".galimaslilef").click(function(){

                var bigSrc = $("#bigImage").attr("src");
                console.log(bigSrc);
                var slideCounter = slide.indexOf(bigSrc);
                console.log(slideCounter)
                if (slideCounter <= 0){
                    slideCounter = slide.length;
                } 
                $("#bigImage").attr("src", slide[--slideCounter]);
            });
       })