Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Changing Img src not working.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #37625
    cpyle0819
    Participant

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

    }
    }
    });
    });
    #101187
    TheDoc
    Member

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

    #101200
    jamygolden
    Member

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

    #101204
    cpyle0819
    Participant

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

    #101205
    cpyle0819
    Participant

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

    #101206
    jamygolden
    Member

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.