From 8a9515505fe475acd8a15439fca44c49741eefd9 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 - [SIGNED-OFF] 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>
Signed-off-by: Magnus Enger <magnus@enger.priv.no>
Signed-off-by: Koustubha Kale <kmkale@anantcorp.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 6534d1b..65256ad 100755
--- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt
+++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt
@@ -991,10 +991,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 %]&amp;imagenumber=[% image %]"><img alt="" src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;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 &rsaquo; 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 %]&amp;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 %]&amp;thumbnail=1" alt="Thumbnail"/>
+				[% ELSE %]
+				<img class="thumbnail" id="[% img %]" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% img %]&amp;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.5.4