2015-09-16 16 views
11

Mam pomysł na moją stronę, że za każdym razem, gdy odwiedzasz tę stronę, tło będzie inne. Chcę uzyskać dosłownie dowolny obraz z obrazów Google i umieścić go jako tło mojej witryny za pomocą Javascript.Użyj javascript, aby uzyskać losowy obraz ze zdjęć Google.

Zasadniczo za każdym razem, gdy odświeżysz stronę, skrypt pobierze losowy obraz z obrazów Google i umieści go jako tło lub może przynajmniej pobierze zdjęcie.

Jak powinienem to zrobić, czy jest to możliwe?

+0

To nie jest szczególnie ważne możliwy. – SLaks

+1

Możesz użyć usługi, która robi to za Ciebie, np. [Lorempixel] (http://lorempixel.com/), ale nie jestem pewien, czy to pasuje do twoich potrzeb. Chociaż uzyskanie prawdziwie * losowego * obrazu z Grafiki Google wydaje się bardziej niż ryzykowne, biorąc pod uwagę ilość zdjęć, które nie pasują do tła witryny. – Scott

+1

Będziesz potrzebować użyć [Google Image Search API] (https://developers.google.com/image-search/v1/jsondevguide?hl=en) do odpytywania obrazów, następnie możesz otrzymać losowy formularz wyników dane JSON. Zauważ, że jest przestarzałe, ale nadal będzie działać. Możesz też użyć ich nowszego [interfejsu API wyszukiwarki niestandardowej] (https://developers.google.com/custom-search/). –

Odpowiedz

15

Można to zrobić za pomocą Grafiki Google, chociaż wymagana jest duża personalizacja, aby skrypt działał zgodnie z zamierzeniami (w tym ustawianie opóźnienia w ograniczaniu stawek, Google ma limit 64 pozycji na żądanie wyszukiwania w stosunku do interfejsu API) tutaj jest podstawowy przykład za pomocą 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> 

Jednakże mogę zasugerować zamiast: Losowe obrazy z flickr, tu jest inny kod podstawowy dla że (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> 
+0

Piękno! .... to oszczędzało mi mnóstwo czasu na rozpoczęcie. – Simon

Powiązane problemy