Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Search API Sample</title>
    
    <!-- 這個程式是從「Image Search Developer's Guide( https://developers.google.com/image-search/v1/devguide )」範例改寫而成的 -->
    <!-- 首先Load Google Image Search JavaScript API -->
    <script src="https://www.google.com/jsapi"></script>
    
    
    <script type="text/javascript">
    
    // Load Google Image Search Module
    google.load('search', '1');
​
    function OnLoad() {
        // Create an Image Search instance.
        var imageSearch = new google.search.ImageSearch();
​
        // Set searchComplete as the callback function when a search is complete.  The imageSearch object will have results in it.
        imageSearch.setSearchCompleteCallback(this, searchComplete, [imageSearch]);     /// 這裡配合searchComplete()參數傳遞
​
        // Find an address.
        imageSearch.execute("台灣台中市和平區平等里武陵路3-1號");
​
        // Include the required Google branding
        google.search.Search.getBranding('branding');
    }
​
    // To register the specified handler function to be called once the document loads
    google.setOnLoadCallback(OnLoad);
​
    // 接下來的nextImage()與searchComplete()是引用「PRODL (http://pordl.com/transform.aspx?id=486)」其中的Finding Images on a Specific Site範例
    var imageIndex = 0;
    var images;
​
    function nextImage() {
        imageIndex++;
        if (imageIndex >= images.length) imageIndex = 0;
        var imageContainer = document.getElementById('image-container');
        imageContainer.src = images[imageIndex].tbUrl;
    }
​
    function searchComplete(searcher) {
        if (searcher.results && searcher.results.length > 0) 
            {
            var contentDiv = document.getElementById('content-slideshow');
            contentDiv.innerHTML = '';
​
            var imageTag = document.createElement('img');
            imageTag['id'] = 'image-container';
            imageTag['src'] = searcher.results[imageIndex].tbUrl;
            imageTag['width'] = '120'; 
            imageTag['height'] = '90'; 
            images = searcher.results;
​
            contentDiv.appendChild(imageTag);
​
            /// Switch to the next image every 2 seconds. (以後應該要再改寫這個地方)
            setInterval("nextImage();", 2000);
            }
    }     
​
    </script>
​
  </head>
  <body style="border: 0 none;">    
    <div id="content-slideshow"></div><br />
    <div id="branding" style="float: left;"></div>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers