FlickrSetEmbedder.js

This JS script will convert any HTML links pointing to Flickr photo sets to an actual, embedded grid of these Flickr photo sets.

Simply add the required JS snippet as outlined below and create any number of HTML links to Flickr sets with 2 data attributes: data-source="flickr" (this initializes the script) and data-limit="X" (optional) where X is the number of fetched images from the Flickr set. If you omit the second data attribute, the script will fetch the last 12 from the Flickr set (or whatever setting you have configured in the JS snippet). The generated HTML is an unordered list (ul) containing the images.

FlickrSetEmbedder.js works with public Flickr sets only and requires a free API key from Flickr.com. Don't forget to add the trailing slash to any Flickr set (some browsers may cut it off).

And since the script is loaded over a CDN (CloudFlare), you'll always have the latest version for your site. And don't worry, if any paths or URLs are to be changed in the future, we will always make sure to properly redirect them to the new paths/URLs.

Enjoy!

Usage

Put the following code just once, either in the <head> of your template or before the closing </body> tag. Remember to get a free API key from Flickr.

<script type="text/javascript">
  var flickrApiKey = 'XXXXXXXXXXXXXXXXXXXXXX'; // Your Flickr API key goes here
  var flickrImgLimit = 12; // Optional - Per set image limit (defaults to 12)
  var flickrImgSort = 'default'; // Optional - Image sorting: default | random
  var modalClass = 'lightbox'; // Optional - CSS class to use on image links for lightbox integration
  (function() {
    var fse = document.createElement('script'); fse.type = 'text/javascript'; fse.async = true;
    fse.src = '//cdn.joomlaworks.org/js/flickrsetembedder.js?v=1.2';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(fse);
  })();
</script>

You can also get the sample CSS we use in this demo, which places the Flickr photos as background CSS images in a responsive grid:
<style type="text/css">
  /* This is just some basic responsive styling */
  ul.flickrSet {padding:0; margin:0; list-style:none;}
  ul.flickrSet li {float:left; width:25%; padding:0; margin:0;}
  ul.flickrSet li a.flickrImageLink {width:100%; height:300px; overflow:hidden; display:block; background-position:50% 50%; background-repeat:no-repeat; text-indent:-999px; background-size:cover;}
  ul.flickrSet li a.flickrImageLink span,
  ul.flickrSet li a.flickrImageLink img {display:none;} /* Hiding inline title and image element */
  ul.flickrSet li.flickrSetClr {clear:both; height:0; line-height:0; float:none; padding:0; margin:0; border:none;}

  @media all and (min-width:321px) and (max-width:600px) {
    ul.flickrSet li {float:left; width:33%; padding:0; margin:0;}
    ul.flickrSet li a.flickrImageLink {height:200px;}
  }
  @media all and (max-width:320px) {
    ul.flickrSet li {float:left; width:50%; padding:0; margin:0;}
    ul.flickrSet li a.flickrImageLink {height:120px;}
  }
</style>

Put this in your content

<a data-source="flickr" data-limit="4" href="http://www.flickr.com/photos/username/sets/3874568374568734658/">Check out my cool Flickr set</a>

To utilize random sorting, you can either use the global setting in the initializing script tag or place the "data-sort" attribute inside the Flickr link like so:
<a data-source="flickr" data-limit="4" data-sort="random" href="http://www.flickr.com/photos/username/sets/3874568374568734658/">Check out my cool Flickr set</a>

The lightbox JS script used is SimpleBox.

Demo

A couple of links to Flickr sets.

One with 8 pics...
JD13GR June 15

One with the default 12 pics setting, ordered randomly...
JD13GR June 16

Changelog

If you're using the initializing script tag as is, then you'll always be using the latest release as it's loaded remotely from our CDN. Adjust your code for new settings that may be added in the future. Of course, there is always backwards "settings compatibility".