Change background position with click from a button

Question

Ok so im making a slot machine look alike - for this i need to make a sprite of 5 picture lets say 500 height then and 100 width (each image is 100x100). I need it so that i have a button on top of the image and one in the button og the image - so i can go to next picture with the buttom button (new position on the sprite) or previous with the top button.

I hope someone can help me since i have been searching for something i can use all day. Im sure its very simple for some of you guys.

thx

Answer 1

I believe you have all the pieces, you just need to put them together, so lets break this apart.

If you keep track of what image is currently being shown, and you know the height of each image, it is quite easy to calculate the proper background position. Let's say we call your tracking-variable i. Notice that i have to be zero-based for this to work. We assume the height of each image is 100px. We also multiply by -1 to get the negative value that you need.

var position = "0 " + (i * 100 * -1) + "px"; // Will be something like "0 -100px"

You can change the background-position using jQuery's .css() something like this:

$("#your-image-container-id").css("backgroundPosition", position);

You can add a click event-listener for your buttons with jQuery's .click().

$("#your-button").click(function () {
    /* 
    Do your rotation magic here
    For the next button increase i by one and apply the new position
    For the prev button you decrease i by one instead...
    */
});

With those pieces, I believe you should be able to assemble the code you need. If you get stuck at some place, feel free to ask.

Update:

I have assembled some of the pieces for you:

$(function () {    
    var i = 0,
        numberOfImages = 5;

    // Handle click on next button
    $(".next-btn").click(function () {
        // Increase by one, and restart when we reach the last image
        i = ((i + 1) < numberOfImages) ? i + 1 : 0;
        var position = calculateBackgroundPosition(i);
        $(".image-container").css("backgroundPosition", position);
    });
});

function calculateBackgroundPosition(index)
{
    return "0 " + (index * 100 * -1) + "px";
}

It is also available in this fiddle. What remain to be done is to implement the previous-button, but that will be your task. Take a look a how the next-button is implemented and then give it a go!

Update 2:

It seems to be a bit troublesome to animate background-position in Firefox. I found this SO answer that describe an extension to make it work properly in Firefox. Unfortunately Firefox doesn't support background-position-y, and the mentioned extension does not support jQuery's backgroundPosition: "+=50px" syntax. So I had to do a workaround.

It is not as smooth, but if you include the above mentioned extension. You can get it to work with the following code:

$(function () {    
    var i = 0,
        numberOfImages = 5;

    $(".op").click(function () {
        // Decrease by one, and restart when we reach the first image
        i = ((i - 1) >= 0) ? i - 1 : numberOfImages - 1;
        animate(this, i);
    });

    $(".ned").click(function () {
        // Increase by one, and restart when we reach the last image
        i = ((i + 1) < numberOfImages) ? i + 1 : 0;
        animate(this, i);
    });
});

function calculateBackgroundPosition(index)
{
    return "0 " + (index * 50 * -1) + "px";
}

function animate (that, i)
{
    var position = calculateBackgroundPosition(i);
    $(that).parent().find(".hjul").animate({"backgroundPosition": position});    
}

Here is a working example as well.

It doesn't behave perfectly when it reaches the last image and should start over, or vice versa, but it is the best I have at the moment.

Update 3:

To make it work with multiple wheels, you need to have a separate counter variable i for each wheel. Otherwise they will affect each other. I updated your code so that the ID hjulwrapper now is a class hjulwrapper instead. An ID have to be unique to a single element. So make sure to update your CSS accordingly. Apart from that, you have to update some of your code to with this:

$(function () {

    $(".hjulwrapper").each(function () {

        var i = 0,
            numberOfImages = 5;

        $(".op", this).click(function () {
            // Decrease by one, and restart when we reach the first image
            i = ((i - 1) >= 0) ? i - 1 : numberOfImages - 1;
            animate(this, i);
        });

        $(".ned", this).click(function () {
           // Increase by one, and restart when we reach the last image
            i = ((i + 1) < numberOfImages) ? i + 1 : 0;
           animate(this, i);
        });
    });
});

Notice that I loop over each hjulwrapper and create an individual spinner for each wheel.

Here is a working fiddle: http://jsfiddle.net/yEhpF/65/