koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt

   1 [% USE raw %]
   2 [% USE Asset %]
   3 [% SET footerjs = 1 %]
   4 [% INCLUDE 'doc-head-open.inc' %]
   5 <title>Koha &rsaquo; Catalog &rsaquo; Details for [% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</title>
   6 [% INCLUDE 'doc-head-close.inc' %]
   7 [% IF ( LocalCoverImages == 1 ) %]
   8 <style>
   9 #largeCoverImg {
  10     border : 1px solid #CCCCCC;
  11     display : block;
  12     margin : auto;
  13     padding : 1em;
  14 }
  15 #thumbnails {
  16     text-align : center;
  17 }
  18 #thumbnails a img {
  19     border : 1px solid #0000CC;
  20 }
  21 img.thumbnail {
  22     display : block;
  23     float : none;
  24     margin: 0 5px 5px 0;
  25     padding : .5em;
  26 }
  27
  28 #thumbnails a img.selected {
  29     border-color: black;
  30     cursor : default;
  31     opacity:0.4;
  32     filter:alpha(opacity=40); /* For IE8 and earlier */
  33 }
  34 </style>[% END %]
  35 </head>
  36
  37 <body id="catalog_imageviewer" class="catalog">
  38
  39 [% INCLUDE 'header.inc' %]
  40 [% INCLUDE 'cat-search.inc' %]
  41
  42 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  &rsaquo; Images for <i>[% biblio.title | html %]  [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</i></div>
  43
  44 <div class="main container-fluid">
  45     <div class="row">
  46         <div class="col-sm-10 col-sm-push-2">
  47             <main>
  48
  49 [% INCLUDE 'cat-toolbar.inc' %]
  50
  51 <h3>Images for <i>[% biblio.title | html %]</i></h3>
  52 <h4>[% biblio.author | html %]</h4>
  53
  54 [% IF ( LocalCoverImages == 1 ) %]
  55     [% IF ( images.size > 0 ) %]
  56         <div class="row">
  57         <div class="col-md-8">
  58         <div id="largeCover">
  59             <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" />
  60         </div></div>
  61
  62         <div class="col-md-4"><div id="thumbnails">
  63
  64             [% FOREACH img IN images %]
  65                 [% IF img %]
  66                 <a class="show_cover" data-coverimg="[% img | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&amp;imagenumber=[% img | html %]">
  67                     [% IF ( imagenumber == img ) %]
  68                         <img class="thumbnail selected" id="[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&amp;thumbnail=1" alt="Thumbnail" />
  69                     [% ELSE %]
  70                         <img class="thumbnail" id="[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&amp;thumbnail=1" alt="Thumbnail" />
  71                     [% END %]
  72                 </a>
  73                 [% END %]
  74             [% END %]
  75         </div></div>
  76         </div>
  77     [% ELSE %]
  78         <div class="dialog message">There are no images for this record.</div>
  79     [% END %]
  80 [% ELSE %]
  81     <div class="dialog message">Local images have not been enabled by your system administrator.</div>
  82 [% END %]
  83
  84             </main>
  85         </div> <!-- /.col-sm-10.col-sm-push-2 -->
  86
  87         <div class="col-sm-2 col-sm-pull-10">
  88             <aside>
  89                 [% INCLUDE 'biblio-view-menu.inc' %]
  90             </aside>
  91         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
  92      </div> <!-- /.row -->
  93
  94 [% MACRO jsinclude BLOCK %]
  95     [% INCLUDE 'catalog-strings.inc' %]
  96     [% Asset.js("js/catalog.js") | $raw %]
  97     <script>
  98         $(document).ready(function(){
  99             showCover([% imagenumber | html %]);
 100             $(".show_cover").on("click",function(e){
 101                 e.preventDefault();
 102                 var coverimg = $(this).data("coverimg");
 103                 showCover(coverimg);
 104             });
 105         });
 106
 107         function showCover(img) {
 108             $('.thumbnail').attr('class', 'thumbnail');
 109             $('#largeCoverImg').attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img);
 110             $('#' + img + '.thumbnail').attr('class', 'thumbnail selected');
 111         }
 112     </script>
 113 [% END %]
 114
 115 [% INCLUDE 'intranet-bottom.inc' %]