I had a very helpful answer last week on how to build this script, which works great except one small problem. It's easiest to explain with visual aid http://avalon.eaw.com/#finishes
this uses the backgroundPosition property to animate the color changes. the only problem is that the "horn" options are hard-coded such that if you are currently viewing a speaker that has white cab with a colored horn and want to change the cabinet to black, it changes the horn to black as well. there is no way currently to view a black cab with colored horn.
to fix it i need to make a conditional statement but am not sure how to make it work. something like
function colorChange() {
// Use xposition and yposition which are changed by JS function above
$("#target").css('background-position', xposition+'px '+yposition+'px');
if$("#target").css('background-position') == {x:-754}
updatePositions({x:-377});
if$("#target").css('background-position') == {x:-377}
updatePositions({x:-754});
}
////// EDIT /////// a moderator just deleted a follow-up to this problem i posted in order to try and help find an answer. thanks for inhibiting any possible help mr moderator! i am getting increasingly frustrated with this forum. at any rate, i've REposted it below in hopes that someone can help find a solution.
well i have an answer that DIDN'T work, but hopefully it will help someone find one that DOES work. after doing some more reading on jquery shorthand i tried making a separate function just for the cabinet-piano swatch:
function colorChangePiano() {
var bp = $("background-position").css;
$("#target").css("background-position", (bp = {x:-1131}) ? "{x:-377}" : "{x:0}");
}
i know there's something wrong with the syntax itself, but a bigger problem is that it's not roped in to the function that drives the rest of the swatches:
// variable outside of function() scope
var xposition,
yposition;
// Update values of xposition and or yposition
function updatePositions(axes) {
// Check to see which axis was passed in x, y or both, then update values
if (typeof(axes.x) !== 'undefined') xposition = axes.x;
if (typeof(axes.y) !== 'undefined') yposition = axes.y;
//Call function to actually move BG image
colorChange();
}
// Function move BG image, using variables declared above
function colorChange() {
// Use xposition and yposition which are changed by JS function above
$("#target").css('background-position', xposition+'px '+yposition+'px');
}
for the sake of being through, here's a couple examples of the html calls:
<a href="#" onclick="updatePositions({x:-1131})"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a>
<a href="#machine" onclick="updatePositions({y:-999})"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p>
<a href="#" onclick="updatePositions({x:-754})"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a></a>
<a href="#" onclick="updatePositions({x:0})"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a>
this site has to go live tonight and i'm starting to freak out a little bit. does anyone have any insight at all?