2015-09-16 12 views
11

Ho questa idea per il mio sito Web che ogni volta che visiti la pagina, lo sfondo sarà diverso. Voglio ottenere letteralmente qualsiasi immagine dalle immagini di Google e posizionarla come sfondo del mio sito Web utilizzando Javascript.Usa javascript per ottenere un'immagine casuale dalle immagini di Google

In pratica ogni volta che si aggiorna la pagina uno script preleva un'immagine casuale da immagini di Google e la posiziona come sfondo o, almeno, scarica l'immagine.

Come devo fare questo, o è anche possibile?

+0

Questo non è particolarmente possibile. – SLaks

+1

È possibile utilizzare un servizio che fa questo per voi come [lorempixel] (http://lorempixel.com/), ma non sono sicuro che questo soddisfi le vostre esigenze. Anche se ottenere un'immagine veramente * casuale * da Google Immagini sembra più che un po 'rischioso, data la quantità di immagini che non sono adatte per gli sfondi del sito web. – Scott

+1

Per utilizzare le [API di Google Image Search] (https://developers.google.com/image-search/v1/jsondevguide?hl=en) per interrogare le immagini, è possibile ottenere un modulo risultato casuale i dati JSON. Nota che è deprecato, ma funzionerà comunque. Puoi anche utilizzare la loro nuova [API di ricerca personalizzata] (https://developers.google.com/custom-search/). –

risposta

15

Può essere eseguito tramite Google Immagini anche se è richiesta molta personalizzazione in modo che lo script si comporti come desiderato (inclusa l'impostazione di un ritardo per gestire la limitazione della velocità; Google ha un limite di velocità di 64 elementi per richiesta di ricerca tramite API) ecco un esempio di base utilizzando Google immagini 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> 

Tuttavia mi permetto di suggerire, invece: immagini casuali da Flickr, qui è un altro codice di base per questo (il cielo è il limite):

<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> 
+0

Bellezza! .... questo mi ha fatto risparmiare un sacco di tempo per iniziare. – Simon

Problemi correlati