- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Changing Img src not working.
Trying to set up a button that rotates a gear and changes an image at the same time. The gear works, part of my script for changing the picture works, but the picture doesn’t change. Here’s the site. If you keep your console open when you click the button you’ll see what I mean by “part of my script” is working.
Here’s the JS,
var imgs = ["datalife.jpg", "sevendoors.jpg", "plush.jpg"];
var imgx = 0;
$("#swapper").src = "images/" + imgs[imgx];
$(document).ready(function(){
$("#spinbutton").rotate({bind:{
click: function(){
var ang = 0;
$("#galgear").rotate({
duration:6000,
angle: ang,
animateTo:ang + 45,
easing: $.easing.easeOutElastic,
});
if(imgx < imgs.length-1 ){
imgx ++;
}
else{
imgx=0;
};
console.log(imgs[imgx]);
}
}
});
});
I don’t see a gear on the website! Wrong URL?
$(‘#swapper’) isn’t the same as document.getElementById(‘swapper’), therefore:
$("#swapper").src = "images/" + imgs[imgx];
That isn’t going to change the src attribute, however, this will:
$("#swapper").attr('src', 'images/' + imgs[imgx]);
Also, everything should be included within the $(document).ready() callback function. Even your vars at the top. I’m not aware of a .rotate() jQuery function, which plugin are you using?
Apologies for the link. It’s fixed. Thanks jamy_za, I’ll try that. The .rotate() is from jQueryRotate. Pretty cool.
Woo it’s working! Now, if I apply some css transitions to those images will the work as normal? I don’t see why not..
Great! Hmmm, I would use modernizr and detect for transform ( eg: transform: rotate(90deg) ) and use the jQuery plugin as a fallback. I’m sure that any browser that doesn’t support the transform property won’t support transitions.