Hi Nicholas: Slick display!
Perhaps someone else has already raised the idea, but might you consider filing a bug in Bugzilla where you can provide the perl, template, css, and images? That'll make it easier to share with others :). http://bugs.koha-community.org/bugzilla3/ David Cook Systems Librarian Prosentient Systems P/L ABN 31 078 409 168 72/330 Wattle St, Ultimo NSW 2007 tel: 02 92120899 fax: 02 92120885 dc...@prosentient.com.au -----Original Message----- From: koha-devel-boun...@lists.koha-community.org [mailto:koha-devel-boun...@lists.koha-community.org] On Behalf Of koha-devel-requ...@lists.koha-community.org Sent: Thursday, 2 May 2013 3:06 PM To: koha-devel@lists.koha-community.org Subject: Koha-devel Digest, Vol 90, Issue 4 Send Koha-devel mailing list submissions to koha-devel@lists.koha-community.org To subscribe or unsubscribe via the World Wide Web, visit http://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-devel or, via email, send a message with subject or body 'help' to koha-devel-requ...@lists.koha-community.org You can reach the person managing the list at koha-devel-ow...@lists.koha-community.org When replying, please edit your Subject line so it is more specific than "Re: Contents of Koha-devel digest..." Today's Topics: 1. Re: New books display for koha (Nicholas van Rheede van Oudtshoorn) ---------------------------------------------------------------------- Message: 1 Date: Thu, 2 May 2013 13:05:51 +0800 From: Nicholas van Rheede van Oudtshoorn <vano...@gmail.com> To: koha-devel@lists.koha-community.org Subject: Re: [Koha-devel] New books display for koha Message-ID: <caj1edorer-nzutqwpp05byfg3caakhq+8qjadw91qg34v79...@mail.gmail.com> Content-Type: text/plain; charset="iso-8859-1" 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 < vano...@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 < > vano...@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_stick >> er1.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/7 acf54a3/attachment.html> ------------------------------ _______________________________________________ Koha-devel mailing list Koha-devel@lists.koha-community.org http://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-devel website : http://www.koha-community.org/ git : http://git.koha-community.org/ bugs : http://bugs.koha-community.org/ End of Koha-devel Digest, Vol 90, Issue 4 ***************************************** No virus found in this incoming message. Checked by AVG - www.avg.com Version: 9.0.932 / Virus Database: 3164.1.1/5787 - Release Date: 05/02/13 03:55:00 _______________________________________________ Koha-devel mailing list Koha-devel@lists.koha-community.org http://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-devel website : http://www.koha-community.org/ git : http://git.koha-community.org/ bugs : http://bugs.koha-community.org/
