Question

With the following code I am loading in images into a thumbnail pager for a jquery slider on WordPress. This works fine but the problem is that its using the huge images and resizing them down to the small size. This is making my page load slow. So Ive created a custom image size in the functions. This creates a new small image called slide-181×86.jpg . My question is how do I modify that last line of jquery to add the -181×86 at the end of the url and not at the end of the jpg? I keep getting slide.jpg-181×86 which obviously isnt right.

Ive been killing myself on this, any help would be greatly appreciated.

<script type="text/javascript">
jQuery(function() {
jQuery('.homeslider').cycle({
    speed:  'fast',
    timeout: 7000,
    fx: 'fade',
  slideResize: false,
containerResize: false,
fit:1,
    pager:  '#slitemshome',
    pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="'
    + jQuery(slide).find('img').attr('src')
    + '" width="181" height="86" /></a></li>'; 
}
});
});
</script>

edit:

I just tried to do this after the function

jQuery('#slitemshome img').attr('src', function(){this.src.replace('.jpg', '-181x86.jpg')})

and that doesnt appear to do anything to the url. Ugh

Answer 1

This should work:

$('img').each(function() {
    $(this).attr('src', $(this).attr('src').replace(/\.jpg/, '-181x86.jpg'));
});

http://jsfiddle.net/charlescarver/3hLH4/

---

Originally I was going to find all img variables, strip off the .jpg ending, and then append -181x86.jpg to the end of it, but then I thought, why not just replace the .jpg with the -181x86.jpg instead?

_{P.S. The JSFiddle image won’t work as there is no placeholder image with the -181x86.jpg appended to the end.}