Question

Alright, so I’m trying to have a toggle switch between two images. One an animated gif and the other a jpg. Basically, the client wants a ton of these animated gifs of the functionality of his product, but I want to add a switch to turn it on and off because it gets really busy. So, I was wondering if I had all of the images with a class, could I just set a toggle to change the last three characters of all the images from gif to jpg because all the rest of the src will be different.

This obviously won’t work, but I’m hoping you can follow the logic.

$('img.img-toggle').click(function() {
if () //If the image ends in .jpg
{
     //Somehow strip the attribute of .jpg
     //Somehow append the attribute to add .gif 
} else {
    //Somehow stip the attribute of .gif
    //Somehow append the attribute to add .jpg
}
});​

Any suggestions? Another option would be nice, too if my logic is stupid. I’m kind of new to this. I tried a few different things, but couldn’t manage to figure out.

Thanks in advance,
Kevin

Answer 1

If you want to run this operation for all images here it is.

$('img.img-toggle').click(function() {
    ( ".imgClass" ).each( function( ) {

        var src = $(this).prop( "src" );

        if( /\.jpg$/i.test( src ) ) {
            $(this).prop( "src", src.replace( /\.jpg$/, ".gif" ) );
        } else {
            $(this).prop( "src", src.replace( /\.gif$/, ".jpg" ) );
        }
    });
});