[Koha-patches] [PATCH] Bug 1633 - Add ability to take book cover images from local img db
Owen Leonard
oleonard at myacpl.org
Tue Dec 13 18:32:02 CET 2011
OPAC Template revisions:
- Revised OPAC imageviewer template to match structure of
other OPAC pages (with masthead search, footer, etc)
- Added link back to detail page (controlled by
BiblioDefaultView preference)
- Added link style to thumbnails on opac-detail to add a sense of
"clickability" to them
- Revised OPAC imageviewer template to allow it to function
with JavaScript turned off. Now even without JS main image
will load, thumbnails will be properly styled, and thumbnail
links will work.
- Changes to the script are only to pass missing variables
to the template
TODO: Corresponding changes for the staff client
---
koha-tmpl/opac-tmpl/prog/en/css/opac.css | 5 +
koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt | 4 +-
.../opac-tmpl/prog/en/modules/opac-imageviewer.tt | 82 ++++++++++++++++----
opac/opac-imageviewer.pl | 3 +
4 files changed, 75 insertions(+), 19 deletions(-)
diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
index 21dc08f..f904af2 100755
--- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
+++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
@@ -2289,3 +2289,8 @@ a.koha_url {
.nav_results #listResults li a { color:#FFFFFF; font-weight:normal;}
+a.localimage img {
+ border : 1px solid #8EB3E7;
+ margin : 0 .5em;
+ padding : .3em;
+}
\ No newline at end of file
diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt
index 717c5b6..7f52117 100755
--- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt
+++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt
@@ -987,10 +987,10 @@ YAHOO.util.Event.onContentReady("furtherm", function () {
[% IF ( OPACLocalCoverImages ) %]
<div id="images">
-<div>Click on an image to view it in the image viewer</div>
+<p>Click on an image to view it in the image viewer</p>
[% FOREACH image IN localimages %]
[% IF image %]
-<span class="localimage"><a href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblionumber %]&imagenumber=[% image %]"><img alt="img" src="/cgi-bin/koha/opac-image.pl?thumbnail=1&imagenumber=[% image %]" /></a></span>
+<a class="localimage" href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblionumber %]&imagenumber=[% image %]"><img alt="" src="/cgi-bin/koha/opac-image.pl?thumbnail=1&imagenumber=[% image %]" /></a>
[% END %]
[% END %]
</div>
diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-imageviewer.tt b/koha-tmpl/opac-tmpl/prog/en/modules/opac-imageviewer.tt
index d6633e1..a14e61d 100644
--- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-imageviewer.tt
+++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-imageviewer.tt
@@ -1,11 +1,12 @@
[% INCLUDE 'doc-head-open.inc' %]
[% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha Online[% END %] Catalog › Images for: [% biblio.title |html %]
[% INCLUDE 'doc-head-close.inc' %]
-<script type="text/JavaScript" language="JavaScript">
+<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
- showCover($('.thumbnail').attr('id'));
+ $("#largeCoverImg").attr("src","/opac-tmpl/prog/images/loading.gif");
+ showCover([% imagenumber %]);
});
function showCover(img) {
@@ -16,28 +17,75 @@ function showCover(img) {
//]]>
</script>
<style type="text/css">
+#largeCoverImg {
+ border : 1px solid #CCCCCC;
+ display : block;
+ margin : auto;
+ padding : 1em;
+}
+#thumbnails {
+ text-align : center;
+}
+#thumbnails a img {
+ border : 2px solid #8EB3E7;
+}
img.thumbnail {
- border-style: solid;
- border-width: 3px;
- border-color: white;
+ display : block;
+ float : none;
+ padding : .5em;
}
-img.selected {
+#thumbnails a img.selected {
border-color: black;
+ cursor : default;
+ opacity:0.4;
+ filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>
-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.min.js"></script>
+</head>
<body id="opac-imageviewer">
-<div id="largeCover"><img id="largeCoverImg" alt="Large view" /></div>
-[% IF OPACLocalCoverImages == 1 %]
-[% FOREACH img IN images %]
-[% IF img %]
-<a href='#' onclick='showCover([% img %])'><img class='thumbnail' id='[% img %]' src='/cgi-bin/koha/opac-image.pl?imagenumber=[% img %]&thumbnail=1' alt='Image'/></a>
-[% END %]
-[% END %]
-[% biblio.title %] [% biblio.author %]
+[% IF ( OpacNav ) %]<div id="doc3" class="yui-t1">[% ELSE %]<div id="doc3" class="yui-t7">[% END %]
+ <div id="bd">
+[% INCLUDE 'masthead.inc' %]
+ <div id="yui-main">
+ <div class="yui-b">
+ <div class="yui-ge">
+ <div class="container">
+ <h1 class="title">Images for [% IF ( BiblioDefaultViewmarc ) %]<a class="title" href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% biblionumber |url %]" title="View details for this title">
+ [% ELSE %]
+ [% IF ( BiblioDefaultViewisbd ) %]<a class="title" href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% biblionumber |url %]" title="View details for this title">
+ [% ELSE %]<a class="title" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber |url %]" title="View details for this title">
+ [% END %]
+ [% END %][% biblio.title %]</a> [% biblio.author %]</h1>
+ <div class="yui-u first">
+
+ <div id="largeCover"><img id="largeCoverImg" alt="" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% imagenumber %]" /></div></div>
+
+ [% IF OPACLocalCoverImages == 1 %]
+ <div class="yui-u"><div id="thumbnails">
+ [% FOREACH img IN images %]
+ [% IF img %]
+ <a href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblionumber %]&imagenumber=[% img %]" onclick="showCover([% img %]); return false;">
+ [% IF ( imagenumber == img ) %]<img class="thumbnail selected" id="[% img %]" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% img %]&thumbnail=1" alt=""/>
+ [% ELSE %]
+ <img class="thumbnail" id="[% img %]" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% img %]&thumbnail=1" alt=""/>
+ [% END %]
+ </a>
+ [% END %]
+ [% END %]
+ </div></div>
+ </div>
[% ELSE %]
Unfortunately, images are not enabled for this catalog at this time.
[% END %]
-</body>
-</html>
+
+</div>
+</div>
+</div>
+[% IF ( OpacNav ) %]
+<div class="yui-b"><div id="leftmenus" class="container">
+[% INCLUDE 'navigation.inc' %]
+</div></div>
+[% END %]
+</div>
+[% INCLUDE 'opac-bottom.inc' %]
diff --git a/opac/opac-imageviewer.pl b/opac/opac-imageviewer.pl
index 6d2f326..cddc45c 100755
--- a/opac/opac-imageviewer.pl
+++ b/opac/opac-imageviewer.pl
@@ -38,12 +38,15 @@ my ( $template, $borrowernumber, $cookie ) = get_template_and_user(
);
my $biblionumber = $query->param('biblionumber') || $query->param('bib');
+my $imagenumber = $query ->param('imagenumber');
my ($count, $biblio) = GetBiblio($biblionumber);
if (C4::Context->preference("OPACLocalCoverImages")) {
my @images = ListImagesForBiblio($biblionumber);
$template->{VARS}->{'OPACLocalCoverImages'} = 1;
$template->{VARS}->{'images'} = \@images;
+ $template->{VARS}->{'biblionumber'} = $biblionumber;
+ $template->{VARS}->{'imagenumber'} = $imagenumber;
}
$template->{VARS}->{'biblio'} = $biblio;
--
1.7.3
More information about the Koha-patches
mailing list