<div dir="ltr"><div>I should also mention that it can be seen running live at <a href="http://library.pbc.wa.edu.au/">http://library.pbc.wa.edu.au/</a><br><br>:-)<br></div>Nick<br></div><div class="gmail_extra"><br><br><div class="gmail_quote">
On Thu, May 2, 2013 at 12:58 PM, Nicholas van Rheede van Oudtshoorn <span dir="ltr"><<a href="mailto:vanoudt@gmail.com" target="_blank">vanoudt@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div dir="ltr">Oh, and of course one needs some css to make things look pretty! :-)<br><br>/* Book Cover Display */<br>div#newbooks {<br> background-color: rgba(69, 34, 17, 0.8);<br> 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;<br>
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;<br>
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;<br>
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;<br>
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;<br>
w<br>}<br><br>div.bookshelf {<br> background-image: url(/bookshelf.png);<br> background-size: 100% 190px;<br> vertical-align: bottom;<br> padding-top: 5px;<br> border: 10px solid #452211;<br>
border-bottom: none;<br> background-color: transparent;<br> text-align: center;<br>}<br><br>.bookshelf .bookCover {<br> display: inline-block;<br> margin-bottom: 40px;<br> margin-right: 10px;<br>
}<br><br>.thumbnail {<br> box-shadow: 2px 2px 2px 0 rgba(0,0,0,.7);<br> max-height: 150px;<br> border-radius: 2px 6px 6px 2px;<br> border: 1px solid rgba(0, 0, 0, .7);<br> min-height: 150px;<br>
}<br><br>td .thumbnail {<br> min-height: 114px;<br> max-height: 114px;<br>}<br>.bookCover .thumbnail, .bookCover .fakeCover {<br> border-radius: 2px 6px 6px 2px;<br> box-shadow: 2px 2px 2px 0 rgba(0,0,0,.7);<br>
max-height: 150px;<br> height: 150px;<br>}<br>.biblio > .bookCover .thumbnail, .biblio > .bookCover .fakeCover {<br> -webkit-transform:skewy(-4deg);<br> -moz-transform:skewy(-4deg);<br>
-ms-transform: skewy(-4deg);<br> -o-transform: skewy(-4deg);<br> transform: skewy(-4deg);<br>}<br><br>.biblio > .bookCover:hover .thumbnail, .biblio > .bookCover:hover .fakeCover {<br> box-shadow: 0 0 4px 2px rgba(255,255,255,.7);<br>
-webkit-transform:skewy(0deg) scale(1.33);<br> -moz-transform:skewy(0deg) scale(1.33);<br> -ms-transform:skewy(0deg) scale(1.33);<br> -o-transform:skewy(0deg) scale(1.33);<br> transform:skewy(0deg) scalue(1.33);<br>
}<br>span.shelfhint {<br> opacity: 0;<br> position: absolute;<br> top: 0px;<br> left: 0px;<br> width: 100%;<br> height: auto;<br> color: white;<br> z-index: 30;<br>
background-color: black;<br>
border-top-left-radius: 2px;<br> border-top-right-radius: 6px;<br> font-size: x-small;<br> -webkit-transition: all .5s ease-in-out 0s;<br> -moz-transition: all .5s ease-in-out 0s;<br> -o-transition: all .5s ease-in-out 0s;<br>
-ms-transition: all .5s ease-in-out 0s;<br> transition: all .5s ease-in-out 0s;<br>}<br><br>a.biblio:hover > span.shelfhint {<br> opacity: .6;<br> -webkit-transition: all .5s ease-in-out 0s;<br>
-moz-transition: all .5s ease-in-out 0s;<br> -o-transition: all .5s ease-in-out 0s;<br> -ms-transition: all .5s ease-in-out 0s;<br> transition: all .5s ease-in-out 0s;<br>}<br><br>.biblio:before {<br>
background-color: rgba(0,0,0,.6);<br> width: 40px;<br> height: 105px;<br> bottom: 60px;<br> left: -15px;<br> box-shadow: 0 0 20px 10px rgba(0,0,0,.6);<br> display: block;<br> position: absolute;<br>
content: "";<br> -webkit-transform: skewx(15deg);<br> -moz-transform: skewx(15deg);<br> -ms-transform: skewx(15deg);<br> -o-transform: skewx(15deg);<br> transform: skewx(15deg);<br> z-index: 0;<br>
}<br><br>a.biblio {<br> text-decoration: none;<br> display: inline-block;<br> margin: 0 8px;<br> height: 190px;<br> vertical-align: bottom;<br> position: relative;<br> margin-left: 15px;<br>
}<br><br>#bookcover div.fakeCover {<br> margin: 1em .5em .5em;<br>}<br>div.fakeCover {<br> background-color: #54300c;<br> 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);<br>
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);<br> 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);<br>
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);<br> 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);<br>
border: 2px solid rgba(0, 0, 0, 0.5);<br> border-radius: 2px 6px 6px 2px;<br> width: 110px;<br> height: 150px;<br> position: relative;<br> text-decoration: none;<br> color: #999;<br>
-webkit-transition: all 0.5s ease-in-out 0s;<br> -moz-transition: all 0.5s ease-in-out 0s;<br> -ms-transition: all 0.5s ease-in-out 0s;<br> -o-transition: all 0.5s ease-in-out 0s;<br> transition: all 0.5s ease-in-out 0s;<br>
}<br><br>div.fakeCover > span {<br> color: rgba(0,0,0, 0.6);<br> background-color: rgba(255,255,255,.1);<br> border-radius: 5px;<br> border: 1px solid rgba(0,0,0,.05);<br> display: block;<br>
font-family: arial,sans-serif;<br> height: auto;<br> margin: 8px;<br> margin-left: 15px;<br> padding: 2px;<br> text-align: center;<br> width: 81px;<br> max-height: 100px;<br>
position: absolute;<br><br>}<br><br>div.fakeCover > span.title {<br> font-size: x-small;<br> top: 0px;<br>}<br><br>div.fakeCover > span.author {<br> font-size: xx-small;<br> bottom: 0px;<br>
}<br><br>span.no-image {<br> display: none;<br>}<br><br></div><div class="HOEnZb"><div class="h5"><div class="gmail_extra"><br><br><div class="gmail_quote">On Thu, May 2, 2013 at 12:01 PM, Nicholas van Rheede van Oudtshoorn <span dir="ltr"><<a href="mailto:vanoudt@gmail.com" target="_blank">vanoudt@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><div><div><div>Hello all!<br><br>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.<br>
<br></div><div>And I thought I'd put it up here in case anyone was interested in it.<br><br></div>Perl's not my language of choice - so if there are any improvements to be made, please let me know.<br><br></div>To use it, simply install the <a href="http://newbooksdisplay.pl" target="_blank">newbooksdisplay.pl</a> in the opac cgi-bin directory, and add the following snippet to the OpacMain systempreferences:<br>
<br><h2 style="align="center">Newest books in the library</h2><br><div id="newbooks"></div><br><script type="text/javascript"><br>$("#newbooks").load("/cgi-bin/koha/<a href="http://newbooksdisplay.pl" target="_blank">newbooksdisplay.pl</a>", function() {<br>
<br>KOHA.Google.GetCoverFromIsbn();<br><br>});<br><br></script><br><br><br></div>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)<br>
<br><br><pre>if (typeof KOHA == "undefined" || !KOHA) {<br> var KOHA = {};<br>}<br><br>/**<br> * A namespace for Google related functions.<br> */<br>KOHA.Google = {<br><br><br> /**<br> * Search all:<br>
* <div title="biblionumber" id="isbn" class="gbs-thumbnail"></div><br> * or<br> * <div title="biblionumber" id="isbn" class="gbs-thumbnail-preview"></div><br>
* and run a search with all collected isbns to Google Book Search.<br> * The result is asynchronously returned by Google and catched by<br> * gbsCallBack().<br> */<br> GetCoverFromIsbn: function(newWindow) {<br>
var bibkeys = [];<br> $("div [id^=gbs-thumbnail]").each(function(i) {<br> bibkeys.push($(this).attr("class").split(' ')[0]); // id=isbn<br> });<br> bibkeys = bibkeys.join(',');<br>
var scriptElement = document.createElement("script");<br> this.openInNewWindow=newWindow;<br> scriptElement.setAttribute("id", "jsonScript");<br> scriptElement.setAttribute("src",<br>
"<a href="http://books.google.com/books?bibkeys=" target="_blank">http://books.google.com/books?bibkeys=</a>" + escape(bibkeys) +<br> "&jscmd=viewapi&callback=KOHA.Google.gbsCallBack");<br>
scriptElement.setAttribute("type", "text/javascript");<br> document.documentElement.firstChild.appendChild(scriptElement);<br><br> },<br><br> /**<br> * Add cover pages <div<br>
* and link to preview if div id is gbs-thumbnail-preview<br> */<br> gbsCallBack: function(booksInfo) {<br> var target = '';<br> if (this.openInNewWindow) {<br> target = 'target="_blank" ';<br>
}<br> for (id in booksInfo) {<br> var book = booksInfo[id];<br> $("."+book.bib_key).each(function() {<br> var gbsre = /^gbs-thumbnail/;<br> if ( gbsre.exec($(this).attr("id")) ) {<br>
var a = document.createElement("a");<br> a.href = book.info_url;<br> if (typeof(book.thumbnail_url) != "undefined") {<br> var img = document.createElement("img");<br>
img.setAttribute("class","thumbnail");<br> img.src = book.thumbnail_url+"&zoom=1";<br> $(this).append(img);<br> var re = /^gbs-thumbnail-preview/;<br>
if ( re.exec($(this).attr("id")) ) {<br> $(this).append(<br> '<div style="margin-bottom:5px; margin-top:-5px;font-size:9px">' +<br>
'<a '+target+'href="' +<br> book.info_url +<br> '"><img src="' +<br> '<a href="http://books.google.com/intl/en/googlebooks/images/gbs_preview_sticker1.gif" target="_blank">http://books.google.com/intl/en/googlebooks/images/gbs_preview_sticker1.gif</a>' +<br>
'"></a></div>'<br> );<br> }<br> } else if ($(this).attr('data-title')) {<br> var fakeCoverDiv = document.createElement("div");<br>
$(fakeCoverDiv).attr("class", "fakeCover");<br> $(this).append(fakeCoverDiv);<br> var auSpan = document.createElement("span");<br> $(auSpan).attr("class", "author");<br>
$(auSpan).html($(this).attr("data-author"));<br> $(fakeCoverDiv).append(auSpan);<br> var tiSpan = document.createElement("span");<br> $(tiSpan).attr("class", "title");<br>
$(tiSpan).html($(this).attr("data-title"));<br> $(fakeCoverDiv).append(tiSpan);<br> } else {<br> var message = document.createElement("span");<br>
$(message).attr("class","no-image");<br> $(message).html(NO_GOOGLE_JACKET);<br> $(this).append(message);<br> }<br> }<br>
});<br> }<br> }<br>};<br></pre><br></div>
</blockquote></div><br></div>
</div></div></blockquote></div><br></div>