Изменение расширения изображения с помощью jquery?

Question

[Frank_Sidebottom]

Добрый день. Такой вопрос, можно ли как-то изменить раcширение изображения с помощью jquery?
Например в этой строчке, по клику, расширение изображения в src c "gif" поменять на "jpg"

Answer 1

[Alexander]

Хотел пошутить, что для этой задачи лучше выучить Хаскелл...но ладно.

$('.data-img').on('click', function() {
  this.src = this.src.replace('.gif', '.jpg')
})

Или чуть надежней с регуляркой

$('.data-img').on('click', function() {
  this.src = this.src.replace(/\.gif$/i, '.jpg')
})

Comments

[Frank_Sidebottom]

хорошее решение. спасибо. но маленький нюанс. делаю вот так. в водпрессе загружаю гифку через визуальный редактор. 1) при загрузке страницы гифка делается статичной(jpg). 2) потом при нажатии на неё она активируется(gif). 3) при повторном нажатии нужно опять её статичной сделать(jpg) но это не работает.

1       $("[src$='.gif']").each(function() {
  		this.src = this.src.replace(/\.gif$/i, '.jpg')
	});

2	$("[src$='.jpg']").on('click', function() {
  		this.src = this.src.replace(/\.jpg$/i, '.gif')
	});

3	$("[src$='.gif']").on('click', function() {
  		this.src = this.src.replace(/\.gif$/i, '.jpg')
	})

[Alexander]

Frank_Sidebottom: странное решение. Предлагаю вам посмотреть в сторону следующих вещей:

1) Как загрузить в WP пост гифку (если коротко - вставить full-size изображение)
2) libgif-js - библиотека для управления gif-изображениями (автоплей, старт-стоп и прочее).

[Frank_Sidebottom]

Alexander: да странное. спасибо за ссылки, почитаю. и всё же не скажете почему не работает такой код? очень интересно в чём ошибка.

1       $("[src$='.gif']").each(function() {
  		this.src = this.src.replace(/\.gif$/i, '.jpg')
  });

2	$("[src$='.jpg']").on('click', function() {
  		this.src = this.src.replace(/\.jpg$/i, '.gif')
  });

3	$("[src$='.gif']").on('click', function() {
  		this.src = this.src.replace(/\.gif$/i, '.jpg')
  })

Судя по всему игнорируется, то что изображение уже не jpg , а gif и по клику срабатывает вторая функция, а не 3

[Alexander]

Frank_Sidebottom: не скажу точно, возможно потому что на .gif несколько одинаковых селекторов.

Я бы сделал проще, вынес весь переключатель в функцию:

function togglePic(el) {
	var src = $(el).attr("src");
     if (src.indexOf(".jpg") > -1) {
         src = src.replace('.jpg','.gif' );
     } else {
         src = src.replace('.gif','.jpg' );
     }
     $(el).attr('src', src);
}

$('.data-img').on('click', function() {
	togglePic(this)
})

https://jsfiddle.net/rsLabszd/1/

[Frank_Sidebottom]

Alexander: Саша, Вы гений! Спасибо вам большое!