показать полную версию миниатюры на ролловере с помощью 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

Вы можете использовать Regex для этого. Вот регулярное выражение для этого:

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

возьмите группу "file" и затем измените ее, а затем добавьте к ней текст из "url", чтобы получить правильный URL:)

Answer 2

Регулярное выражение для этого будет выглядеть примерно так:
s/-\d+x\d+././

Предполагая, что ваш img элемент имеет идентификатор 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/

Чтобы избежать неловких переходов, необходимо убедиться, что полноразмерное изображение предварительно загружено.

Answer 3

Вместо регулярного выражения вы можете сохранить путь к исходному изображению в другом атрибуте тега изображения, таком как fullsize:

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

Тогда просто получите значение этого атрибута в вашей функции наведения.