Creating a sliding image gallery that does not glitch on image change

Question

I have created a sliding image gallery and when the button is pushed it slides the picture across and updates the image attribute for the relevant sections. However this works perfectly like 50% of the time. The other times there is a second glitch and the images then go in place as expected. I have attached the javascript methods for the animate method and the array change method. I have looked elsewhere and cannot see anyone else with a similar issue or where I am going wrong, especially when it doesn't happen often.

imageGallery.leftSelect.onclick = function () {
    window.setTimeout(imageGallery.rightClick, 250);
    imageGallery.animateImages('.image1', '.imageRight');
    imageGallery.animateImages('.imageRight', '.imageNoneRight');
    imageGallery.animateImages('.imageLeft', '.image1');
    imageGallery.animateImages('.imageNoneLeft', '.imageLeft');
};

---

animateImages: function (classFrom, classTo) {
    var classMoving = $(classFrom);
    var classGoingTo = $(classTo);

    classMoving.animate({
        top: classGoingTo.css('top'),
        left: classGoingTo.css('left'),
        width: classGoingTo.css('width'),
        opacity: classGoingTo.css('opacity'),
    }, 258, function () {
        console.log('Animated');
        classMoving.css({"width":'', "opacity":'', "top":'', "left":'', });
    });
},

rightClick: function () {
    imageGallery.imagesDisplay.push(imageGallery.imagesDisplay.shift());

    imageGallery.imageNoneLeft.setAttribute('src', imageGallery.imagesDisplay[2]);
    imageGallery.imageLeft.setAttribute('src', imageGallery.imagesDisplay[1]);
    imageGallery.imageMain.setAttribute('src', imageGallery.imagesDisplay[0]);
    imageGallery.imageRight.setAttribute('src', imageGallery.imagesDisplay[10]);
    imageGallery.imageNoneRight.setAttribute('src', imageGallery.imagesDisplay[9]);

},

Can someone assist, I really need this to work?

If there is anything not clear or you need more code let me know.

Thanks,

Answer 1

First things first, the culprit was the setAttribute of all images i.e. whatever you were doing inside the rightClick and leftClick functions were the reasons why you were seeing a glitch. Changing src of an img tag produces the glitch.

But then we cannot simply remove it because your approach relies heavily on this swapping of images.

I had to breakdown and really understand your approach first. The way it worked was that you would animate, for example, image1 (the centered one) to move to the position of imageLeft upon click on the rightCarousel button. On that same click, you had a setTimeout of almost the duration of the animation to call rightClick function. This rightClick function then swaps the images so that image1 can always remain at the center and only images can come and go after animation. This was the problem.

What I had to change was that all image tags i.e. imageNoneLeft, imageLeft, image1, imageRight & imageNoneRight would change each others classes such that their position remains changed after animations.

Also, I had to add another animateImages line inside your leftSelect and rightSelect callbacks to animate the furthest images i.e. imageNoneLeft & imageNoneRight to animate to each other's positions with respect to the click of the buttons.

Take a look at this jsFiddle. It will help you understand a lot better. And let me know if you have any questions.

JavaScript:

var imageGallery={
    prefix:'https://dl.dropboxusercontent.com/u/45891870/Experiments/StackOverflow/1.5/',
    imagesDisplay:['JS.jpg','PIXI.jpg','GSAP.jpg','JS.jpg','PIXI.jpg','GSAP.jpg','JS.jpg','PIXI.jpg','GSAP.jpg','JS.jpg','PIXI.jpg'],
    rightSelect:document.querySelector('.rightCarousel'),
    leftSelect:document.querySelector('.leftCarousel'),
    imageMain:document.querySelector('.image1'),
    imageLeft:document.querySelector('.imageLeft'),
    imageRight:document.querySelector('.imageRight'),
    imageNoneLeft:document.querySelector('.imageNoneLeft'),
    imageNoneRight:document.querySelector('.imageNoneRight'),
    init:function(){
        imageGallery.imagesDisplay.push(imageGallery.imagesDisplay.shift());
        imageGallery.imageNoneLeft.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[2]);
        imageGallery.imageLeft.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[1]);
        imageGallery.imageMain.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[0]);
        imageGallery.imageRight.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[10]);
        imageGallery.imageNoneRight.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[9]);
    },
    animateImages:function(classFrom,classTo){
        var classMoving=$(classFrom);
        var classGoingTo=$(classTo);
        classMoving.animate({
            top:classGoingTo.css('top'),
            left:classGoingTo.css('left'),
            width:classGoingTo.css('width'),
            opacity:classGoingTo.css('opacity')
        },258,function(){
            $(this).removeClass(classFrom.substr(1));
            $(this).addClass(classTo.substr(1));
            $(this).removeAttr('style');
        });
    }
};
imageGallery.init();
imageGallery.leftSelect.onclick=function(){
    imageGallery.animateImages('.imageNoneRight','.imageNoneLeft');
    imageGallery.animateImages('.imageRight','.imageNoneRight');
    imageGallery.animateImages('.image1','.imageRight');
    imageGallery.animateImages('.imageLeft','.image1');
    imageGallery.animateImages('.imageNoneLeft','.imageLeft');
};
imageGallery.rightSelect.onclick=function(){
    imageGallery.animateImages('.imageNoneLeft','.imageNoneRight');
    imageGallery.animateImages('.imageLeft','.imageNoneLeft');
    imageGallery.animateImages('.image1','.imageLeft');
    imageGallery.animateImages('.imageRight','.image1');
    imageGallery.animateImages('.imageNoneRight','.imageRight');
};