CODEWITHSUNDEEP
javascriptjquery
user4082764
user4082764

Reputation:

A thumbnail on image for larger picture changing with slider

I have one question about my slider.

I created this DEMO from codepen.

In this demo you can see I have thumbnail images and a large image. When you mouseover the thumb image then the large image changes.

But I want to add an autoplay. My autoplay is working but only on the thumbnail image, not the large image(it does not change). What can I do to fix this?

jQuery(document).ready(function ($) {

function do_slide(){
    interval = setInterval(function(){
      moveRight();
    }, 1000);
  }
  do_slide();
   $('ul li').hover(function(){
       clearInterval(interval);
     });
      $('ul li').mouseleave(function(){
       do_slide();
     });

    var slideCount = $('#gallery ul li').length;
    var slideWidth = $('#gallery ul li').width();
    var slideHeight = $('#gallery ul li').height();
    var sliderUlWidth = slideCount * slideWidth;


    $('#gallery').css({ width: slideWidth, height: slideHeight });

    $('#gallery ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#gallery ul li:last-child').prependTo('#gallery ul');

    function moveLeft() {
        $('#gallery ul').animate({
            left: + slideWidth
        }, 100, function () {
            $('#gallery ul li:last-child').prependTo('#gallery ul');
            $('#gallery ul').css('left', '');
        });
    };

    function moveRight() {
        $('#gallery ul').animate({
            left: - slideWidth
        }, 100, function () {
            $('#gallery ul li:first-child').appendTo('#gallery ul');
            $('#gallery ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});   
$(document).ready(function() {
    $("#gallery li img").hover(function(){
        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
    });
    var imgSwap = [];
     $("#gallery li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

Upvotes: 0

Views: 300

Answers (1)

Gavin Hellyer
Gavin Hellyer

Reputation: 328

If you replace your moveRight function:

function moveRight() {
    $('#gallery ul').animate({
        left: - slideWidth
    }, 100, function () {
        $('#gallery ul li:first-child').appendTo('#gallery ul');
        $('#gallery ul').css('left', '');
    });
};

With: 

function moveRight() {
    $('#gallery ul').animate({
        left: - slideWidth
    }, 100, function () {
        var child = $('#gallery ul li:first-child');
        $('#main-img').attr('src', $('img', child.next()).attr('src').replace('thumb/', ''));
        child.appendTo('#gallery ul');
        $('#gallery ul').css('left', '');
    });
};

That will make your make gallery image move with the thumbnails, if that is what you are looking for?

Upvotes: 1

Related Questions