// Cloned by Robert Joscelyne on 14 Oct 2021 from World "Flickr World" by Starter user // Please leave this clone trail here.// ==== Starter World =================================================================================================// This code is designed for use on the Ancient Brain site.// This code may be freely copied and edited by anyone on the Ancient Brain site.// To include a working run of this program on another site, see the "Embed code" links provided on Ancient Brain.// ====================================================================================================================// 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 // default body is margin 0 and padding 0
$('body').css("margin","20px");
$('body').css("padding","20px");// ===================================================================================================================// === Start of tweaker's box ======================================================================================== // ===================================================================================================================const thetag ="lamborghini";// tag to fetch const MAX =10;// number of images to fetch // ===================================================================================================================// === End of tweaker's box ==========================================================================================// ===================================================================================================================// --- document.write (tags) --------------------------------------------------------------------------------------------------------------------// Use JS to write HTML and data to page "here" // document.write ( "regular string" ); // document.write ( `multi-line string` );// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
document.write (`<h1>Flickr web page </h1>Demo of using JS to just write HTML and data to a web page.`);// Image from:// https://commons.wikimedia.org/wiki/Category:Lamborghini
document.write (`<div style='margin-top:50px; padding:20px; border: 2px solid black; '><h1> document.write (tags)</h1><p>This section writes some hard-coded HTML.</p><img border=1 width=400 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>.</div>`);// --- Launch buttons --------------------------------------------------------------------------------------------------------------------
document.write (`<div style='margin-top:50px; padding:20px; border: 2px solid black; '><h1>Launch buttons </h1>Demo of "launch buttons" using <a href="https://ancientbrain.com/docs.ab.php">AB functions</a>.
A nice way to launch a run from your page.`);
document.write (" <p> Using AB.launchWorld: </p> ");
document.write ("<center>"+ AB.launchWorld ("5205815204","Blank Three.js World")+"</center>");
document.write (" <p> Using AB.launchWorldMind: </p> ");
document.write ("<center>"+ AB.launchWorldMind ("complex","Complex World","complex","Complex Mind")+"</center>");
document.write ("</div>");// --- JSONP --------------------------------------------------------------------------------------------------------------------const thefn ="callbackfn";// JSONP callback function name as a string const theurl ="https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback="+ thefn +"&tags="+ thetag;
document.write (`<div style='margin-top:50px; padding:20px; border: 2px solid black; '><h1>Demo of JSONP </h1>`);
document.write (" <p> Latest Flickr images tagged with: \""+ thetag +"\" </p> ");// div to write output to:
document.write (" <div id=theoutput> </div> ");
document.write ("</div>");// JSONP is a one-liner with jquery:
$.getScript ( theurl );// 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;'> <hr> "+ htmlblock +" </div> ";}// callback function needs to write to div - cannot do document.write
$("#theoutput").html ( s );}