Bug 14544: QA fixes - some minor bug fixes
[koha.git] / koha-tmpl / opac-tmpl / bootstrap / en / modules / opac-imageviewer.tt
1 [% USE Koha %]
2 [% INCLUDE 'doc-head-open.inc' %]
3 <title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha online[% END %] catalog &rsaquo; Images for: [% biblio.title |html %]</title>
4 [% INCLUDE 'doc-head-close.inc' %]
5 [% BLOCK cssinclude %]
6     <style type="text/css">
7     #largeCoverImg {
8         border : 1px solid #CCCCCC;
9         display : block;
10         margin : auto;
11         padding : 1em;
12     }
13     #thumbnails {
14         text-align : center;
15     }
16     #thumbnails a img {
17         border : 2px solid #8EB3E7;
18     }
19     img.thumbnail {
20         display : block;
21         float : none;
22         margin : .3em 0;
23         padding : .5em;
24     }
25
26     #thumbnails a img.selected {
27         border-color: black;
28         cursor : default;
29         opacity:0.4;
30         filter:alpha(opacity=40); /* For IE8 and earlier */
31     }
32     </style>
33 [% END %]
34 </head>
35 [% INCLUDE 'bodytag.inc' bodyid='opac-imageviewer' %]
36 [% INCLUDE 'masthead.inc' %]
37
38     <div class="main">
39         <ul class="breadcrumb">
40             <li><a href="/cgi-bin/koha/opac-main.pl">Home</a> <span class="divider">&rsaquo;</span></li>
41             <li>
42                 [% IF ( BiblioDefaultViewmarc ) %]
43                     <a href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% biblionumber |url %]">
44                 [% ELSE %]
45                     [% IF ( BiblioDefaultViewisbd ) %]
46                         <a href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% biblionumber |url %]">
47                     [% ELSE %]
48                         <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber |url %]">
49                     [% END %]
50                 [% END %][% biblio.title %]</a> <span class="divider">&rsaquo;</span>
51             </li>
52             <li><a href="#">Images</a></li>
53         </ul>
54
55         <div class="container-fluid">
56             <div class="row-fluid">
57                 [% IF ( OpacNav || OpacNavBottom ) %]
58                     <div class="span2">
59                         <div id="navigation">
60                             [% INCLUDE 'navigation.inc' %]
61                         </div>
62                     </div>
63                     <div class="span10">
64                 [% ELSE %]
65                     <div class="span12">
66                 [% END %]
67                     <div class="row-fluid">
68                         <div class="span9">
69                             <h1 class="title">Images for
70                                 [% IF ( BiblioDefaultViewmarc ) %]
71                                     <a class="title" href="/cgi-bin/koha/opac-MARCdetail.pl?biblionumber=[% biblionumber |url %]" title="View details for this title">
72                                 [% ELSE %]
73                                     [% IF ( BiblioDefaultViewisbd ) %]
74                                         <a class="title" href="/cgi-bin/koha/opac-ISBDdetail.pl?biblionumber=[% biblionumber |url %]" title="View details for this title">
75                                     [% ELSE %]
76                                         <a class="title" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber |url %]" title="View details for this title">
77                                     [% END %]
78                                 [% END %][% biblio.title %]</a> [% biblio.author %]
79                             </h1>
80                         </div> <!-- / .span9 -->
81                     </div> <!-- / .row-fluid -->
82
83                     <div class="row-fluid">
84                         <div class="span9">
85                             <div id="imageviewer">
86                                 <div id="largeCover">
87                                     <img id="largeCoverImg" alt="" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% imagenumber %]" />
88                                 </div>
89                             </div> <!-- / #imageviewer -->
90                         </div> <!-- / .span12 -->
91
92                         [% IF OPACLocalCoverImages == 1 %]
93                             <div class="span3">
94                                 <div id="thumbnails">
95                                     [% FOREACH img IN images %]
96                                         [% IF img %]
97                                             <a href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblionumber %]&amp;imagenumber=[% img %]" onclick="showCover([% img %]); return false;">
98                                             [% IF ( imagenumber == img ) %]
99                                                 <img class="thumbnail selected" id="[% img %]" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% img %]&amp;thumbnail=1" alt="Thumbnail"/>
100                                             [% ELSE %]
101                                                 <img class="thumbnail" id="[% img %]" src="/cgi-bin/koha/opac-image.pl?imagenumber=[% img %]&amp;thumbnail=1" alt="Thumbnail"/>
102                                             [% END %]
103                                             </a>
104                                         [% END %]
105                                     [% END %]
106                                 </div>
107                             </div>
108                         [% ELSE %]
109                             Unfortunately, images are not enabled for this catalog at this time.
110                         [% END %]
111                     </div> <!-- / .row-fluid -->
112                 </div> <!-- / .span10/12 -->
113             </div> <!-- / .row-fluid -->
114         </div> <!-- / .container-fluid -->
115     </div> <!-- / .main -->
116
117 [% INCLUDE 'opac-bottom.inc' %]
118 [% BLOCK jsinclude %]
119 <script type="text/javascript">
120     //<![CDATA[
121         $(document).ready(function(){
122             $("#largeCoverImg").attr("src","[% interface %]/[% theme %]/images/loading.gif");
123             showCover([% imagenumber %]);
124         });
125
126         function showCover(img) {
127             $('.thumbnail').attr('class', 'thumbnail');
128             $('#largeCoverImg').attr('src', '/cgi-bin/koha/opac-image.pl?imagenumber=' + img);
129             $('#' + img + '.thumbnail').attr('class', 'thumbnail selected');
130         }
131     //]]>
132 </script>
133 [% END %]