jQuery background image slide

Hi all, I’m new to jQuery, and this is my first project that is not ‘out of a book’.

So I’m trying to make a panoramic image slider thing. And am trying to stop users from being able to slide any further than the width of the background image by hiding the ‘goLeft’ div when the background position is more than -500. Anyway, I set it up so that when the goLeft div is clicked the position moves 250px, also set up a var which I wanted to de-increment by 250px each time goLeft is clicked- turns out it’s not as simple as that!

Hope that makes sense! Here’s what I’m on about http://www.geoffmuskett.co.uk/index1.html
Basically I want the goLeft (the one on the left) div to disappear when the end of the image is on the right. God, I’m confusing myself!

So I guess I need to set up some kind of counter for each time goLeft is clicked? Or is there a better way to do this?

Any help is appreciated!

here’s the html

<div id="panorama2">  
    <div id="goLeft"></div><!-- close goLeft -->
    <div id="goRight"></div><!-- close goRight -->   
</div><!-- close panorama -->

Here’s the css

#panorama2 {
    background-image:url(a/images/whipserderry2.jpg); /* 1000 x 254 */
    background-repeat:no-repeat;
    background-position:left;
    width:500px;
    height:254px;
    border:1px solid black;
    position:absolute;
    top:400px;
    left:50%;
    margin-left:-250px;
}

#goLeft {
    float:left;
    display:inline;
    width:30px;
    height:100%;
    background-color:#000;
}

#goRight {
    float:right;
    display:inline;
    width:30px;
    height:100%;
    background-color:#000;
}

And here’s the jQuery

//set movement increments
var backgroundPos = 250;
var backgroundPos = backgroundPos + 'px';

//current background position
var backgroundPosNow = 0;


if (backgroundPosNow == 0) {
    $('#goRight').hide();    
}
if (backgroundPosNow > 500) {
    $('#goLeft').hide();    
}

//go left
$('#goLeft').click(function() {
    //show go right because the background will definately be away from the edge
    $('#goRight').fadeIn();
    //take backgroundPos value off of current background-position
    $('#panorama2').animate({backgroundPosition: '-=' + backgroundPos},2000);
    // take 200 off backgroundPosNew each time goLeft is clicked
    var backgroundPosNowUpdate = parseInt(backgroundPosNow) -250;
});
//go right
$('#goRight').click(function() {
    $('#panorama2').animate({backgroundPosition: '+=' + backgroundPos},2000);
});

Thanks ScallioXTX

.animate has a third parameter which you can supply a function what that will be executed when the animation has run – a so called callback function.

So, in $(“goRight”).click() add a callback function to the .animate() that hides the goRight button and do the same for goLeft :slight_smile: