// Cloned by Mathias Bazin on 16 Aug 2018 from World "Flickr World" by Starter user // Please leave this clone trail here.// ==== Starter World ===============================================================================================// (c) Ancient Brain Ltd. All rights reserved.// This code is only for use on the Ancient Brain site.// This code may be freely copied and edited by anyone on the Ancient Brain site.// This code may not be copied, re-published or used on any other website.// To include a run of this code on another website, see the "Embed code" links provided on the Ancient Brain site.// ==================================================================================================================// Starter World for "Web page" API // Just use JS to make a web page// This page gets images from Flickr // Makes JSONP call to Flickr to get images of some tag // ===================================================================================================================// === Start of tweaker's box ======================================================================================== // ===================================================================================================================const thetag ="philosophy";// tag to fetch const MAX =20;// number of images to fetch // ===================================================================================================================// === End of tweaker's box ==========================================================================================// ===================================================================================================================// --- Start of document.write (tags) --------------------------------------------------------------------------------------------------------------------// One way of using JS to write HTML and data is with a multi-line string// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals// Image from:// https://commons.wikimedia.org/wiki/Category:Lamborghini
document.write (`<h1>Flickr web page </h1>Demo of just using JS to write HTML and data to a web page.<pre></pre><hr><h1>Demo of document.write (tags)</h1><img border=1 src="/uploads/starter/lamborghini.1963.jpg"><br>GiottoBizzarrini,FerruccioLamborghini and GianPaoloDallara at Sant'AgataBolognese in 1963,with a Lamborghini V12 engine prototype.<br>From<a href="https://commons.wikimedia.org/wiki/File:Bizzarrini_Lamborghini_Dallara.jpg">here</a>.<p><br>`);// --- End of document.write (tags) --------------------------------------------------------------------------------------------------------------------// --- Start of JSONP --------------------------------------------------------------------------------------------------------------------const thefn ="callbackfn";// JSONP callback function name
document.write (" <div style='margin-top:50px;'> <hr> <h1> Demo of JSONP </h1> </div> ");
document.write (" <p> Latest Flickr images tagged with: <b> \""+ thetag +"\" </b> </p> ");// div to write output to:
document.write (" <div id=theoutput> </div> ");var script = document.createElement("script");
script.src ="https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback="+ thefn +"&tags="+ thetag;
document.head.appendChild(script);// define JSONP callback functionfunction callbackfn ( data ){var s ="";for(var i =0; i < MAX ; i++){// var imgurl = data.items[i].media.m;// s = s + " <img border=1 src=" + imgurl + "> ";var htmlblock = data.items[i].description;
s = s +" <div style='margin-top:50px;'> "+ htmlblock +" </div> ";}// callback function needs to write to div - cannot do document.write
$("#theoutput").html ( s );}// --- End of JSONP --------------------------------------------------------------------------------------------------------------------