Created
September 18, 2017 13:40
-
-
Save jameswquinn/9dcd16896d35b38657a582e59f26cfb8 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Loading public Flickr images onto your website. | Sandbox by Lovell D'souza.</title> | |
| <meta name="description" content="Sandbox for showing how to load public images from a Flickr photoset onto your website."> | |
| <meta name="viewport" content="width=device-width"> | |
| <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="flickr-images"></div> | |
| <script type="text/javascript"> | |
| /** | |
| * Function to get images from Flickr | |
| * | |
| * @setId The flickr set the images belong to. | |
| */ | |
| function getImgs(setId) { | |
| var URL = "https://api.flickr.com/services/rest/" + // Wake up the Flickr API gods. | |
| "?method=flickr.photosets.getPhotos" + // Get photo from a photoset. https://www.flickr.com/services/api/flickr.photosets.getPhotos.htm | |
| "&api_key=727b9ed7cc99e937fa9a701e2ffdc7b6" + // API key. Get one here: http://www.flickr.com/services/apps/create/apply/ | |
| "&photoset_id=" + setId + // The set ID. | |
| "&privacy_filter=1" + // 1 signifies all public photos. | |
| "&per_page=40" + // For the sake of this example I am limiting it to 20 photos. | |
| "&format=json&nojsoncallback=1"; // Er, nothing much to explain here. | |
| // See the API in action here: https://www.flickr.com/services/api/explore/flickr.photosets.getPhotos | |
| $.getJSON(URL, function(data){ | |
| $.each(data.photoset.photo, function(i, item){ | |
| // Creating the image URL. Info: https://www.flickr.com/services/api/misc.urls.html | |
| var img_src = "https://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg"; | |
| var img_thumb = $("<img/>").attr("src", img_src).css("margin", "8px") | |
| $(img_thumb).appendTo("#flickr-images"); | |
| }); | |
| }); | |
| } | |
| $(document).ready(function() { | |
| getImgs("72157632700264359"); // Call the function! | |
| }); | |
| </script> | |
| </div> <!-- .main-container --> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Flickfeed.js - FlickFeed is a delightfully simple way to show Flickr photos on your website.</title> | |
| <meta name="description" content="Flickfeed.js - FlickFeed is a delightfully simple way to show Flickr photos on your website with only the tiniest amount of JavaScript needed, promise!"> | |
| </head> | |
| <body> | |
| <style> | |
| .Flickfeed-image { | |
| width: 100%; | |
| } | |
| </style> | |
| <div class="flickr"></div> | |
| <script type="text/javascript"> | |
| (function(f, g) { | |
| function b(a) { | |
| if (this === f && "querySelector" in document && "localStorage" in window && "addEventListener" in window) return new b(a); | |
| this.options = a || {}; | |
| this.settings = {}; | |
| for (var c in this.defaults) this.settings[c] = this.options[c] || this.defaults[c]; | |
| this.settings.userId = this.options.userId || null; | |
| this.settings.groupId = this.options.group_id || null; | |
| this.settings.setId = this.options.setId || null; | |
| if (!this.settings.userId && !this.settings.groupId) throw Error("One valid ID needs to be passed in"); | |
| this.settings.setId && | |
| (this.ApiConfig.method = "flickr.photosets.getPhotos"); | |
| this.images = []; | |
| this.imageData = []; | |
| this.success = this.options.success || null; | |
| this.complete = this.options.complete || null; | |
| this.template = this.options.template || null; | |
| this.setElement(); | |
| if (!this.element) throw Error("Can't find a valid element"); | |
| this.run() | |
| } | |
| b.prototype.run = function() { | |
| var a = new XMLHttpRequest; | |
| a.open("GET", this.buildURL(), !0); | |
| a.onreadystatechange = function() { | |
| if (4 == a.readyState) | |
| if (a.responseText) this.parse(JSON.parse(a.responseText)); | |
| else throw Error("An unknown error occurred"); | |
| }.bind(this); | |
| a.send() | |
| }; | |
| b.prototype.setElement = function() { | |
| this.element = g.querySelector(this.options.target || "#Flickfeed") | |
| }; | |
| b.prototype.parse = function(a) { | |
| if (a.photos || a.photoset) this.data = a, this.imageData = a.photos ? a.photos.photo : a.photoset.photo, this.processImages(); | |
| else { | |
| if (a.code) throw Error(a.message); | |
| throw Error("An unknown error occurred"); | |
| } | |
| }; | |
| b.prototype.processImages = function() { | |
| for (var a = 0; a < this.imageData.length; a++) this.images.push(this.buildImageUrl(this.imageData[a])); | |
| this.success && "function" === | |
| typeof this.success ? this.success(this.images) : this.output() | |
| }; | |
| b.prototype.output = function() { | |
| var a = function() { | |
| this.complete && "function" === typeof this.complete && this.complete() | |
| }.bind(this); | |
| if (this.template && "string" === typeof this.template) this.element.innerHTML = this.compileTemplate(); | |
| else { | |
| for (var c = g.createDocumentFragment(), b = 0; b < this.images.length; b++) { | |
| var e = new Image; | |
| e.src = this.images[b]; | |
| e.className = "Flickfeed-image"; | |
| c.appendChild(e) | |
| } | |
| this.element.appendChild(c) | |
| } | |
| a() | |
| }; | |
| b.prototype.compileTemplate = function() { | |
| for (var a = | |
| "", b = 0; b < this.images.length; b++) var d = this.template.replace(/{{image}}/g, this.images[b]), | |
| d = d.replace(/{{link}}/g, "http://www.flickr.com/photos/" + (this.imageData[b].owner || this.data.photoset.owner) + "/" + this.imageData[b].id + "/"), | |
| d = d.replace(/{{title}}/g, this.imageData[b].title), | |
| a = a + d; | |
| return a | |
| }; | |
| b.prototype.ApiConfig = { | |
| root: "https://api.flickr.com/services/rest/", | |
| method: "flickr.photos.search", | |
| ApiKey: "727b9ed7cc99e937fa9a701e2ffdc7b6", | |
| format: "json", | |
| extras: ["nojsoncallback=1"] | |
| }; | |
| b.prototype.defaults = { | |
| limit: 10, | |
| size: "m", | |
| sort: "date-posted-desc" | |
| }; | |
| b.prototype.buildURL = function() { | |
| return this.ApiConfig.root + "?method=" + this.ApiConfig.method + "&api_key=" + this.ApiConfig.ApiKey + (this.settings.userId ? "&user_id=" + this.settings.userId + (this.settings.setId ? "&photoset_id=" + this.settings.setId : "") : "&group_id=" + this.settings.groupId) + "&format=" + this.ApiConfig.format + "&sort=" + this.settings.sort + "&per_page=" + this.settings.limit + "&" + this.ApiConfig.extras.join("&") | |
| }; | |
| b.prototype.buildImageUrl = function(a) { | |
| return "http://farm" + | |
| a.farm + ".staticflickr.com/" + a.server + "/" + a.id + "_" + a.secret + "_" + this.settings.size + ".jpg" | |
| }; | |
| f.Flickfeed = b | |
| })(window, document); | |
| </script> | |
| <script type="text/javascript"> | |
| Flickfeed({ | |
| userId: "152266232@N07", | |
| target: ".flickr", | |
| limit: 100, | |
| size: 'z', | |
| sort: 'date-posted-desc' | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
initial examples