показать полную версию миниатюры при опрокидывании с помощью jQuery?

WordPress создает новое изображение уменьшенного размера, когда я указываю размеры, которые я хочу, чтобы оно отображало, поэтому, когда я выбираю 300 x 230, он создает этот файл в качестве источника изображения:

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

из этой полноразмерной версии:

http://example.com/myphoto.jpg

Я использую плагин для расширения 300 x 230 при наведении курсора. Расширенный вид — это увеличенное изображение размером 300x230, которое размыто. Есть ли способ показать полноразмерную версию при ролловере, чтобы по умолчанию это было myphoto-300x230.jpg, а myphoto.jpg при ролловере? Нужно ли мне регулярно использовать имя файла, чтобы избавиться от чисел для размеров?


wordpress image jquery regex photos
person nathanbweb    schedule 12.04.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Регулярное выражение для этого будет выглядеть примерно так:
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/

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

person entropo    schedule 12.04.2011
comment
как я могу убедиться, что полноразмер предварительно загружен? - person nathanbweb; 12.04.2011
comment
и есть ли способ восстановить исходный URL-адрес при наведении мыши? - person nathanbweb; 12.04.2011
comment
Проверьте .hover(). В основном вы хотите сохранить старый URL-адрес и повторно применить его, когда срабатывает обработчик mouseout. - person entropo; 12.04.2011
comment
Предварительная загрузка изображения с помощью jQuery - person entropo; 12.04.2011
comment
Кроме того, для больших изображений полезно выполнять загрузку асинхронно, чтобы избежать задержки отображения страницы (особенно для больших изображений, которые не все будут отображать). Вот вспомогательный плагин: JAIL (асинхронный загрузчик изображений jQuery) - person entropo; 12.04.2011

arrow_upward
1
arrow_downward

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

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

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

person Alex    schedule 12.04.2011
comment
Конечно, использование атрибута, не входящего в стандарт, предотвратит проверку вашего HTML. Некоторые люди заботятся об этом больше, чем другие, но имейте это в виду. - person eaj; 12.04.2011
comment
Это справедливое замечание, хорошо сделано. Я думаю, вы могли бы добавить src к одному из допустимых атрибутов, например, alt или title (bleurgh!), или даже longdesc. Но с появлением HTML5 на горизонте за пользовательскими атрибутами будущее ;-) - person Alex; 12.04.2011
comment
Или другим решением было бы скрыть span как одноуровневое изображение и сделать его HTML URL-адресом. Таким образом, мы не возимся с атрибутами и можем легко добраться до них. - person joe_coolish; 12.04.2011

arrow_upward
1
arrow_downward

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

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

возьмите группу «файл», а затем измените ее соответствующим образом, затем добавьте к ней текст из «url», чтобы получить правильный URL :)

person joe_coolish    schedule 12.04.2011