Insert "t" into an images path using JQuery

Question

What I would like to do is insert a "t" into the path of the image like so:

<img src="../images/elements/slideshow/1t.jpg"  width="378" height="210" />

A little look at my script:

var thumb_prefix = "t";
    return '<li><a href="#"><img src="' + slide.src + thumb_prefix + '" width="121" height="67" /></a></li>';

This is just adding a "t" to the end of the path.

Any help would do thank you!

Answer 1

$("img").each(
    function(){
        p = $(this).attr('src');
        newp = p.replace('.jpg','t.jpg');
        $(this).attr('src',newp);
    }
);

That code will turn this:

<img src="../images/elements/slideshow/1.jpg"  width="378" height="210" />

Into this:

<img src="../images/elements/slideshow/1t.jpg"  width="378" height="210" />

Edit: Obviously, that selector will make the change to every single image in the document, so you will probably want to change it to only change the images you want changed.

Answer 2

Hey, this is answered here http://stackoverflow.com/questions/1948903/jquery-cycle-plugin-dictate-locaton-of-thumbnails/1948982

Basically as follows -- slide.src is your old source, and new_src is the resulting new source for the image.

// Split off the filename with no extension (period + 3 letter extension)
var new_src = slide.src.substring(0,slide.src.length-4);

// Add the "t"
new_src += "t";

// Add the period and the 3 letter extension back on
new_src += slide.src.substring(slide.src.length-4,slide.src.length);

return '<li><a href="#"><img src="' + new_src + '" width="121" height="67" /></a></li>';

Additionally, don't forget to change width / height values above to whatever the new values should be.

Answer 3

Not quite sure what’s going on in your script, but if all your images’ file names end in .jpg, then you can use the JavaScript replace function, like this:

$('img').attr('src', function(){this.src.replace('.jpg', 't.jpg')})

Answer 4

$("img").each(function() {
  var img = $(this);
  img.attr('src', img.attr('src').replace(/(\.[^\.]*$|$)/, thumb_prefix + '$&'));
}

This will add the value of thumb_prefix to the filename portion of the src attribute of each img.

It should work with any file extension (or even files with no extension).