Oh, and of course one needs some css to make things look pretty! :-)

/* Book Cover Display */
div#newbooks {
        background-color: rgba(69, 34, 17, 0.8);
        background-image: -webkit-repeating-linear-gradient(left , rgba(0, 0, 0, 0.1), transparent 30px), -webkit-repeating-linear-gradient(left, rgba(0, 0, 0, 0.1), transparent 50px), -webkit-repeating-linear-gradient(right, rgba(0, 0, 0, 0.1), transparent 70px), url(/noise.png) !important;
        background-image: -moz-repeating-linear-gradient(left, rgba(0, 0, 0, 0.1), transparent 30px), -moz-repeating-linear-gradient(left, rgba(0, 0, 0, 0.1), transparent 50px), -moz-repeating-linear-gradient(right, rgba(0, 0, 0, 0.1), transparent 70px), url(/noise.png) !important;
        background-image: -ms-repeating-linear-gradient(left, rgba(0, 0, 0, 0.1), transparent 30px), -ms-repeating-linear-gradient(left, rgba(0, 0, 0, 0.1), transparent 50px), -ms-repeating-linear-gradient(right, rgba(0, 0, 0, 0.1), transparent 70px), url(/noise.png) !important;
        background-image: -o-repeating-linear-gradient(left, rgba(0, 0, 0, 0.1), transparent 30px), -o-repeating-linear-gradient(left, rgba(0, 0, 0, 0.1), transparent 50px), -o-repeating-linear-gradient(right, rgba(0, 0, 0, 0.1), transparent 70px), url(/noise.png) !important;
        background-image: repeating-linear-gradient(left, rgba(0, 0, 0, 0.1), transparent 30px), repeating-linear-gradient(left, rgba(0, 0, 0, 0.1), transparent 50px), repeating-linear-gradient(right, rgba(0, 0, 0, 0.1), transparent 70px), url(/noise.png) !important;
w
}

div.bookshelf {
        background-image: url(/bookshelf.png);
        background-size: 100% 190px;
        vertical-align: bottom;
        padding-top: 5px;
        border: 10px solid #452211;
        border-bottom: none;
        background-color: transparent;
        text-align: center;
}

.bookshelf .bookCover {
    display: inline-block;
    margin-bottom: 40px;
    margin-right: 10px;
}

.thumbnail {
        box-shadow: 2px 2px 2px 0 rgba(0,0,0,.7);
        max-height: 150px;
        border-radius: 2px 6px 6px 2px;
        border: 1px solid rgba(0, 0, 0, .7);
        min-height: 150px;
}

td .thumbnail {
        min-height: 114px;
        max-height: 114px;
}
.bookCover .thumbnail, .bookCover .fakeCover {
        border-radius: 2px 6px 6px 2px;
        box-shadow: 2px 2px 2px 0 rgba(0,0,0,.7);
        max-height: 150px;
        height: 150px;
}
.biblio > .bookCover .thumbnail, .biblio > .bookCover .fakeCover {
        -webkit-transform:skewy(-4deg);
        -moz-transform:skewy(-4deg);
        -ms-transform: skewy(-4deg);
        -o-transform: skewy(-4deg);
        transform: skewy(-4deg);
}

.biblio > .bookCover:hover .thumbnail, .biblio > .bookCover:hover .fakeCover {
        box-shadow: 0 0 4px 2px rgba(255,255,255,.7);
        -webkit-transform:skewy(0deg) scale(1.33);
        -moz-transform:skewy(0deg) scale(1.33);
        -ms-transform:skewy(0deg) scale(1.33);
        -o-transform:skewy(0deg) scale(1.33);
        transform:skewy(0deg) scalue(1.33);
}
span.shelfhint {
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: auto;
        color: white;
        z-index: 30;
        background-color: black;
        border-top-left-radius: 2px;
        border-top-right-radius: 6px;
        font-size: x-small;
        -webkit-transition: all .5s ease-in-out 0s;
        -moz-transition: all .5s ease-in-out 0s;
        -o-transition: all .5s ease-in-out 0s;
        -ms-transition: all .5s ease-in-out 0s;
        transition: all .5s ease-in-out 0s;
}

a.biblio:hover > span.shelfhint {
        opacity: .6;
        -webkit-transition: all .5s ease-in-out 0s;
        -moz-transition: all .5s ease-in-out 0s;
        -o-transition: all .5s ease-in-out 0s;
        -ms-transition: all .5s ease-in-out 0s;
        transition: all .5s ease-in-out 0s;
}

.biblio:before {
    background-color: rgba(0,0,0,.6);
    width: 40px;
    height: 105px;
    bottom: 60px;
    left: -15px;
    box-shadow: 0 0 20px 10px rgba(0,0,0,.6);
    display: block;
    position: absolute;
    content: "";
    -webkit-transform: skewx(15deg);
    -moz-transform: skewx(15deg);
    -ms-transform: skewx(15deg);
    -o-transform: skewx(15deg);
    transform: skewx(15deg);
    z-index: 0;
}

a.biblio {
        text-decoration: none;
        display: inline-block;
        margin: 0 8px;
        height: 190px;
        vertical-align: bottom;
        position: relative;
        margin-left: 15px;
}

#bookcover div.fakeCover {
        margin: 1em .5em .5em;
}
div.fakeCover {
        background-color: #54300c;
        background-image: url(/leather.png), -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.5) 4px, transparent 8px);
        background-image: url(/leather.png), -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.5) 4px, transparent 8px);
        background-image: url(/leather.png),    -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.5) 4px, transparent 8px);
        background-image: url(/leather.png),     -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.5) 4px, transparent 8px);
        background-image: url(/leather.png),        linear-gradient(left, transparent, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.5) 4px, transparent 8px);
        border: 2px solid rgba(0, 0, 0, 0.5);
        border-radius: 2px 6px 6px 2px;
        width: 110px;
        height: 150px;
        position: relative;
        text-decoration: none;
        color: #999;
        -webkit-transition: all 0.5s ease-in-out 0s;
        -moz-transition: all 0.5s ease-in-out 0s;
        -ms-transition: all 0.5s ease-in-out 0s;
        -o-transition: all 0.5s ease-in-out 0s;
        transition: all 0.5s ease-in-out 0s;
}

div.fakeCover > span {
        color: rgba(0,0,0, 0.6);
        background-color: rgba(255,255,255,.1);
        border-radius: 5px;
        border: 1px solid rgba(0,0,0,.05);
        display: block;
        font-family: arial,sans-serif;
        height: auto;
        margin: 8px;
        margin-left: 15px;
        padding: 2px;
        text-align: center;
        width: 81px;
        max-height: 100px;
        position: absolute;

}

div.fakeCover > span.title {
        font-size: x-small;
        top: 0px;
}

div.fakeCover > span.author {
        font-size: xx-small;
        bottom: 0px;
}

span.no-image {
        display: none;
}

On Thu, May 2, 2013 at 12:01 PM, Nicholas van Rheede van Oudtshoorn <vanoudt@gmail.com> wrote:

Hello all!

A while back (a few years, I think!) I wrote and posted to this mailing list a set of php scripts that provided a new books display. When we recently upgraded our koha instance (shifting to Plack in the process!), I decided to rewrite this new books display in perl.

And I thought I'd put it up here in case anyone was interested in it.

Perl's not my language of choice - so if there are any improvements to be made, please let me know.

To use it, simply install the newbooksdisplay.pl in the opac cgi-bin directory, and add the following snippet to the OpacMain systempreferences:

<h2 style="align="center">Newest books in the library</h2>
<div id="newbooks"></div>
<script type="text/javascript">
$("#newbooks").load("/cgi-bin/koha/newbooksdisplay.pl", function() {

KOHA.Google.GetCoverFromIsbn();

});

</script>

I've also modified the google-jackets.js to produce a nice artificial cover if none is available from google books (currently only if the correct HTML5 data tags are supplied, as in the newbooksdisplay)

if (typeof KOHA == "undefined" || !KOHA) {
    var KOHA = {};
}

/**
 * A namespace for Google related functions.
 */
KOHA.Google = {


    /**
     * Search all:



     *    <div title="biblionumber" id="isbn" class="gbs-thumbnail"></div>
     * or
     *    <div title="biblionumber" id="isbn" class="gbs-thumbnail-preview"></div>



     * 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 = [];
        $("div [id^=gbs-thumbnail]").each(function(i) {
            bibkeys.push($(this).attr("class").split(' ')[0]); // id=isbn
        });
        bibkeys = bibkeys.join(',');



        var scriptElement = document.createElement("script");
        this.openInNewWindow=newWindow;
        scriptElement.setAttribute("id", "jsonScript");
        scriptElement.setAttribute("src",



            "http://books.google.com/books?bibkeys=" + escape(bibkeys) +
            "&jscmd=viewapi&callback=KOHA.Google.gbsCallBack");



        scriptElement.setAttribute("type", "text/javascript");
        document.documentElement.firstChild.appendChild(scriptElement);

    },

    /**
     * Add cover pages <div



     * and link to preview if div id is gbs-thumbnail-preview
     */
    gbsCallBack: function(booksInfo) {
         var target = '';
         if (this.openInNewWindow) {
            target = 'target="_blank" ';



         }
         for (id in booksInfo) {
             var book = booksInfo[id];
             $("."+book.bib_key).each(function() {
		var gbsre = /^gbs-thumbnail/;
		if ( gbsre.exec($(this).attr("id")) ) {



	                 var a = document.createElement("a");
        	         a.href = book.info_url;
                	 if (typeof(book.thumbnail_url) != "undefined") {
	                     var img = document.createElement("img");



			     img.setAttribute("class","thumbnail");
                	     img.src = book.thumbnail_url+"&zoom=1";
        	             $(this).append(img);
	                     var re = /^gbs-thumbnail-preview/;



        	             if ( re.exec($(this).attr("id")) ) {
                	         $(this).append(
                        	     '<div style="margin-bottom:5px; margin-top:-5px;font-size:9px">' +



	                             '<a '+target+'href="' +
        	                     book.info_url +
                	             '"><img src="' +
                        	     'http://books.google.com/intl/en/googlebooks/images/gbs_preview_sticker1.gif' +



	                             '"></a></div>'
        	                     );
	                     }
        	         } else if ($(this).attr('data-title')) {
					var fakeCoverDiv = document.createElement("div");



					$(fakeCoverDiv).attr("class", "fakeCover");
					$(this).append(fakeCoverDiv);
					var auSpan = document.createElement("span");
					$(auSpan).attr("class", "author");



					$(auSpan).html($(this).attr("data-author"));
					$(fakeCoverDiv).append(auSpan);
                                        var tiSpan = document.createElement("span");
                                        $(tiSpan).attr("class", "title");



                                        $(tiSpan).html($(this).attr("data-title"));
                                        $(fakeCoverDiv).append(tiSpan);
			 } else {
	                	     var message = document.createElement("span");



		                     $(message).attr("class","no-image");
        		             $(message).html(NO_GOOGLE_JACKET);
	                	     $(this).append(message);
	                 }
		}



             });
         }
     }
};