Menu
I have this idea for my website that every time you visit the page, the background will be different. I want to get literally any picture from Google images and place it as my website's background using Javascript.
Basically every time you refresh the page a script will fetch a random picture from Google images and place it as the background or maybe at least download the picture.
How should I do this, or is it even possible?
402
The Images API provides the ability to serve images directly from Google Cloud Storage or Blobstore, and to manipulate those images on the fly. To view the contents of the image package, see the image package reference.
It can be done via Google Images though much customization is required so the script behaves as you intended (including setting up a delay to handle rate-limiting; Google has a rate-limit of 64 items per search request over API) here is a basic example using Google Images api:
<html> <head> <title></title> <script src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('search', '1'); google.setOnLoadCallback(OnLoad); var search; //i suggest instead of this to make keywords list so first to pick random keyword than to do search and pick random image var keyword = 'mountains'; function OnLoad() { search = new google.search.ImageSearch(); search.setSearchCompleteCallback(this, searchComplete, null); search.execute(keyword); } function searchComplete() { if (search.results && search.results.length > 0) { var rnd = Math.floor(Math.random() * search.results.length); //you will probably use jQuery and something like: $('body').css('background-image', "url('" + search.results[rnd]['url'] + "')"); document.body.style.backgroundImage = "url('" + search.results[rnd]['url'] + "')"; } } </script> </head> <body> </body> </html> However may I suggest instead: Random images from flickr, here is another basic code for that (sky is the limit):
<html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> var keyword = "mountains"; $(document).ready(function(){ $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { tags: keyword, tagmode: "any", format: "json" }, function(data) { var rnd = Math.floor(Math.random() * data.items.length); var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); $('body').css('background-image', "url('" + image_src + "')"); }); }); </script> </head> <body> </body> </html> although not technically what was asked, this could help give some structure to the randomness -- you could compose a couple dictionaries, of verbs, nouns, adjectives.. and mad-lib it up with a random adjective-noun verbing, (ie, fat bulldog running) then query google with that search, and pick a random picture from the results. this way, you can potentially reduce the inappropriate results, and also allow selection of specific dictionaries based on themes the user has selected perhaps. (ie, changing the available nouns based on user's likes)
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
