From eff760b352a8b8722ac454663a7bcb6f97826d38 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

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 ++
 .../opac-tmpl/prog/en/modules/opac-detail.tt  |  4 +-
 .../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 21dc08ff39..f904af2442 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 6534d1b656..65256ad48a 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 d6633e1351..8dd7add870 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 1edc0b4a07..444c127ced 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 c34c58a997..e3bddb4454 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;
-- 
2.20.1