jquery changing src attribute end

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

whathaveyoutried.com? javascript determine end of string -1 as I don't think the question shows any research effort. — Nope
– Nope, Commented Dec 20, 2012 at 16:58

jAndy · Accepted Answer · 2012-12-20 17:04:52Z

3

We could grab the last three or four characters from the images src string and compare it.

$('img.img-toggle').click(function() {
    var ending = this.src.slice( -3 );

    switch( ending ) {
       case 'jpg': 
           this.src = this.src.replace( /jpg$/, 'gif' );
           break;
       case 'gif': 
           this.src = this.src.replace( /gif$/, 'jpg' );
           break;
    }
});

I used a switch/case just in case there might be further formats in the future.

Another option is to use jQuerys .toggle() method in a way like

$('img.img-toggle').toggle(function() {
    this.src = this.src.replace( /jpg$/, 'gif' );
}, function() {
    this.src = this.src.replace( /gif$/, 'jpg' );
});

.toggle() will automatically switch between the two functions you need to provide.

edited Dec 20, 2012 at 17:04

answered Dec 20, 2012 at 16:58

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blazemonger Over a year ago

I would search for /jpe?g$/ instead, just in case.

Rory McCrossan · Accepted Answer · 2012-12-20 16:58:37Z

2

Try this:

$('img.img-toggle').click(function() {
    var $img = $(this);
    var src = $img.prop('src');
    if (src.match(/\.jpg$/)) {
        $img.prop('src', src.replace(/\.jpg$/, '.gif'));
    } else {
        $img.prop('src', src.replace(/\.gif$/, '.jpg'));
    }
});

Example fiddle

answered Dec 20, 2012 at 16:58

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

Bruno · Accepted Answer · 2012-12-20 17:30:13Z

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

edited Dec 20, 2012 at 17:30

answered Dec 20, 2012 at 17:04

Bruno

5,8222 gold badges29 silver badges44 bronze badges

1 Comment

kevin11189 Over a year ago

Yeah, this on is a bit better. I didn't realize at first that the last one didn't toggle all images. I made it toggle all but they would all come back with the same source.

Reinstate Monica Cellio · Accepted Answer · 2012-12-20 16:57:56Z

1

One way would be to do something like this...

$('img.img-toggle').click(function() {
    var src = $(this).attr("src");
    if (src.indexOf(".jpg") != -1) //If the image ends in .jpg
    {
        src = src.replace(".jpg", ".gif");
    } else {
        src = src.replace(".gif", ".jpg");
    }
    $(this).attr("src", src);
});

answered Dec 20, 2012 at 16:57

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

5 Comments

Robin van Baalen Over a year ago

That ain't working for <img src="/images/test.jpg.gif" /> and <img src="/images/test.gif.jpg" />

Reinstate Monica Cellio Over a year ago

Yep, like most of the suggestions on this page. Everyone's assuming sensible image names.

kevin11189 Over a year ago

This was perfect. The only thing I changed was $(this) to $('img.img-toggle') so it affected all of the images on the page. That was more of a personal preference thing though. Thank you very much.

jAndy Over a year ago

src.indexOf('anything') will completely ignore where in the source string a match is found. Also, you shouldn't recall the jQuery constructor just to get and set the src attribute.

Reinstate Monica Cellio Over a year ago

Like I said above, it's assuming sensible image names. If someone wants to call an image myimage.jpg.gif then they're obviously not going to like this solution. There's only 1 answer on this page (as of writing) that covers this eventuality, and that's @jAndy's answer. No-one else's does.

Bruno · Accepted Answer · 2018-05-10 05:07:35Z

1

In case there are a lot of img.img-toggle elements in the page, you better use event delegation, than event listening on each single element.

With event delegation you register a single event listener on a shared parent; this is usually sensibily better than registering a ton of different listeners.

jQuery supports event delegation.

$("#a_common_ancestor").on("click", "img.img-toogle", handler);

With this in mind let's now write the login inside the handler function.

function handler () {
  // `this` refers to the element that was clicked;
  // it is an image, so it has an `src` attribute.
  this.src = this.src.replace(/\.(jpg|gif)$/, function (_, capture1) {
    return capture1 === "jpg"
      ? ".gif"
      : ".jpg";
  });
}

edited May 10, 2018 at 5:07

answered Dec 20, 2012 at 16:58

Bruno

6,0006 gold badges36 silver badges54 bronze badges

Comments

Samsquanch · Accepted Answer · 2012-12-20 17:01:10Z

0

$('img.img-toggle').click(function() {
    src = $(this).attr('src');
    if (src.substr(src.length - 4) == ".jpg") //If the image ends in .jpg
    {
        src = src.replace(".jpg", ".gif");
    } else {
        src = src.replace(".gif", ".jpg");
    }
});

answered Dec 20, 2012 at 17:01

Samsquanch

9,17612 gold badges55 silver badges90 bronze badges

Collectives™ on Stack Overflow

jquery changing src attribute end

6 Answers 6

1 Comment

Comments

1 Comment

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related