[Koha-devel] Koha-devel Digest, Vol 90, Issue 4
David Cook
dcook at prosentient.com.au
Thu May 2 08:58:43 CEST 2013
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
dcook at prosentient.com.au
-----Original Message-----
From: koha-devel-bounces at lists.koha-community.org
[mailto:koha-devel-bounces at lists.koha-community.org] On Behalf Of
koha-devel-request at lists.koha-community.org
Sent: Thursday, 2 May 2013 3:06 PM
To: koha-devel at lists.koha-community.org
Subject: Koha-devel Digest, Vol 90, Issue 4
Send Koha-devel mailing list submissions to
koha-devel at 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-request at lists.koha-community.org
You can reach the person managing the list at
koha-devel-owner at 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 <vanoudt at gmail.com>
To: koha-devel at lists.koha-community.org
Subject: Re: [Koha-devel] New books display for koha
Message-ID:
<CAJ1eDORER-nZutQWPp05BYFg3caAkHq+8QjaDW91QG34v797Kg at 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 <
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_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 at 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
More information about the Koha-devel
mailing list