CODEWITHSUNDEEP
javascriptjqueryhtml
Friso Tiesema
Friso Tiesema

Reputation: 23

Change the Position of an Image in JavaScript

I hope that's the correct description of this problem. If not, please forgive me, I'm new here and new to JavaScript..

I am creating a turntable animation of a chair using a jQuery plugin called Spritespin. I have it setup so it loads a long strip of sprites of the chair rotating around its axis.

The Spritespin website shows what parameters of an object notation I can change to get the thing to work. This is what it looks like:

// initialize the spritespin
$(".spritespin").spritespin({
    width       : 640,
    height      : 640,
    frames      : 24,
    resolutionX : 15360,
    resolutionY : 640,
    image       : "turntable/images/LC-01_strip_black.jpg",
    (some more code..)
});

As you can see, all I have to do is create a strip of (in my case) 24 images of 640 x 640 and link to it.

The problem is that I would like to add some functionality. I'd like to have a set of colour swatches to the side of the rotating chair that alow the user to pick a different colour.

My idea is to put all 7 sprite strips into one huge image (15360 x 4480) and shift its y position based on which swatch is clicked. But I have no idea how to write that code or if it's even the smartest way to go about it.

This is how my swatches are setup right now:

<div id="colourSwatches">
    <a href="" id="swatch01"><div id="swatchBlack"></div></a>
    <a href="" id="swatch02"><div id="swatchBlue"></div></a>
    <a href="" id="swatch03"><div id="swatchBrown"></div></a>
    <a href="" id="swatch04"><div id="swatchPink"></div></a>
    <a href="" id="swatch05"><div id="swatchRed"></div></a>
    <a href="" id="swatch06"><div id="swatchTurquoise"></div></a>
    <a href="" id="swatch07"><div id="swatchYellow"></div></a>
</div>

I hope that wasn't too convoluted and that someone can help me.

Upvotes: 2

Views: 697

Answers (1)

Matt R
Matt R

Reputation: 2627

I looked over the spritespin.js file and didn't see any function to change either offsetX/Y or the image it was using. However it seems you can call the spritespin function on the div again with changes eg:

$('a').click(function() { 
    var swatch = $(this).attr('id');
    if(swatch == "black") {
     $(".spritespin").spritespin({
       width       : 640,
       height      : 640,
       frames      : 24,
       resolutionX : 15360,
       resolutionY : 640,
       image       : "turntable/images/LC-01_strip_black.jpg",
       (some more code..)
     });
    } 
});

There are obviously different ways you can proceed to change the image : option like setting it to a variable which goes through the if statements (cutting down on the size of the file), using the variable in something like 

image : "turntable/images/LC-01_strip_" + swatch + ".jpg"

or reading the filenames using AJAX or JSON. I unfortunately do not know how this affects the DOM or if clicking the link 1 million times will break the browser.

Upvotes: 1

Related Questions