[% USE Asset %]
[% SET footerjs = 1 %]
[% INCLUDE 'doc-head-open.inc' %]
-<title>Koha › Catalog › Details for [% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</title>
+<title>Koha › Catalog › [% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %] › Images</title>
[% INCLUDE 'doc-head-close.inc' %]
-[% IF ( LocalCoverImages == 1 ) %]
<style>
+#largeCover {
+ background: transparent url("[% interface | html %]/[% theme | html %]/img/spinner-small.gif") center center no-repeat;
+}
#largeCoverImg {
border : 1px solid #CCCCCC;
display : block;
margin : auto;
padding : 1em;
}
-#thumbnails {
- text-align : center;
-}
-#thumbnails a img {
- border : 1px solid #0000CC;
-}
-img.thumbnail {
- display : block;
- float : none;
- margin: 0 5px 5px 0;
- padding : .5em;
-}
-#thumbnails a img.selected {
- border-color: black;
+.thumbnails img.selected {
cursor : default;
opacity:0.4;
- filter:alpha(opacity=40); /* For IE8 and earlier */
}
-</style>[% END %]
+</style>
</head>
<body id="catalog_imageviewer" class="catalog">
[% INCLUDE 'header.inc' %]
[% INCLUDE 'cat-search.inc' %]
-<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>
+<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>
<div class="main container-fluid">
<div class="row">
[% IF ( LocalCoverImages == 1 ) %]
[% IF ( images.size > 0 ) %]
<div class="row">
- <div class="col-md-8">
- <div id="largeCover">
- <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" />
- </div></div>
-
- <div class="col-md-4"><div id="thumbnails">
-
- [% FOREACH img IN images %]
- [% IF img %]
- <a class="show_cover" data-coverimg="[% img | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&imagenumber=[% img | html %]">
- [% IF ( imagenumber == img ) %]
- <img class="thumbnail selected" id="[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" />
- [% ELSE %]
- <img class="thumbnail" id="[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" />
- [% END %]
- </a>
+ <div class="col-md-8">
+ <div id="largeCover">
+ <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" />
+ </div>
+ [% IF ( CAN_user_tools_upload_local_cover_images ) %]
+ <hr />
+ <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>
+ </p>
[% END %]
- [% END %]
- </div></div>
- </div>
+ </div>
+
+ <div class="col-md-4">
+ <ul class="thumbnails">
+ [% FOREACH img IN images %]
+ [% IF img %]
+ <li id="imagenumber-[% img | html %]" class="thumbnail">
+ <a class="show_cover" data-coverimg="[% img | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&imagenumber=[% img | html %]">
+ [% IF ( imagenumber == img ) %]
+ <img class="selected" id="thumbnail_[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" />
+ [% ELSE %]
+ <img id="thumbnail_[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" />
+ [% END %]
+ </a>
+ [% IF CAN_user_tools_upload_local_cover_images %]
+ <a href="#" class="remove" data-coverimg="[% img | html %]"><i class="fa fa-trash"></i> Delete image</a>
+ [% END %]
+ </li>
+ [% END # /IF img %]
+ [% END # /FOREACH img %]
+ </ul> <!-- /ul.thumbnails -->
+ </div> <!-- /.col-md-4 -->
+ </div> <!-- /.row -->
[% ELSE %]
<div class="dialog message">There are no images for this record.</div>
+ [% IF ( CAN_user_tools_upload_local_cover_images ) %]
+ <hr />
+ <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>
+ </p>
+ [% END %]
[% END %]
[% ELSE %]
<div class="dialog message">Local images have not been enabled by your system administrator.</div>
[% INCLUDE 'catalog-strings.inc' %]
[% Asset.js("js/catalog.js") | $raw %]
<script>
+ var interface = "[% interface | html %]";
+ var theme = "[% theme | html %]";
$(document).ready(function(){
showCover([% imagenumber | html %]);
$(".show_cover").on("click",function(e){
e.preventDefault();
- var coverimg = $(this).data("coverimg");
- showCover(coverimg);
+ if( $(this).find("img").hasClass("selected") ){
+ return false;
+ } else {
+ $("#largeCoverImg").attr( "src", interface + "/" + theme + "/img/spinner-small.gif");
+ var imagenumber = $(this).data("coverimg");
+ showCover( imagenumber );
+ }
});
+
+ $('.thumbnails .remove').on("click", function(e) {
+ e.preventDefault();
+ var result = confirm(_("Are you sure you want to delete this cover image?"));
+ var imagenumber = $(this).data("coverimg");
+ if ( result == true ) {
+ removeLocalImage(imagenumber);
+ }
+ });
+
});
+ function removeLocalImage(imagenumber) {
+ var thumbnail = $("#imagenumber-" + imagenumber );
+ var copy = thumbnail.html();
+ thumbnail.find("img").css("opacity", ".2");
+ thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");
+
+ $.ajax({
+ url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
+ success: function(data) {
+ $(data).each( function() {
+ if ( this.deleted == 1 ) {
+ location.href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=" + biblionumber;
+ } else {
+ thumbnail.html( copy );
+ alert(_("An error occurred on deleting this image"));
+ }
+ });
+ },
+ error: function(data) {
+ thumbnail.html( copy );
+ alert(_("An error occurred on deleting this image"));
+ }
+ });
+ }
+
function showCover(img) {
- $('.thumbnail').attr('class', 'thumbnail');
- $('#largeCoverImg').attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img);
- $('#' + img + '.thumbnail').attr('class', 'thumbnail selected');
+ $('.thumbnail img').removeClass("selected");
+ $('#largeCoverImg').attr("src","").attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img);
+ $('#thumbnail_' + img).addClass("selected");
}
</script>
[% END %]
projects / koha.git / blobdiff