jquery - 使用 jQuery 在翻转时显示完整版本的缩略图？

Question

当我指定我希望它显示的尺寸时，WordPress 会创建一个缩小尺寸的新图像，所以当我选择 300 x 230 时，它会生成这个文件作为图像源：

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

从这个全尺寸版本：

http://example.com/myphoto.jpg

我正在使用插件在翻转时扩展 300x230。展开后的视图是 300x230 放大的，很模糊。有没有办法在翻转时显示全尺寸版本，所以默认情况下它是 myphoto-300x230.jpg 但翻转时是 myphoto.jpg？我需要正则表达式文件名以摆脱尺寸的数字吗？

Answer 1

除了正则表达式，您可以将原始图像的路径存储在图像标签的另一个属性中，例如 fullsize：

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

然后只需在悬停函数中获取此属性的值。

Answer 2

你可以使用正则表达式来做到这一点。这是一个正则表达式：

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

获取组“文件”，然后适当地修改它，然后将“url”中的文本添加到它以获得正确的 url :)

Answer 3

一个正则表达式看起来像：
s/-\d+x\d+././

假设您的img元素具有 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);

参见，例如：http: //jsfiddle.net/entropo/pyww7/

为避免尴尬的过渡，您需要确保预加载全尺寸图像。