fick.js

fick.js

/**
 * Copyright 2014 by Rainer Rillke
 * Makes sure Flickr iframes and images always look great.
 * You may use and re-distribute and modify this file, povided
 * that the above copyright notice and this text will be
 * preserved.
 * This software comes without any warranty.
 * You may also use it under the terms of the JSON license.
 */ 

(function() {
'use strict';

var flick = {
	elements: null,
	getUrlForSize: function(sizes, width, originalUrl) {
		if ('string' === typeof sizes) sizes = JSON.parse(sizes);
		var last = {
			width: 0,
			diff: Infinity,
			url: ''
		};
		$.each(sizes, function(k, v) {
			var n = Number(k);
			var diff = n - width;
			if (diff > 0 && last.diff > diff
				|| (last.diff === Infinity)
				|| (last.diff < 0 && diff > last.diff) 
			) {
				last.width = n;
				last.diff = diff;
				last.url = v;
			}
		});
		return {
			newMaxWidth: last.width,
			newUrl: originalUrl.replace(/[a-f0-9]+_\w(\.\w{1,9})$/, last.url + '$1')
		}
	},
	handleResize: function() {
		if (!flick.elements) {
			flick.elements = $('.rlk-autosize');
		};
		var $elements = flick.elements,
			$fullWidthElements = $elements.filter('.rlk-fullwidth'),
			maxWidth = $('.entry-content').innerWidth();

		$fullWidthElements.each(function() {
			var $elem = $(this),
				w = $elem.attr('width'),
				h = $elem.attr('height'),
				sizes = $elem.data('sizes'),
				wToH = w / h,
				newH = maxWidth / wToH;

			switch ($elem.prop('tagName')) {
				case 'IFRAME':
					$elem
						.attr('width', maxWidth)
						.attr('height', newH)
						.attr('src', $elem.attr('src'));
					break;
				case 'IMG':
					var newValues = flick.getUrlForSize(sizes, maxWidth, $elem.attr('src'));
					$elem
						.attr('width', maxWidth)
						.attr('height', newH)
						.attr('src', newValues.newUrl);
					break;
			}
		});
	}
};

$(function() {
	$(window).resize( flick.handleResize );
	$(window).resize();
});

}());

Usage:

• Replace entry-content with the class of the parent element of the <iframe> or image.
• Add the classes rlk-autosizeand rlk-fullwidth to all images and iframes that should take the full width of their container and preserve their aspect ratio.
• Add a data-sizes attribute to the <img> tag containing a JSON formatted map of sizes to path parts where a path part is the part between the first underscore and the .fileextension.

A usage example would look like this:

<iframe
  class="rlk-autosize rlk-fullwidth"
  src="//www.flickr.com/photos/rillke/14939106903/in/set-72157646495502983/player/"
  width="640" height="271"
  frameborder="0"
  allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen>
</iframe>
<a href="//www.flickr.com/photos/rillke/15282064709" title="Ilhabela by Rainer Rillke, on Flickr">
<img
  class="rlk-autosize rlk-fullwidth"
  src="//farm3.staticflickr.com/2948/15282064709_d93402d639_z.jpg"
  width="640" height="480"
  alt="Ilhabela"
  data-sizes='{"240":"d93402d639_m","320":"d93402d639_n","500":"d93402d639","640":"d93402d639_z","800":"d93402d639_c","1024":"d93402d639_b","1600":"28680b1641_h","2000":"a3523f02e3_o"}'>
</a>