| 
      
            Lines 2-37
          
      
      
        Link Here
      
     | 
  
        
          | 2 | 
          [% USE Asset %]  | 
          2 | 
          [% USE Asset %]  | 
        
        
          | 3 | 
          [% SET footerjs = 1 %]  | 
          3 | 
          [% SET footerjs = 1 %]  | 
        
        
          | 4 | 
          [% INCLUDE 'doc-head-open.inc' %]  | 
          4 | 
          [% INCLUDE 'doc-head-open.inc' %]  | 
        
          
            
              | 5 | 
              <title>Koha › Catalog › Details for [% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</title>  | 
              5 | 
              <title>Koha › Catalog › [% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %] › Images</title>  | 
            
        
          | 6 | 
          [% INCLUDE 'doc-head-close.inc' %]  | 
          6 | 
          [% INCLUDE 'doc-head-close.inc' %]  | 
        
            
              | 7 | 
              [% IF ( LocalCoverImages == 1 ) %]  | 
               | 
               | 
            
        
          | 8 | 
          <style>  | 
          7 | 
          <style>  | 
        
            
               | 
               | 
              8 | 
              #largeCover { | 
            
            
              | 9 | 
                  background: transparent url("[% interface | html %]/[% theme | html %]/img/spinner-small.gif") center center no-repeat; | 
            
            
              | 10 | 
              }  | 
            
        
          | 9 | 
          #largeCoverImg { | 
          11 | 
          #largeCoverImg { | 
        
        
          | 10 | 
              border : 1px solid #CCCCCC;  | 
          12 | 
              border : 1px solid #CCCCCC;  | 
        
        
          | 11 | 
              display : block;  | 
          13 | 
              display : block;  | 
        
        
          | 12 | 
              margin : auto;  | 
          14 | 
              margin : auto;  | 
        
        
          | 13 | 
              padding : 1em;  | 
          15 | 
              padding : 1em;  | 
        
        
          | 14 | 
          }  | 
          16 | 
          }  | 
        
            
              | 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 | 
           | 
          17 | 
           | 
        
          
            
              | 28 | 
              #thumbnails a img.selected { | 
              18 | 
              .thumbnails img.selected { | 
            
            
              | 29 | 
                  border-color: black;  | 
               | 
               | 
            
        
          | 30 | 
              cursor : default;  | 
          19 | 
              cursor : default;  | 
        
        
          | 31 | 
              opacity:0.4;  | 
          20 | 
              opacity:0.4;  | 
        
            
              | 32 | 
                  filter:alpha(opacity=40); /* For IE8 and earlier */  | 
               | 
               | 
            
        
          | 33 | 
          }  | 
          21 | 
          }  | 
        
          
            
              | 34 | 
              </style>[% END %]  | 
              22 | 
              </style>  | 
            
        
          | 35 | 
          </head>  | 
          23 | 
          </head>  | 
        
        
          | 36 | 
           | 
          24 | 
           | 
        
        
          | 37 | 
          <body id="catalog_imageviewer" class="catalog">  | 
          25 | 
          <body id="catalog_imageviewer" class="catalog">  | 
        
  
    | 
      
            Lines 39-45
          img.thumbnail {
      
      
        Link Here
      
     | 
  
        
          | 39 | 
          [% INCLUDE 'header.inc' %]  | 
          27 | 
          [% INCLUDE 'header.inc' %]  | 
        
        
          | 40 | 
          [% INCLUDE 'cat-search.inc' %]  | 
          28 | 
          [% INCLUDE 'cat-search.inc' %]  | 
        
        
          | 41 | 
           | 
          29 | 
           | 
        
          
            
              | 42 | 
              <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> › <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  › Images for <i>[% biblio.title | html %]  [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</i></div>  | 
              30 | 
              <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> › <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  › <a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblionumber | uri %]"><i>[% biblio.title | html %]  [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</i></a> › Images</div>  | 
            
        
          | 43 | 
           | 
          31 | 
           | 
        
        
          | 44 | 
          <div class="main container-fluid">  | 
          32 | 
          <div class="main container-fluid">  | 
        
        
          | 45 | 
              <div class="row">  | 
          33 | 
              <div class="row">  | 
        
  
    | 
      
            Lines 54-81
          img.thumbnail {
      
      
        Link Here
      
     | 
  
        
          | 54 | 
          [% IF ( LocalCoverImages == 1 ) %]  | 
          42 | 
          [% IF ( LocalCoverImages == 1 ) %]  | 
        
        
          | 55 | 
              [% IF ( images.size > 0 ) %]  | 
          43 | 
              [% IF ( images.size > 0 ) %]  | 
        
        
          | 56 | 
                  <div class="row">  | 
          44 | 
                  <div class="row">  | 
        
          
            
              | 57 | 
                      <div class="col-md-8">  | 
              45 | 
                          <div class="col-md-8">  | 
            
            
              | 58 | 
                      <div id="largeCover">  | 
              46 | 
                              <div id="largeCover">  | 
            
            
              | 59 | 
                          <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" />  | 
              47 | 
                                  <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" />  | 
            
            
              | 60 | 
                      </div></div>  | 
              48 | 
                              </div>  | 
            
            
              | 61 | 
               | 
              49 | 
                              [% IF ( CAN_user_tools_upload_local_cover_images ) %]  | 
            
            
              | 62 | 
                      <div class="col-md-4"><div id="thumbnails">  | 
              50 | 
                                  <hr />  | 
            
            
              | 63 | 
               | 
              51 | 
                                  <p>Upload an image file: <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&filetype=image"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>  | 
            
            
              | 64 | 
                          [% FOREACH img IN images %]  | 
              52 | 
                                  </p>  | 
            
            
              | 65 | 
                              [% IF img %]  | 
               | 
               | 
            
            
              | 66 | 
                              <a class="show_cover" data-coverimg="[% img | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&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 %]&thumbnail=1" alt="Thumbnail" />  | 
            
            
              | 69 | 
                                  [% ELSE %]  | 
            
            
              | 70 | 
                                      <img class="thumbnail" id="[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" />  | 
            
            
              | 71 | 
                                  [% END %]  | 
            
            
              | 72 | 
                              </a>  | 
            
        
          | 73 | 
                          [% END %]  | 
          53 | 
                          [% END %]  | 
        
          
            
              | 74 | 
                          [% END %]  | 
              54 | 
                          </div>  | 
            
            
              | 75 | 
                      </div></div>  | 
              55 | 
               | 
            
            
              | 76 | 
                      </div>  | 
              56 | 
                          <div class="col-md-4">  | 
            
            
               | 
               | 
              57 | 
                              <ul class="thumbnails">  | 
            
            
              | 58 | 
                                  [% FOREACH img IN images %]  | 
            
            
              | 59 | 
                                      [% IF img %]  | 
            
            
              | 60 | 
                                          <li id="imagenumber-[% img | html %]" class="thumbnail">  | 
            
            
              | 61 | 
                                              <a class="show_cover" data-coverimg="[% img | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&imagenumber=[% img | html %]">  | 
            
            
              | 62 | 
                                                  [% IF ( imagenumber == img ) %]  | 
            
            
              | 63 | 
                                                      <img class="selected" id="thumbnail_[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" />  | 
            
            
              | 64 | 
                                                  [% ELSE %]  | 
            
            
              | 65 | 
                                                      <img id="thumbnail_[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" />  | 
            
            
              | 66 | 
                                                  [% END %]  | 
            
            
              | 67 | 
                                              </a>  | 
            
            
              | 68 | 
                                              [% IF CAN_user_tools_upload_local_cover_images %]  | 
            
            
              | 69 | 
                                                  <a href="#" class="remove" data-coverimg="[% img | html %]"><i class="fa fa-trash"></i> Delete image</a>  | 
            
            
              | 70 | 
                                              [% END %]  | 
            
            
              | 71 | 
                                          </li>  | 
            
            
              | 72 | 
                                      [% END # /IF img %]  | 
            
            
              | 73 | 
                                  [% END # /FOREACH img %]  | 
            
            
              | 74 | 
                              </ul> <!-- /ul.thumbnails -->  | 
            
            
              | 75 | 
                          </div> <!-- /.col-md-4 -->  | 
            
            
              | 76 | 
                      </div> <!-- /.row -->  | 
            
        
          | 77 | 
              [% ELSE %]  | 
          77 | 
              [% ELSE %]  | 
        
        
          | 78 | 
                  <div class="dialog message">There are no images for this record.</div>  | 
          78 | 
                  <div class="dialog message">There are no images for this record.</div>  | 
        
            
               | 
               | 
              79 | 
                      [% IF ( CAN_user_tools_upload_local_cover_images ) %]  | 
            
            
              | 80 | 
                          <hr />  | 
            
            
              | 81 | 
                          <p>Upload an image file: <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&filetype=image"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>  | 
            
            
              | 82 | 
                          </p>  | 
            
            
              | 83 | 
                      [% END %]  | 
            
        
          | 79 | 
              [% END %]  | 
          84 | 
              [% END %]  | 
        
        
          | 80 | 
          [% ELSE %]  | 
          85 | 
          [% ELSE %]  | 
        
        
          | 81 | 
              <div class="dialog message">Local images have not been enabled by your system administrator.</div>  | 
          86 | 
              <div class="dialog message">Local images have not been enabled by your system administrator.</div>  | 
        
  
    | 
      
            Lines 95-113
          img.thumbnail {
      
      
        Link Here
      
     | 
  
        
          | 95 | 
              [% INCLUDE 'catalog-strings.inc' %]  | 
          100 | 
              [% INCLUDE 'catalog-strings.inc' %]  | 
        
        
          | 96 | 
              [% Asset.js("js/catalog.js") | $raw %] | 
          101 | 
              [% Asset.js("js/catalog.js") | $raw %] | 
        
        
          | 97 | 
              <script>  | 
          102 | 
              <script>  | 
        
            
               | 
               | 
              103 | 
                      var interface = "[% interface | html %]";  | 
            
            
              | 104 | 
                      var theme = "[% theme | html %]";  | 
            
        
          | 98 | 
                  $(document).ready(function(){ | 
          105 | 
                  $(document).ready(function(){ | 
        
        
          | 99 | 
                      showCover([% imagenumber | html %]);  | 
          106 | 
                      showCover([% imagenumber | html %]);  | 
        
        
          | 100 | 
                      $(".show_cover").on("click",function(e){ | 
          107 | 
                      $(".show_cover").on("click",function(e){ | 
        
        
          | 101 | 
                          e.preventDefault();  | 
          108 | 
                          e.preventDefault();  | 
        
          
            
              | 102 | 
                              var coverimg = $(this).data("coverimg"); | 
              109 | 
                              if( $(this).find("img").hasClass("selected") ){ | 
            
            
              | 103 | 
                              showCover(coverimg);  | 
              110 | 
                                  return false;  | 
            
            
               | 
               | 
              111 | 
                              } else { | 
            
            
              | 112 | 
                                  $("#largeCoverImg").attr( "src", interface + "/" + theme + "/img/spinner-small.gif"); | 
            
            
              | 113 | 
                                  var imagenumber = $(this).data("coverimg"); | 
            
            
              | 114 | 
                                  showCover( imagenumber );  | 
            
            
              | 115 | 
                              }  | 
            
        
          | 104 | 
                      });  | 
          116 | 
                      });  | 
        
            
               | 
               | 
              117 | 
               | 
            
            
              | 118 | 
                          $('.thumbnails .remove').on("click", function(e) { | 
            
            
              | 119 | 
                              e.preventDefault();  | 
            
            
              | 120 | 
                              var result = confirm(_("Are you sure you want to delete this cover image?")); | 
            
            
              | 121 | 
                              var imagenumber = $(this).data("coverimg"); | 
            
            
              | 122 | 
                              if ( result == true ) { | 
            
            
              | 123 | 
                                  removeLocalImage(imagenumber);  | 
            
            
              | 124 | 
                              }  | 
            
            
              | 125 | 
                          });  | 
            
            
              | 126 | 
               | 
            
        
          | 105 | 
                  });  | 
          127 | 
                  });  | 
        
        
          | 106 | 
           | 
          128 | 
           | 
        
            
               | 
               | 
              129 | 
                      function removeLocalImage(imagenumber) { | 
            
            
              | 130 | 
                          var thumbnail = $("#imagenumber-" + imagenumber ); | 
            
            
              | 131 | 
                          var copy = thumbnail.html();  | 
            
            
              | 132 | 
                          thumbnail.find("img").css("opacity", ".2"); | 
            
            
              | 133 | 
                          thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />"); | 
            
            
              | 134 | 
               | 
            
            
              | 135 | 
                          $.ajax({ | 
            
            
              | 136 | 
                              url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,  | 
            
            
              | 137 | 
                              success: function(data) { | 
            
            
              | 138 | 
                                  $(data).each( function() { | 
            
            
              | 139 | 
                                      if ( this.deleted == 1 ) { | 
            
            
              | 140 | 
                                          location.href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=" + biblionumber;  | 
            
            
              | 141 | 
                                      } else { | 
            
            
              | 142 | 
                                          thumbnail.html( copy );  | 
            
            
              | 143 | 
                                          alert(_("An error occurred on deleting this image")); | 
            
            
              | 144 | 
                                      }  | 
            
            
              | 145 | 
                                  });  | 
            
            
              | 146 | 
                              },  | 
            
            
              | 147 | 
                              error: function(data) { | 
            
            
              | 148 | 
                                  thumbnail.html( copy );  | 
            
            
              | 149 | 
                                  alert(_("An error occurred on deleting this image")); | 
            
            
              | 150 | 
                              }  | 
            
            
              | 151 | 
                          });  | 
            
            
              | 152 | 
                      }  | 
            
            
              | 153 | 
               | 
            
        
          | 107 | 
                  function showCover(img) { | 
          154 | 
                  function showCover(img) { | 
        
          
            
              | 108 | 
                          $('.thumbnail').attr('class', 'thumbnail'); | 
              155 | 
                          $('.thumbnail img').removeClass("selected"); | 
            
            
              | 109 | 
                          $('#largeCoverImg').attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img); | 
              156 | 
                          $('#largeCoverImg').attr("src","").attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img); | 
            
            
              | 110 | 
                          $('#' + img + '.thumbnail').attr('class', 'thumbnail selected'); | 
              157 | 
                          $('#thumbnail_' + img).addClass("selected"); | 
            
        
          | 111 | 
                  }  | 
          158 | 
                  }  | 
        
        
          | 112 | 
              </script>  | 
          159 | 
              </script>  | 
        
        
          | 113 | 
          [% END %]  | 
          160 | 
          [% END %]  | 
        
            
              | 114 | 
              -   | 
               | 
               |