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:
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)To use it, simply install the newbooksdisplay.pl in the opac cgi-bin directory, and add the following snippet to the OpacMain systempreferences: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.
<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>
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);
}
}
});
}
}
};