jQuery addClass example

Change class name on click in jQuery

by ocanal

HTML

<div class="thumb">
<img src="https://img.youtube.com/vi/YR5ApYxkU-U/maxresdefault.jpg" />
</div>
<div class="thumb">
<img src="https://img.youtube.com/vi/xwtdhWltSIg/maxresdefault.jpg" />
</div>
<div class="thumb">
<img src="https://img.youtube.com/vi/6Ejga4kJUts/maxresdefault.jpg" />
</div>
<div class="thumb">
<img src="https://img.youtube.com/vi/tAGnKpE4NCI/maxresdefault.jpg" />
</div>

CSS

.thumb {
  float:left;
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid red;
  background: #000;
}

img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

JavaScript

var $youtubeImages = $('img[src*="img.youtube.com"]');

	$youtubeImages.one("load", function() { 
	   var height = $(this).prop('naturalHeight');
	   var src = $(this).attr('src');
	   if (height <= 90) {
	   		if (/maxresdefault/.test(src)) {
	      		src = src.replace('maxresdefault', 'hqdefault');
	      } else if (/hqdefault/.test(src)) {
	      		src = src.replace('hqdefault', 'mqdefault');
	      } else if (/mqdefault/.test(src)) {
	      		src = src.replace('mqdefault', 'sddefault');
	      }
	      $(this).attr('src', src);
	   }
	}).each(function() {
	  if(this.complete) {
	      $(this).trigger('load');
	  }
	});