CODEWITHSUNDEEP
javascriptjquerygoogle-searchgoogle-search-api
Dmitry
Dmitry

Reputation: 91

How to get image url in google image search api v2

How to get url of image on image click with javascript or jQuery in Google Image Search API v2? I didn't find this information in Google Search API v2 documentation. Please, help me to solve this problem. 

<script>

  var renderSearchElement = function() {
   google.search.cse.element.render(
      {
       gname:'gsearch',
       div: "test",
       attributes: {
       disableWebSearch: true,
       enableHistory: true,
       enableImageSearch:true,
       imageSearchResultSetSize:6
       },
       tag: 'search'
      });
      var element = google.search.cse.element.getElement('gsearch');  
      element.execute();
  };
  var myCallback = function() {
    if (document.readyState == 'complete') {
      renderSearchElement();  
    } 
    else {
      google.setOnLoadCallback(renderSearchElement, true);  
    }
  };
  window.__gcse = {
    parsetags: 'explicit',
    callback: myCallback
  };
   (function() {
    var cx = '000888210889775888983:tmhkkjoq81m';
    var gcse = document.createElement('script'); 
    gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();
</script>

Upvotes: 1

Views: 2782

Answers (1)

Devnook
Devnook

Reputation: 1103

You probably want to have a listener on the image, so that when it is clicked it can report the url value. This means you need to overwrite the default cse image with your own version with listener attached.

The procedure (some code there is obsolete, but the general things work) for overwriting the default results template with your own is described here: https://developers.google.com/custom-search/docs/js/rendering

You only need to overwrite the thumbanail part, eg:

<div id="my_thumbnail">
    <div data-attr="0" data-vars="{tn:(Vars.cseThumbnail && cseThumbnail.src)
        ? cseThumbnail : (
            (Vars.thumbnail && thumbnail.src)
                ? thumbnail : {src:Vars.document && document.thumbnailUrl})}">
      <div data-if="tn.src">
        <a class="gs-image" data-attr="{href:url,target:target}" onclick="alert(this)">
          <img data-if="!tn.width || !tn.height || tn.width >= tn.height * 7 / 5" class="gs-image"
            data-attr="{src:tn.src}"
            onload="if (this.parentNode && this.parentNode.parentNode && this.parentNode.parentNode.parentNode) {
                      this.parentNode.parentNode.parentNode.style.display = '';
                      this.parentNode.parentNode.className = 'gs-image-box gs-web-image-box gs-web-image-box-landscape';
                    }
            "/>
          <img data-elif="true" class="gs-image"
            data-attr="{src:tn.src}"
            onload="if (this.parentNode && this.parentNode.parentNode && this.parentNode.parentNode.parentNode) {
                      this.parentNode.parentNode.parentNode.style.display = '';
                      this.parentNode.parentNode.className = 'gs-image-box gs-web-image-box gs-web-image-box-portrait';
                    }
            "/>
        </a>
      </div>
    </div>
  </div>

Please mind the onclick="alert(this)" part - that is the only difference I added compared with default cse template. You can change this onclick function to do something smarter with the url than just alerting it. Here's a full demo:

http://jsfiddle.net/dhkfZ/

Upvotes: 1

Related Questions