how to fetch book details from google
<p>how to fetch images from google through google-jackets-js and show with the help of img tag created inside div with id "gbs-thumbnail" by javascript itself. Suggestions are also welcome, just need a little support. Thank you in advance</p>

<p>index.ctp</p>

<pre><code>    &lt;html&gt;
    &lt;head&gt;
&lt;?= $this-&gt;Html-&gt;script('google-jackets.js') ?&gt;
        &lt;script type="text/javascript"&gt; 
            $(document).ready(function(){ 
                    GetCoverFromIsbn(); 
            }); 
        &lt;/script&gt; 
    &lt;/head&gt;
    &lt;body&gt;
               &lt;li&gt;
             &lt;?php $r=0; $check=0; foreach($data as $rrrr)
                        {?&gt;

                        &lt;div class="col-md-3 col-sm-3"&gt;
                            &lt;div class="best-seller-pro"&gt;
                                &lt;figure&gt; 

                &lt;div id="bookcover"&gt; 
                            &lt;div id="gbs-thumbnail" class="9383692103" title="28496801"&gt;
                            &lt;/div&gt;&lt;/div&gt;
                                &lt;/figure&gt;      
                                    &lt;?php echo $this-&gt;Form-&gt;end(); ?&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;?php $r++;$check=0;} ?&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>google-jackets.js</p>

<pre><code>    // if (typeof temp == "undefined" || !temp) {
    var temp = {};
/**
 * A namespace for Google related functions.
 */
temp.Google = {


    /**
     * Search all:
     *    &lt;div title="biblionumber" id="isbn" class="gbs-thumbnail"&gt;&lt;/div&gt;
     * or
     *    &lt;div title="biblionumber" id="isbn" class="gbs-thumbnail-preview"&gt;&lt;/div&gt;
     * and run a search with all collected isbns to Google Book Search.
     * The result is asynchronously returned by Google and catched by
     * gbsCallBack().
     */
    GetCoverFromIsbn: function(newWindow) {
        var bibkeys = [];
        $("[id^=gbs-thumbnail]").each(function(i) {
            bibkeys.push($(this).attr("class")); // id=isbn
        });
        bibkeys = bibkeys.join(',');
        var scriptElement = document.createElement("script");
        this.openInNewWindow=newWindow;
        scriptElement.setAttribute("id", "jsonScript");
        scriptElement.setAttribute("src",
            "https://books.google.com/books?bibkeys=" + escape(bibkeys) +
            "&amp;jscmd=viewapi&amp;callback=temp.Google.gbsCallBack");
        scriptElement.setAttribute("type", "text/javascript");
        document.documentElement.firstChild.appendChild(scriptElement);

    },

    /**
     * Add cover pages &lt;div
     * and link to preview if div id is gbs-thumbnail-preview
     */
    gbsCallBack: function(booksInfo) {
         var target = '';
         if (this.openInNewWindow) {
            target = 'target="_blank" rel="noreferrer" ';
         }
         for (id in booksInfo) {
             var book = booksInfo[id];
             $("[id^=gbs-thumbnail]."+book.bib_key).each(function() {
                 var a = document.createElement("a");
                 a.href = book.info_url;
                 if (typeof(book.thumbnail_url) != "undefined") {
                     var img = document.createElement("img");
                     img.src = book.thumbnail_url;
                     $(this).empty().append(img);
                     var re = /^gbs-thumbnail-preview/;
                     if ( re.exec($(this).attr("id")) ) {
                         $(this).append(
                             '&lt;div class="google-books-preview"&gt;' +
                             '&lt;a '+target+'href="' +
                             book.info_url +
                             '"&gt;&lt;img src="' +
                             'https://books.google.com/intl/en/googlebooks/images/gbs_preview_sticker1.gif' +
                             '"&gt;&lt;/a&gt;&lt;/div&gt;'
                             );
                     }
                 } else {
                     var message = document.createElement("span");
                     $(message).attr("class","no-image");
                     $(message).html(NO_GOOGLE_JACKET);
                     $(this).empty().append(message);
                 }
             });
         }

     }
};
</code></pre>