Forums

cpyle0819

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]);
			
		}
	}
});
});

TheDoc

I don't see a gear on the website! Wrong URL?

jamy_za

$('#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?

cpyle0819

Apologies for the link. It's fixed. Thanks jamy_za, I'll try that. The .rotate() is from jQueryRotate. Pretty cool.

cpyle0819

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..

jamy_za

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.

treehouse : what would you like to learn today?

Forums

[Solved] Changing Img src not working.