Question

I am trying to build a thumbnail slider(not sure it is the name) exactly like this, but I am stuck since I am not really good at jquery animation API. so far I have this code:
http://jsfiddle.net/bingjie2680/mwxzT/13/, but it is not working expectedly, can somebody please help me with this, or give me some pointers or links to tutorials of how to implement it. I have searched the internet, couldn’t find anything relevant. thanks for reading.

update:
the problem is that when the red box slides, it is not smoothly, and the left side of red box should never moves inside the black box. always align both left and right side with the black box.

Answer 1

Do you like this one? 🙂

MOUSEMOVE GALLERY SLIDER

HTML:

<div id="mmGallery_container">   
    <div id="mmGallery">
        <img src="image1.jpg" style="height:<!--set first image height-->px;"/>
        <img src="image.jpg"/>
        <img src="image.jpg"/>
        <img src="image.jpg"/>
        <img src="image.jpg"/>
    </div>  
</div>

CSS:

/* ***** mmGallery ***** */   
#mmGallery_container{
    position:relative;
    top:30px;
    z-index:0;
    margin:20px auto;
    /*height: 200px; will be handled by jQuery */
    width:560px;   /*  SET WIDTH!  */
    overflow:hidden;
    -moz-box-shadow:     5px 8px 50px #000;
    -webkit-box-shadow: 5px 8px 50px #000;
    box-shadow:         5px 8px 50px #000;
    border:12px solid #000;
    background:#000;
}
#mmGallery{
    cursor:col-resize;
    position:relative;
}
#mmGallery img{
    position:relative;
    float:left;
}

jQuery:

$(function(){
    // roXon mmGallery

    //####### SETUP SPEED ######//
    mmGalSpeed = 20;              // higher number = slower movements
    //##########################//

    var setHeight = $('#mmGallery img:eq(0)').height();
    $('#mmGallery_container').css({ height: setHeight });

});
$(window).load(function(){
    /*________________mmGallery _________________*/

    sumW = 0;   
    imgH = 0;
    imgH = $('#mmGallery img:eq(0)').height(); 
    $('#mmGallery img').css({ height: imgH });    
    $('#mmGallery_container').css({ height: imgH });

    $('#mmGallery img').each(function(){
        sumW += $(this).width();
        $('#mmGallery').width(sumW);
    });    

    wDiff1 = $('#mmGallery_container').outerWidth(true);
    wDiff2 = $('#mmGallery').width();
    wDiff = (wDiff2/wDiff1)-1;  
    mouseX = 0;
    $("#mmGallery_container").mousemove(function(e) {
    mouseX = (e.pageX - this.offsetLeft);      
    });

    var xSlider = $("#mmGallery");
    var posXdec = 0;
    setInterval(function(){     
        posXdec += (mouseX - posXdec) / mmGalSpeed;
        posX = posXdec;

        xSlider.css({marginLeft:  '-'+ (posX * wDiff) +'px' }); // instead 'marginLeft' use 'left' for absolute pos. #mmGallery
    }, 10);

});