Pure JavaScript Flickr gallery

index.html

<div id="flickr"></div>

Pure JavaScript Flickr gallery.markdown

Pure JavaScript Flickr gallery

A Pen by Gabriele Romanato on CodePen.

License.

script.js

(function() {
	function Flickr() {
		this.init();
	}
	
	Flickr.prototype = {
		init: function() {
			this.user = "123194585@N06";
			this.album = "72157646849974903";
			
			
			window.getPhotos = this.getPhotos;
			
			this.getJSON();	
		},
		getJSON: function() {
			var src = "http://api.flickr.com/services/feeds/photoset.gne?nsid=" + this.user + "&set=" + this.album + "&format=json&jsoncallback=getPhotos";	
			var script = document.createElement( "script" );
				script.src = src;
				document.body.appendChild( script );
		},
		getPhotos: function( data ) {
			var limit = 3;
			
			if( data && data.items ) {
				var title = data.title;
				var items = data.items;
				var albumTitle = title.replace( "Content from ", "" );
				var html = "<h3>" + albumTitle + "</h3>";
				    html += "<div class='images'>";
				
				for( var i = 0; i < items.length; ++i ) {
					var item = items[i];
					var n = i + 1;
					if( n <= limit ) {
						html += "<a href='" + item.link + "'><img src='" + item.media.m + "' alt='' /></a>";
					}	
				}
				
				html += "</div>";
				
				document.querySelector( "#flickr" ).innerHTML = html;
			}	
		}
	};
	
	document.addEventListener( "DOMContentLoaded", function() {
		var flickrFeed = new Flickr();
		
	});
	
})();

style.css

body {
	font: 85%/1 Arial, sans-serif;
}

#flickr {
	border: 1px solid #ddd;
	margin: 2em auto;
	max-width: 960px;
	text-align: center;
}
#flickr h3 {
	margin: 0;
	padding: 0.7em;
	background: #303030;
	color: #fff;
	font-weight: normal;
	font-size: 1em;
	text-transform: uppercase;	
}

#flickr .images a {
	display: inline-block;
	margin: 0.5em;
}

#flickr .images a img {
	padding: 5px;
	border: 1px solid #ddd;
}