[Koha-devel] New books display for koha
Nicholas van Rheede van Oudtshoorn
vanoudt at gmail.com
Thu May 2 07:05:51 CEST 2013
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 at 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 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/7acf54a3/attachment-0001.html>
More information about the Koha-devel
mailing list