0

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!

TikaL13
  • 1,478
  • 8
  • 24
  • 50
  • Do you want to add a 't' to all image paths on the current page ? – sjobe Dec 22 '09 at 22:53
  • Yeah... thats what our naming convention is. The question I now have is can we also add links to the large image being displayed to take us to the page that the image is describing. – TikaL13 Dec 24 '09 at 17:34

4 Answers4

2

Hey, this is answered here jQuery Cycle Plugin - Dictate locaton of thumbnails

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.

Community
  • 1
  • 1
sparkey0
  • 1,641
  • 1
  • 12
  • 14
  • Okay I promise this is the last question. I would like the to add a link to each and every large image that gets displayed during the cycle. – TikaL13 Dec 23 '09 at 03:08
1

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')})
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
0
$("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.

brettkelly
  • 27,655
  • 8
  • 56
  • 72
0
$("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).

Annabelle
  • 10,596
  • 5
  • 27
  • 26