show full version of thumbnail on rollover with jQuery?

Question

WordPress creates a new image at a reduced size when I specify the dimensions I want it to display, so when I choose 300 x 230 it produces this file as the image source:

http://example.com/myphoto-300x230.jpg

from this full-size version:

http://example.com/myphoto.jpg

I'm using a plugin to expand the 300x230 on rollover. The expanded view is the 300x230 blown up, which is blurry. Is there a way to show the full-size version on rollover, so that it's myphoto-300x230.jpg by default but myphoto.jpg on rollover? Would I need to regex the filename to get rid of the numbers for the dimensions?

Answer 1

A regex for this would look something like:
s/-\d+x\d+././

Assuming your img element has the ID fixme...

var src = $("#fixme").attr('src');
console.log("old image: " + src);

var newimage = src.replace(/-\d+x\d+./, ".");
console.log("new image: " + newimage);

$("#fixme").attr('src', newimage);

See, e.g.: http://jsfiddle.net/entropo/pyww7/

To avoid awkward transitions, you want to ensure that your full-size image is preloaded.