Καλώς ήρθατε στην σελίδα της Tech Place

Google API Search Image

25 Απρ 2015

Google API Search Image

Posted by with - in Tutorials

Η Google παρέχει ένα εύχρηστο API για το search της.

Εδώ θα βρείτε ένα παράδειγμα για το Image Search http://techplacedev.eu/gimage 

O Javascript Κώδικας:

function addPaginationLinks1() {
       
    // To paginate search results, use the cursor function.
    var cursor = imageSearch1.cursor;
    var curPage = cursor.currentPageIndex; // check what page the app is on
    var pagesDiv = document.createElement('div');
    for (var i = 0; i < cursor.pages.length; i++) {
      var page = cursor.pages[i];
      if (curPage == i) {
     
      // If we are on the current page, then don't make a link.
        var label = document.createTextNode(' ' + page.label + ' ');
        pagesDiv.appendChild(label);
      } else {
     
        // Create links to other pages using gotoPage() on the searcher.
        var link = document.createElement('a');
        link.href="/demo/gimageV2:imageSearch.gotoPage("+i+');';
        link.innerHTML = page.label;
        link.style.marginRight = '2px';
        pagesDiv.appendChild(link);
      }
    }
     
    var contentDiv = document.getElementById('content-gimgs-1');
    //contentDiv.appendChild(pagesDiv);
}

function searchComplete1() {
	
	// Check that we got results
	if (imageSearch1.results && imageSearch1.results.length > 0) {
	
	  // Grab our content div, clear it.
	  var contentDiv = document.getElementById('content-gimgs-1');
	  contentDiv.innerHTML = '';
	
	  // Loop through our results, printing them to the page.
	  var results = imageSearch1.results;
	  for (var i = 0; i < results.length; i++) {
	    // For each result write it's title and image to the screen
	    var result = results[i];
	    var imgContainer = document.createElement('div');
	     imgContainer.className += "imgcontainer small";
	    var title = document.createElement('span');
	     title.className += "title ";
	  
	    // We use titleNoFormatting so that no HTML tags are left in the 
	    // title
	    title.innerHTML = result.titleNoFormatting;
	    var newImg = document.createElement('img');
	    newImg.className += "gimg small";	   
	
	    // There is also a result.url property which has the escaped version
	    newImg.src= result.url;   //"/image-search/v1/result.tbUrl;"
	    imgContainer.appendChild(title);
	    imgContainer.appendChild(newImg);
	
	    // Put our title + image in the content
	    contentDiv.appendChild(imgContainer);
	  }
	
	  // Now add links to additional pages of search results.
	  addPaginationLinks1(imageSearch1);
	}
}

function OnLoad() {
      
        // Create an Image Search instance.
        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, null);

        // Find me a beautiful car.
        imageSearch.execute("Subaru STI");
        
        // Include the required Google branding
        google.search.Search.getBranding('branding');
      
        google.setOnLoadCallback(OnLoad);
}

google.load('search', '1');
 google.setOnLoadCallback(OnLoad);


O HTML Κώδικας:

< script src=”https://www.google.com/jsapi”> < div id=”branding”>
< div id=”content-gimgs-1″ class=”content-gimgs”>Loading…< / div >

Comments are closed.