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 %]