[Koha-devel] New books display for koha
Nicholas van Rheede van Oudtshoorn
vanoudt at gmail.com
Thu May 2 06:58:45 CEST 2013
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 at 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);
> }
> }
>
>
> });
> }
> }
> };
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.koha-community.org/pipermail/koha-devel/attachments/20130502/457ca256/attachment-0001.html>
More information about the Koha-devel
mailing list