1

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?

nathanbweb
  • 717
  • 1
  • 11
  • 26

3 Answers3

1

Rather than regex you could store the path to the original image in another attribute of the image tag such as fullsize:

<img src="http://example.com/myphoto-300x230.jpg" fullsize="http://example.com/myphoto.jpg" />

Then just get the value of this attribute in your hover function.

Alex
  • 7,320
  • 1
  • 18
  • 31
  • 2
    Of course, using an attribute not in the standard will prevent your HTML from validating. Some people care more than others about that, but keep it in mind. – eaj Apr 12 '11 at 15:17
  • That's a fair point, well made. I guess you could add the src to one of the attributes that is "valid", such as alt, or title (bleurgh!), or even longdesc. But, what with the advent of HTML5 on the horizon custom attributes are the future ;-) – Alex Apr 12 '11 at 15:21
  • 1
    Or another solution would be to hide a `span` as a sibling of the image and have its HTML be the URL. That way we aren't messing with attributes and we can still easily get to it – joe_coolish Apr 12 '11 at 15:56
1

You could use Regex to do that. Here is a Regex to do that:

(?<url>(?:http|ftp|https):\/\/[\w\-_]+(?:\.[\w\-_]+)+(?:[\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?\/)(?<file>\w+-[0-9]+x[0-9]+\.\w+)

take the group "file" and then modify that approriately, then add the text from "url" to it to get the proper url :)

joe_coolish
  • 7,201
  • 13
  • 64
  • 111
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.

entropo
  • 2,481
  • 15
  • 15
  • how can I ensure the full-size is preloaded? – nathanbweb Apr 12 '11 at 17:32
  • and is there a way to restore the original url on mouseout? – nathanbweb Apr 12 '11 at 17:33
  • Check out [.hover()](http://api.jquery.com/hover/#hover1). Basically you want to save the old url and re-apply it when the mouseout handler fires. – entropo Apr 12 '11 at 17:36
  • [Image preload with jQuery](http://stackoverflow.com/questions/476679/preloading-images-with-jquery) – entropo Apr 12 '11 at 17:37
  • Also, for large images it helps to do the load asynchronously in order to avoid holding up page display (especially for large images which not everyone will be displaying). Here's a helper plugin: [JAIL (jQuery Asynchronous Image Loader)](http://www.sebastianoarmelibattana.com/projects/jail) – entropo Apr 12 '11 at 17:47