Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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();
});
}());
@Rillke
Owner
Rillke commented Nov 28, 2014

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment