Skip to content

Instantly share code, notes, and snippets.

@arigesher
Last active October 26, 2020 08:20
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arigesher/8932051 to your computer and use it in GitHub Desktop.
Save arigesher/8932051 to your computer and use it in GitHub Desktop.
JQuery code to make Flickr embeds responsive (and resize correctly when loading in a mobile browser). See http://ari.gesher.net/photos-the-gesher-world-tour/ for a working example.
$(document).ready(function() {
$("#pics iframe").each(function(index) {
var ratio = $(this).height() / $(this).width();
var origHeight = $(this).height();
var origWidth = $(this).width();
var self = this;
// bind to window with closure that references the
// iframe since the iframe doesn't get resize events
// until (you know) we resize it.
$(window).resize(function() {
if($(self).parent().width() > origWidth) {
$(self).width(origWidth);
$(self).height(origHeight);
} else {
$(self).width($(self).parent().width());
$(self).height($(self).parent().width() * ratio);
}
});
});
$(window).resize();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment