From 4f9a7711c6e4b00b915b990150c2524654ef356d Mon Sep 17 00:00:00 2001 From: Owen Leonard <oleonard@myacpl.org> Date: Tue, 13 Dec 2011 12:22:09 -0500 Subject: [PATCH] Bug 1633 - Add ability to take book cover images from local img db Content-Type: text/plain; charset="UTF-8" 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 Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com> --- 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-image.pl | 2 +- opac/opac-imageviewer.pl | 3 + 5 files changed, 76 insertions(+), 20 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..8dd7add 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="Thumbnail"/> + [% ELSE %] + <img class="thumbnail" id="[% img %]" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% img %]&thumbnail=1" alt="Thumbnail"/> + [% 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-image.pl b/opac/opac-image.pl index 1edc0b4..444c127 100755 --- a/opac/opac-image.pl +++ b/opac/opac-image.pl @@ -29,7 +29,7 @@ use C4::Images; $|=1; -my $DEBUG = 1; +my $DEBUG = 0; my $data = new CGI; my $imagenumber; diff --git a/opac/opac-imageviewer.pl b/opac/opac-imageviewer.pl index c34c58a..e3bddb4 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'} = $images[0] || ''; } $template->{VARS}->{'biblio'} = $biblio; -- 1.7.2.5