Использовать srcset для изменения ссылок на изображения вместо самих изображений?

Question

Я хочу, чтобы у меня была статичная миниатюра в 100px (это будет 100px для всех размеров экрана), щелкнув по которой будет показана увеличенная версия (в зависимости от размера экрана) того же изображения. Таким образом, миниатюра по сути будет действовать как ссылка на srcset вариации. Это возможно?

<a href="/">
  <img src="thumb.jpg">
</a>


<img src="default.jpg" class="thumbnail" srcset="small.jpg 600w, medium.jpg 1000w large.jpg 2000w">

Answer 1

Вы можете добавить прослушиватель событий JavaScript, который прослушивает щелчок по изображению.

Когда изображение щелкнуло, вы можете добавить srcset приписывать.

Браузер сделает все остальное.

Пример:

var thumbnail = document.getElementsByClassName('thumbnail')[0];
var srcsetAttribute = document.createAttribute('srcset');
var srcsetValue = 'http://placehold.it/200x100 600w, http://placehold.it/300x100 1000w, http://placehold.it/600x100 2000w';
srcsetAttribute.value = srcsetValue;

function addSrcset() {
this.setAttributeNode(srcsetAttribute);
}

thumbnail.addEventListener('click',addSrcset,false);

<img class="thumbnail" src="http://placehold.it/100x100" alt="Thumbnail - Click Me" />