I should also mention that it can be seen running live at http://library.pbc.wa.edu.au/ :-) Nick On Thu, May 2, 2013 at 12:58 PM, Nicholas van Rheede van Oudtshoorn < vanoudt@gmail.com> wrote:
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); } }
}); } } };