Attachment #119919 for bug #28180

View | Details | Raw Unified | Return to bug 28180
Collapse All | Expand All




    width: 75px;
}

.bookcover {
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;

    .no-image {
        margin-bottom: 10px;

    }
}

#biblio-cover-slider {
    border: 1px solid #b9d8d9;
    border-radius: 3px;
    margin: 5px;
    padding: 10px 5px 5px 5px;
    min-height: 175px;
}

.cover-slides {
    background: #FFF url("../img/spinner-small.gif") center center no-repeat;

    .hint {
        font-size: 90%;
        padding: .5em 0;
    }

    a {
        &.nav-active {
            &:link,
            &:visited {
                color: #85ca11;
            }
        }
    }
}

td {
    &.bookcover {
        background: #FFF url("../img/spinner-small.gif") center center no-repeat;
        min-width: 120px;
        text-align: center;
    }

    .cover-slides {
        background: transparent none;
        border: 0;
        margin: 0;
        min-height: unset;
        padding: 0;
    }
}

.cover-image {
    display: none;

    img {
        height: auto;
        max-width: 100%;
    }
}

.cover-nav {
    display: inline-block;
    padding: 3px 4px;
}

div {
    &.required_label {
        display: none;

Lines 271-281 $.widget.bridge('uitooltip', $.ui.tooltip); Link Here

(-)a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc (-5 lines)
271		271
272	[% IF OPACLocalCoverImages %]	272	[% IF OPACLocalCoverImages %]
273	[% Asset.js("js/localcovers.js") \| $raw %]	273	[% Asset.js("js/localcovers.js") \| $raw %]
274	<script>
275
276	var NO_LOCAL_JACKET = _("No cover image available");
277
278	</script>
279	[% END %]	274	[% END %]
280		275
281	[% IF ( BakerTaylorEnabled ) %]	276	[% IF ( BakerTaylorEnabled ) %]




    [% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %]
        [% Asset.css("lib/verovio/midiplayer.css") | $raw %]
    [% END %]
    [% Asset.css("lib/Chocolat/css/chocolat.css") | $raw %]
</head>
[% BLOCK cssinclude %][% END %]
[% INCLUDE 'bodytag.inc' bodyid='opac-detail' bodyclass='scrollto' %]

            <div class="col-lg-9">
                <div id="catalogue_detail_biblio" class="maincontent" data-biblionumber="[% biblio.biblionumber | html %]">

                    <div class="bookcover">
                        [% IF ( biblio.title ) %]
                            [% img_title = biblio.title %]
                        [% ELSE %]
                            [% img_title = biblio.biblionumber %]
                        [% END %]

                        <div id="biblio-cover-slider" class="cover-slider">
                            [% IF ( OPACLocalCoverImages ) %]
                                [% IF localimages.count %]
                                    [% FOREACH image IN localimages %]
                                        <div class="cover-image local-coverimg">
                                            <a href="/cgi-bin/koha/opac-image.pl?imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
                                                <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" data-link="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" />
                                            </a>
                                            <div class="hint">Local cover image</div>
                                        </div>
                                    [% END %]
                                [% END %]
                            [% END %]

                            [% IF ( AdlibrisEnabled && normalized_isbn ) %]
                                <div class="cover-image" id="adlibris-coverimg">
                                    <a href="[% AdlibrisURL | url %]?isbn=[% normalized_isbn | uri %]" title="Addlibris cover image">
                                        <img src="[% AdlibrisURL | url %]?isbn=[% normalized_isbn | uri %]" class="adlibris-cover-big" alt="Adlibris cover image" />
                                    </a>
                                    <div class="hint">Image from Adlibris</div>
                                </div>
                            [% END %]
                            <img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | html %].01.MZZZZZZZ.jpg" alt="Cover image" /></a>
                        [% END %]

                            [% IF ( OPACAmazonCoverImages && normalized_isbn) %]
                                <div class="cover-image" id="amazon-bookcoverimg">
                                    <a href="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | uri %].01.LZZZZZZZ.jpg" title="Amazon cover image">
                                        <img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | uri %].01.MZZZZZZZ.jpg" alt="Amazon cover image" data-link="http://www.amazon[% AmazonTld | uri %]/gp/reader/[% normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link"/>
                                    </a>
                                    <div class="hint">Image from Amazon.com</div>
                                </div>
                            [% END %]
                        [% END %]

                            [% IF ( Koha.Preference('OPACCoce') && Koha.Preference('CoceProviders') && normalized_isbn ) %]
                                [% coce_id = normalized_ean || normalized_isbn %]
                                <div class="cover-image" id="coce-coverimg">
                                    [% IF ( coce_id ) %]
                                        <a title="Image from Coce" class="[% coce_id | html %]" id="coce-thumbnail-preview"></a>
                                    [% END %]
                                    <div class="hint">Image from Coce</div>
                                </div>
                            <div title="[% img_title | html %]" class="[% normalized_isbn | html %]" id="openlibrary-thumbnail-preview"></div>
                        [% END %]
                        [% bt_id = ( normalized_upc || normalized_isbn ) %]
                        [% IF ( BakerTaylorEnabled && bt_id ) %]
                            [% IF BakerTaylorBookstoreURL %]
                                [% IF ( OPACURLOpenInNewWindow ) %]
                                    <a href="https://[% BakerTaylorBookstoreURL | url %][% bt_id | url %]" target="_blank" rel="noreferrer"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" /></a>
                                [% ELSE %]
                                    <a href="https://[% BakerTaylorBookstoreURL | url %][% bt_id | url %]"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" /></a>
                                [% END %]
                            [% ELSE %]
                                <img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" />
                            [% END %]

                            [% IF Koha.Preference('OPACCustomCoverImages') && Koha.Preference('CustomCoverImagesURL') %]
                                [% SET custom_cover_image_url = biblio.custom_cover_image_url %]
                                [% IF custom_cover_image_url %]
                                    <div class="cover-image" id="custom-coverimg">
                                        <a class="custom_cover_image" href="[% custom_cover_image_url | url %]" title="Custom cover image">
                                            <img id="custom-img" alt="Custom cover image" src="[% custom_cover_image_url | url %]" />
                                        </a>
                                        <div class="hint">Custom cover image</div>
                                    </div>
                                [% END %]
                            [% END %]
                        </div> <!-- /.cover-slider -->

                    </div><!-- / .bookcover -->

                    <abbr class="unapi-id" title="koha:biblionumber:[% biblio.biblionumber | html %]"><!-- unAPI --></abbr>
                    [% IF ( ocoins ) # COinS / Openurl %]

                            <div id="images">
                                <p>Click on an image to view it in the image viewer</p>
                                [% FOREACH image IN localimages %]
                                    <a href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblio.biblionumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
                                        <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" />
                                    </a>
                                [% END %]
                            </div><!-- / #images -->
                        [% END # / IF OPACLocalCoverImages && localimages.size %]


                [% IF Koha.Preference('OPACLocalCoverImages') && ( tab == 'holdings' && itemloop_has_images || tab == 'otherholdings' && otheritemloop_has_images ) %]
                    <td class="cover">
                        <div class="bookcover">
                            <div class="cover-slider">
                                [% FOR image IN ITEM_RESULT.cover_images %]
                                    <div class="cover-image local-coverimg">
                                        <a href="/cgi-bin/koha/opac-image.pl?itemnumber=[% image.itemnumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
                                            <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" />
                                        </a>
                                    </div>
                                [% END %]
                            </div>
                        </div>
                    </td>
                [% END %]


        [% Asset.js("lib/kjua/kjua.min.js") | $raw %]
    [% END %]

    [% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %]

    [% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %]
        <script>
            var interface = "[% interface | html %]";

                    $("#highlight_toggle_off").show().click(function() {highlightOff(); return false;});
                [% END %]
            [% END %]

                KOHA.Google.GetCoverFromIsbn([% covernewwindow | html %]);
            [% END %]
            [% IF ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) %]
                KOHA.coce.getURL('[% Koha.Preference('CoceHost') | html %]', '[% Koha.Preference('CoceProviders') | html %]',[% covernewwindow | html %]);
            [% END %]

        function verify_images() {
            // Loop over each container in the template which contains covers
            $(".cover-slider").each(function(){
                var lightbox_descriptions = [];
                $(this).find(".cover-image").each( function( index ){
                    var div = $(this);
                    // Find the image in the container
                    var img = div.find("img")[0];
                    if( $(img).length > 0 ){
                        var description = "";
                        if( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ){
                            // No image loaded in the container. Remove the slide
                            div.remove();
                        } else {
                            // All slides start hidden. If this is the first one, show it.
                            if( index == 0 ){
                                div.show();
                            }
                            // Check if Amazon image is present
                            if ( div.attr("id") == "amazon-bookcoverimg"  ) {
                                w = img.width;
                                h = img.height;
                                if ((w == 1) || (h == 1)) {
                                    // Amazon returned single-pixel placeholder
                                    // Remove the container
                                    div.remove();
                                } else {
                                    lightbox_descriptions.push(_("Amazon cover image (<a href='%s'>see the original image</a>)").format($(img).data('link')));
                                }
                            } else if( div.attr("id") == "custom-coverimg" ){
                                if ( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ) {
                                    // No image was loaded via the CustomCoverImages system preference
                                    // Remove the container
                                    div.remove();
                                } else {
                                    lightbox_descriptions.push("Custom cover image");
                                }
                            } else if( div.attr("id") == "coce-coverimg" ){
                                // Identify which service's image is being loaded by Coce
                                var coce_description;
                                if( $(img).attr("src").indexOf('amazon.com') >= 0 ){
                                    coce_description = ("Coce image from Amazon.com");
                                } else if( $(img).attr("src").indexOf('google.com') >= 0 ){
                                    coce_description = _("Coce image from Google Books");
                                } else if( $(img).attr("src").indexOf('openlibrary.org') >= 0 ){
                                    coce_description = _("Coce image from Open Library");
                                }
                                div.find(".hint").html(coce_description);
                                lightbox_descriptions.push(coce_description);
                            } else if ( div.attr("id") == "adlibris-coverimg" ){
                                lightbox_descriptions.push(_("Image from Adlibris (<a href='%s'>see the original image</a>)").format($(img).data('link')));
                            } else if ( div.attr("class") == "cover-image local-coverimg" ) {
                                lightbox_descriptions.push(_("Local cover image"));
                            } else {
                                console.log("Source of the image cannot be guessed.")
                            }
                        }
                    }
                });

                // Lightbox for cover images
                Chocolat(this.querySelectorAll('.cover-image a'), {
                    description: function(){
                        return lightbox_descriptions[this.settings.currentImageIndex];
                    }
                });

            });

            $(".cover-slider").each(function(){
                var coverSlide = this;
                var coverImages = $(this).find(".cover-image");
                if( coverImages.length > 1 ){
                    coverImages.each(function( index ){
                        // If more that one image is present, add a navigation link
                        // for activating the slide
                        var covernav = $("<a href=\"#\" data-num=\"" + index + "\" class=\"cover-nav\"></a>");
                        if( index == 0 ){
                            // Set the first navigation link as active
                            $(covernav).addClass("nav-active");
                        }
                        $(covernav).html("<i class=\"fa fa-circle\"></i>");
                        $(coverSlide).append( covernav );
                    });
                }

                if( $(coverSlide).find(".cover-image:visible").length < 1 ){
                    $(coverSlide).remove();
                } else {
                    $(coverSlide).addClass("cover-slides");
                }
            });

            $(".cover-slider").on("click",".cover-nav", function(e){
                e.preventDefault();
                var cover_slider = $(this).parent();
                // Adding click handler for cover image navigation links
                var num = $(this).data("num");
                $(cover_slider).find(".cover-nav").removeClass("nav-active");
                $(this).addClass("nav-active");
                $(cover_slider).find(".cover-image").hide();
                $(cover_slider).find(".cover-image").eq( num ).show();
            });

            $("#editions img").each(function(i){
                if ( this.src.indexOf('amazon.com') >= 0 ) {
                    w = this.width;
                    h = this.height;
                    if ((w == 1) || (h == 1)) {
                        this.src = 'https://images-na.ssl-images-amazon.com/images/G/01/x-site/icons/no-img-sm.gif';
                    } else if ( (this.complete != null) && (!this.complete) || this.naturalHeight == 0 ) {
                        this.src = 'https://images-na.ssl-images-amazon.com/images/G/01/x-site/icons/no-img-sm.gif';
                    }
                }
            });
        }

        $(window).load(function() {
            verify_images();
        });
            [% IF ( NovelistSelectProfile && ( normalized_isbn || normalized_upc ) ) %]
                novSelect.loadContentForQuery(
                    {




 */
KOHA.coce = {

    /**
     * Search all:
     *    <div title="biblionumber" id="isbn" class="coce-thumbnail"></div>
     * or
     *    <div title="biblionumber" id="isbn" class="coce-thumbnail-preview"></div>
     * and run a search with all collected isbns to coce cover service.
     * The result is asynchronously returned, and used to append <img>.
     */
    getURL: function(host, provider) {
        var ids = [];
        $("[id^=coce-thumbnail]").each(function() {
            var id = $(this).attr("class"); // id=isbn
            if (id !== '') { ids.push(id); }
        });
        if (ids.length == 0) return;
        ids = ids.join(',');
        var coceURL = host + '/cover?id=' + ids + '&provider=' + provider;
        $.ajax({
            url: coceURL,
            dataType: 'jsonp',
            success: function(urlPerID) {
                for (var id in urlPerID) {
                    var url = urlPerID[id];
                    $("[id^=coce-thumbnail]." + id).each(function() {
                        var img = document.createElement("img");
                        img.src = url;
                        img.alt = "Cover image";
                        img.onload = function() {
                            // image dimensions can't be known until image has loaded
                            if (img.height == 1 && img.width == 1) {
                                $(this).closest(".coce-coverimg").remove();
                            }
                        };
                        $(this).attr('href', url);
                        $(this).append(img);
                    });
                }
            },

        });
    }

};




                        catch(err){
                        };
                    } else if (this.width > 1) { // don't show the silly 1px "no image" img
                        $(mydiv).empty().append(img);
                            var a = $("<a />").attr('href', '/cgi-bin/koha/opac-imageviewer.pl?biblionumber=' + $(mydiv).attr("class"));
                            $(a).append(img);
                            $(mydiv).empty().append(a);
                        } else {
                            $(mydiv).empty().append(img);
                        }
                        $(mydiv).children('.no-image').remove();
                    }
                })
- 

Return to bug 28180

Lines 607-616 th { Link Here

(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss (-1 / +58 lines)
607	width: 75px;	607	width: 75px;
608	}	608	}
609		609
610	#bookcover {	610	.bookcover {
611	float: left;	611	float: left;
612	margin: 0;	612	margin: 0;
613	padding: 0;	613	padding: 0;
		614	text-align: center;
614		615
615	.no-image {	616	.no-image {
616	margin-bottom: 10px;	617	margin-bottom: 10px;
Lines 628-633 th { Link Here
628	}	629	}
629	}	630	}
630		631
		632	#biblio-cover-slider {
		633	border: 1px solid #b9d8d9;
		634	border-radius: 3px;
		635	margin: 5px;
		636	padding: 10px 5px 5px 5px;
		637	min-height: 175px;
		638	}
		639
		640	.cover-slides {
		641	background: #FFF url("../img/spinner-small.gif") center center no-repeat;
		642
		643	.hint {
		644	font-size: 90%;
		645	padding: .5em 0;
		646	}
		647
		648	a {
		649	&.nav-active {
		650	&:link,
		651	&:visited {
		652	color: #85ca11;
		653	}
		654	}
		655	}
		656	}
		657
		658	td {
		659	&.bookcover {
		660	background: #FFF url("../img/spinner-small.gif") center center no-repeat;
		661	min-width: 120px;
		662	text-align: center;
		663	}
		664
		665	.cover-slides {
		666	background: transparent none;
		667	border: 0;
		668	margin: 0;
		669	min-height: unset;
		670	padding: 0;
		671	}
		672	}
		673
		674	.cover-image {
		675	display: none;
		676
		677	img {
		678	height: auto;
		679	max-width: 100%;
		680	}
		681	}
		682
		683	.cover-nav {
		684	display: inline-block;
		685	padding: 3px 4px;
		686	}
		687
631	div {	688	div {
632	&.required_label {	689	&.required_label {
633	display: none;	690	display: none;

Lines 38-50 KOHA.LocalCover = { Link Here

(-)a/koha-tmpl/opac-tmpl/bootstrap/js/localcovers.js (-8 / +1 lines)
38	catch(err){	38	catch(err){
39	};	39	};
40	} else if (this.width > 1) { // don't show the silly 1px "no image" img	40	} else if (this.width > 1) { // don't show the silly 1px "no image" img
41	if (uselink) {	41	$(mydiv).empty().append(img);
42	var a = $("<a />").attr('href', '/cgi-bin/koha/opac-imageviewer.pl?biblionumber=' + $(mydiv).attr("class"));
43	$(a).append(img);
44	$(mydiv).empty().append(a);
45	} else {
46	$(mydiv).empty().append(img);
47	}
48	$(mydiv).children('.no-image').remove();	42	$(mydiv).children('.no-image').remove();
49	}	43	}
50	})	44	})
51	-

Lines 36-41 Link Here

(-)a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt (-72 / +187 lines)
36	[% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %]	36	[% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %]
37	[% Asset.css("lib/verovio/midiplayer.css") \| $raw %]	37	[% Asset.css("lib/verovio/midiplayer.css") \| $raw %]
38	[% END %]	38	[% END %]
		39	[% Asset.css("lib/Chocolat/css/chocolat.css") \| $raw %]
39	</head>	40	</head>
40	[% BLOCK cssinclude %][% END %]	41	[% BLOCK cssinclude %][% END %]
41	[% INCLUDE 'bodytag.inc' bodyid='opac-detail' bodyclass='scrollto' %]	42	[% INCLUDE 'bodytag.inc' bodyid='opac-detail' bodyclass='scrollto' %]
Lines 58-128 Link Here
58	<div class="col-lg-9">	59	<div class="col-lg-9">
59	<div id="catalogue_detail_biblio" class="maincontent" data-biblionumber="[% biblio.biblionumber \| html %]">	60	<div id="catalogue_detail_biblio" class="maincontent" data-biblionumber="[% biblio.biblionumber \| html %]">
60		61
61	<div id="bookcover">	62	<div class="bookcover">
62	[% IF ( biblio.title ) %]
63	[% img_title = biblio.title %]
64	[% ELSE %]
65	[% img_title = biblio.biblionumber %]
66	[% END %]
67		63
68	[% IF ( OPACLocalCoverImages ) %]	64	<div id="biblio-cover-slider" class="cover-slider">
69	<div title="[% img_title \| html %]" class="[% biblio.biblionumber \| html %]" id="local-thumbnail-preview"></div>	65	[% IF ( OPACLocalCoverImages ) %]
70	[% END %]	66	[% IF localimages.count %]
71		67	[% FOREACH image IN localimages %]
72	[% IF ( AdlibrisEnabled && normalized_isbn ) %]	68	<div class="cover-image local-coverimg">
73	<a href="[% AdlibrisURL \| url %]?isbn=[% normalized_isbn \| uri %]"><img src="[% AdlibrisURL \| url %]?isbn=[% normalized_isbn \| uri %]" alt="Cover image" class="adlibris-cover-big" /></a>	69	<a href="/cgi-bin/koha/opac-image.pl?imagenumber=[% image.imagenumber \| uri %]" title="Local cover image">
74	[% END %]	70	<img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&imagenumber=[% image.imagenumber \| uri %]" alt="Local cover image" data-link="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblionumber \| uri %]&imagenumber=[% image.imagenumber \| uri %]" />
		71	</a>
		72	<div class="hint">Local cover image</div>
		73	</div>
		74	[% END %]
		75	[% END %]
		76	[% END %]
75		77
76	[% IF ( OPACAmazonCoverImages ) %]	78	[% IF ( AdlibrisEnabled && normalized_isbn ) %]
77	[% IF ( OPACURLOpenInNewWindow ) %]	79	<div class="cover-image" id="adlibris-coverimg">
78	<a href="http://www.amazon[% AmazonTld \| uri %]/gp/reader/[% normalized_isbn \| uri %][% AmazonAssocTag \| uri %]#reader-link" target="_blank" rel="noreferrer">	80	<a href="[% AdlibrisURL \| url %]?isbn=[% normalized_isbn \| uri %]" title="Addlibris cover image">
79	[% ELSE %]	81	<img src="[% AdlibrisURL \| url %]?isbn=[% normalized_isbn \| uri %]" class="adlibris-cover-big" alt="Adlibris cover image" />
80	<a href="http://www.amazon[% AmazonTld \| uri %]/dp/[% normalized_isbn \| uri %][% AmazonAssocTag \| uri %]">	82	</a>
		83	<div class="hint">Image from Adlibris</div>
		84	</div>
81	[% END %]	85	[% END %]
82	<img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn \| html %].01.MZZZZZZZ.jpg" alt="Cover image" /></a>
83	[% END %]
84		86
85	[% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %]	87	[% IF ( OPACAmazonCoverImages && normalized_isbn) %]
86	[% IF ( content_identifier_exists ) %]	88	<div class="cover-image" id="amazon-bookcoverimg">
87	<img src="https://secure.syndetics.com/index.aspx?isbn=[% normalized_isbn \| html %]/[% SyndeticsCoverImageSize \| html %].GIF&client=[% SyndeticsClientCode \| html %]&type=xw10&upc=[% normalized_upc \| html %]&oclc=[% normalized_oclc \| html %]" alt="" class="thumbnail" />	89	<a href="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn \| uri %].01.LZZZZZZZ.jpg" title="Amazon cover image">
88	[% ELSE %]	90	<img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn \| uri %].01.MZZZZZZZ.jpg" alt="Amazon cover image" data-link="http://www.amazon[% AmazonTld \| uri %]/gp/reader/[% normalized_isbn \| uri %][% AmazonAssocTag \| uri %]#reader-link"/>
89	<span class="no-image">No cover image available</span>	91	</a>
		92	<div class="hint">Image from Amazon.com</div>
		93	</div>
90	[% END %]	94	[% END %]
91	[% END %]
92		95
93	[% IF ( GoogleJackets ) %]	96	[% IF ( Koha.Preference('OPACCoce') && Koha.Preference('CoceProviders') && normalized_isbn ) %]
94	<div title="[% img_title \| html %]" class="[% normalized_isbn \| html %]" id="gbs-thumbnail-preview"></div>	97	[% coce_id = normalized_ean \|\| normalized_isbn %]
95	[% END %]	98	<div class="cover-image" id="coce-coverimg">
96	[% IF ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) %]	99	[% IF ( coce_id ) %]
97	[% coce_id = normalized_ean \|\| normalized_isbn \| html %]	100	<a title="Image from Coce" class="[% coce_id \| html %]" id="coce-thumbnail-preview"></a>
98	<div title="[% img_title \| html %]" class="[% coce_id \| html %]" id="coce-thumbnail-preview"></div>	101	[% END %]
99	[% END %]	102	<div class="hint">Image from Coce</div>
100	[% IF OpenLibraryCovers %]	103	</div>
101	<div title="[% img_title \| html %]" class="[% normalized_isbn \| html %]" id="openlibrary-thumbnail-preview"></div>
102	[% END %]
103	[% bt_id = ( normalized_upc \|\| normalized_isbn ) %]
104	[% IF ( BakerTaylorEnabled && bt_id ) %]
105	[% IF BakerTaylorBookstoreURL %]
106	[% IF ( OPACURLOpenInNewWindow ) %]
107	<a href="https://[% BakerTaylorBookstoreURL \| url %][% bt_id \| url %]" target="_blank" rel="noreferrer"><img alt="See Baker & Taylor" src="[% BakerTaylorImageURL \| html %][% bt_id \| html %]" /></a>
108	[% ELSE %]
109	<a href="https://[% BakerTaylorBookstoreURL \| url %][% bt_id \| url %]"><img alt="See Baker & Taylor" src="[% BakerTaylorImageURL \| html %][% bt_id \| html %]" /></a>
110	[% END %]
111	[% ELSE %]
112	<img alt="See Baker & Taylor" src="[% BakerTaylorImageURL \| html %][% bt_id \| html %]" />
113	[% END %]	104	[% END %]
114	[% END %]	105
115	[% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]	106	[% IF Koha.Preference('OPACCustomCoverImages') && Koha.Preference('CustomCoverImagesURL') %]
116	[% SET custom_cover_image_url = biblio.custom_cover_image_url %]	107	[% SET custom_cover_image_url = biblio.custom_cover_image_url %]
117	[% IF custom_cover_image_url %]	108	[% IF custom_cover_image_url %]
118	[% IF ( OPACURLOpenInNewWindow ) %]	109	<div class="cover-image" id="custom-coverimg">
119	<a class="custom_cover_image" href="[% custom_cover_image_url \| url %]" target="_blank" rel="noreferrer"><img alt="Cover image" src="[% custom_cover_image_url \| url %]" /></a>	110	<a class="custom_cover_image" href="[% custom_cover_image_url \| url %]" title="Custom cover image">
120	[% ELSE %]	111	<img id="custom-img" alt="Custom cover image" src="[% custom_cover_image_url \| url %]" />
121	<a class="custom_cover_image" href="[% custom_cover_image_url \| url %]"><img alt="Cover image" src="[% custom_cover_image_url \| url %]" /></a>	112	</a>
		113	<div class="hint">Custom cover image</div>
		114	</div>
122	[% END %]	115	[% END %]
123	[% END %]	116	[% END %]
124	[% END %]	117	</div> <!-- /.cover-slider -->
125	</div><!-- / #bookcover -->	118
		119	</div><!-- / .bookcover -->
126		120
127	<abbr class="unapi-id" title="koha:biblionumber:[% biblio.biblionumber \| html %]"><!-- unAPI --></abbr>	121	<abbr class="unapi-id" title="koha:biblionumber:[% biblio.biblionumber \| html %]"><!-- unAPI --></abbr>
128	[% IF ( ocoins ) # COinS / Openurl %]	122	[% IF ( ocoins ) # COinS / Openurl %]
Lines 1020-1026 Link Here
1020	<div id="images">	1014	<div id="images">
1021	<p>Click on an image to view it in the image viewer</p>	1015	<p>Click on an image to view it in the image viewer</p>
1022	[% FOREACH image IN localimages %]	1016	[% FOREACH image IN localimages %]
1023	<a class="localimage" href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblio.biblionumber \| html %]&imagenumber=[% image.imagenumber \| html %]"><img alt="" src="/cgi-bin/koha/opac-image.pl?thumbnail=1&imagenumber=[% image.imagenumber \| html %]" /></a>	1017	<a href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblio.biblionumber \| uri %]&imagenumber=[% image.imagenumber \| uri %]" title="Local cover image">
		1018	<img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&imagenumber=[% image.imagenumber \| uri %]" alt="Local cover image" />
		1019	</a>
1024	[% END %]	1020	[% END %]
1025	</div><!-- / #images -->	1021	</div><!-- / #images -->
1026	[% END # / IF OPACLocalCoverImages && localimages.size %]	1022	[% END # / IF OPACLocalCoverImages && localimages.size %]
Lines 1271-1279 Link Here
1271		1267
1272	[% IF Koha.Preference('OPACLocalCoverImages') && ( tab == 'holdings' && itemloop_has_images \|\| tab == 'otherholdings' && otheritemloop_has_images ) %]	1268	[% IF Koha.Preference('OPACLocalCoverImages') && ( tab == 'holdings' && itemloop_has_images \|\| tab == 'otherholdings' && otheritemloop_has_images ) %]
1273	<td class="cover">	1269	<td class="cover">
1274	[% FOR image IN ITEM_RESULT.cover_images %]	1270	<div class="bookcover">
1275	<div title="[% ITEM_RESULT.itemnumber \| html %]" data-imagenumber="[% image.imagenumber \| html %]" data-biblionumber="[% ITEM_RESULT.biblionumber \| html %]" class="local-thumbnail-preview"></div>	1271	<div class="cover-slider">
1276	[% END %]	1272	[% FOR image IN ITEM_RESULT.cover_images %]
		1273	<div class="cover-image local-coverimg">
		1274	<a href="/cgi-bin/koha/opac-image.pl?itemnumber=[% image.itemnumber \| uri %]&imagenumber=[% image.imagenumber \| uri %]" title="Local cover image">
		1275	<img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&imagenumber=[% image.imagenumber \| uri %]" alt="Local cover image" />
		1276	</a>
		1277	</div>
		1278	[% END %]
		1279	</div>
		1280	</div>
1277	</td>	1281	</td>
1278	[% END %]	1282	[% END %]
1279		1283
Lines 1455-1460 Link Here
1455	[% Asset.js("lib/kjua/kjua.min.js") \| $raw %]	1459	[% Asset.js("lib/kjua/kjua.min.js") \| $raw %]
1456	[% END %]	1460	[% END %]
1457		1461
		1462	[% Asset.js("lib/Chocolat/js/chocolat.js") \| $raw %]
		1463
1458	[% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %]	1464	[% IF ( Koha.Preference('OPACShowMusicalInscripts') ) %]
1459	<script>	1465	<script>
1460	var interface = "[% interface \| html %]";	1466	var interface = "[% interface \| html %]";
Lines 1629-1650 Link Here
1629	$("#highlight_toggle_off").show().click(function() {highlightOff(); return false;});	1635	$("#highlight_toggle_off").show().click(function() {highlightOff(); return false;});
1630	[% END %]	1636	[% END %]
1631	[% END %]	1637	[% END %]
1632	[% IF ( GoogleJackets ) %]	1638
1633	KOHA.Google.GetCoverFromIsbn([% covernewwindow \| html %]);
1634	[% END %]
1635	[% IF ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) %]	1639	[% IF ( Koha.Preference('OpacCoce') && Koha.Preference('CoceProviders') ) %]
1636	KOHA.coce.getURL('[% Koha.Preference('CoceHost') \| html %]', '[% Koha.Preference('CoceProviders') \| html %]',[% covernewwindow \| html %]);	1640	KOHA.coce.getURL('[% Koha.Preference('CoceHost') \| html %]', '[% Koha.Preference('CoceProviders') \| html %]',[% covernewwindow \| html %]);
1637	[% END %]	1641	[% END %]
1638		1642
1639	[% IF OpenLibraryCovers %]	1643	function verify_images() {
1640	KOHA.OpenLibrary.GetCoverFromIsbn();	1644	// Loop over each container in the template which contains covers
1641	[% END %]	1645	$(".cover-slider").each(function(){
1642	[% IF OPACLocalCoverImages %]	1646	var lightbox_descriptions = [];
1643	KOHA.LocalCover.GetCoverFromBibnumber(true);	1647	$(this).find(".cover-image").each( function( index ){
1644	[% IF itemloop_has_images OR oheritemloop_has_images %]	1648	var div = $(this);
1645	KOHA.LocalCover.GetCoverFromItemnumber(true);	1649	// Find the image in the container
1646	[% END %]	1650	var img = div.find("img")[0];
1647	[% END %]	1651	if( $(img).length > 0 ){
		1652	var description = "";
		1653	if( (img.complete != null) && (!img.complete) \|\| img.naturalHeight == 0 ){
		1654	// No image loaded in the container. Remove the slide
		1655	div.remove();
		1656	} else {
		1657	// All slides start hidden. If this is the first one, show it.
		1658	if( index == 0 ){
		1659	div.show();
		1660	}
		1661	// Check if Amazon image is present
		1662	if ( div.attr("id") == "amazon-bookcoverimg" ) {
		1663	w = img.width;
		1664	h = img.height;
		1665	if ((w == 1) \|\| (h == 1)) {
		1666	// Amazon returned single-pixel placeholder
		1667	// Remove the container
		1668	div.remove();
		1669	} else {
		1670	lightbox_descriptions.push(_("Amazon cover image (<a href='%s'>see the original image</a>)").format($(img).data('link')));
		1671	}
		1672	} else if( div.attr("id") == "custom-coverimg" ){
		1673	if ( (img.complete != null) && (!img.complete) \|\| img.naturalHeight == 0 ) {
		1674	// No image was loaded via the CustomCoverImages system preference
		1675	// Remove the container
		1676	div.remove();
		1677	} else {
		1678	lightbox_descriptions.push("Custom cover image");
		1679	}
		1680	} else if( div.attr("id") == "coce-coverimg" ){
		1681	// Identify which service's image is being loaded by Coce
		1682	var coce_description;
		1683	if( $(img).attr("src").indexOf('amazon.com') >= 0 ){
		1684	coce_description = ("Coce image from Amazon.com");
		1685	} else if( $(img).attr("src").indexOf('google.com') >= 0 ){
		1686	coce_description = _("Coce image from Google Books");
		1687	} else if( $(img).attr("src").indexOf('openlibrary.org') >= 0 ){
		1688	coce_description = _("Coce image from Open Library");
		1689	}
		1690	div.find(".hint").html(coce_description);
		1691	lightbox_descriptions.push(coce_description);
		1692	} else if ( div.attr("id") == "adlibris-coverimg" ){
		1693	lightbox_descriptions.push(_("Image from Adlibris (<a href='%s'>see the original image</a>)").format($(img).data('link')));
		1694	} else if ( div.attr("class") == "cover-image local-coverimg" ) {
		1695	lightbox_descriptions.push(_("Local cover image"));
		1696	} else {
		1697	console.log("Source of the image cannot be guessed.")
		1698	}
		1699	}
		1700	}
		1701	});
		1702
		1703	// Lightbox for cover images
		1704	Chocolat(this.querySelectorAll('.cover-image a'), {
		1705	description: function(){
		1706	return lightbox_descriptions[this.settings.currentImageIndex];
		1707	}
		1708	});
		1709
		1710	});
		1711
		1712	$(".cover-slider").each(function(){
		1713	var coverSlide = this;
		1714	var coverImages = $(this).find(".cover-image");
		1715	if( coverImages.length > 1 ){
1716	coverImages.each(function( index ){
1717	// If more that one image is present, add a navigation link
1718	// for activating the slide
1719	var covernav = $("<a href=\"#\" data-num=\"" + index + "\" class=\"cover-nav\"></a>");
1720	if( index == 0 ){
1721	// Set the first navigation link as active
1722	$(covernav).addClass("nav-active");
1723	}
1724	$(covernav).html("<i class=\"fa fa-circle\"></i>");
1725	$(coverSlide).append( covernav );
1726	});
1727	}
1728
1729	if( $(coverSlide).find(".cover-image:visible").length < 1 ){
1730	$(coverSlide).remove();
1731	} else {
1732	$(coverSlide).addClass("cover-slides");
1733	}
1734	});
1735
1736	$(".cover-slider").on("click",".cover-nav", function(e){
1737	e.preventDefault();
1738	var cover_slider = $(this).parent();
1739	// Adding click handler for cover image navigation links
1740	var num = $(this).data("num");
1741	$(cover_slider).find(".cover-nav").removeClass("nav-active");
1742	$(this).addClass("nav-active");
1743	$(cover_slider).find(".cover-image").hide();
1744	$(cover_slider).find(".cover-image").eq( num ).show();
1745	});
1746
1747	$("#editions img").each(function(i){
1748	if ( this.src.indexOf('amazon.com') >= 0 ) {
1749	w = this.width;
1750	h = this.height;
1751	if ((w == 1) \|\| (h == 1)) {
1752	this.src = 'https://images-na.ssl-images-amazon.com/images/G/01/x-site/icons/no-img-sm.gif';
1753	} else if ( (this.complete != null) && (!this.complete) \|\| this.naturalHeight == 0 ) {
1754	this.src = 'https://images-na.ssl-images-amazon.com/images/G/01/x-site/icons/no-img-sm.gif';
1755	}
1756	}
1757	});
1758	}
1759
1760	$(window).load(function() {
1761	verify_images();
1762	});
1648	[% IF ( NovelistSelectProfile && ( normalized_isbn \|\| normalized_upc ) ) %]	1763	[% IF ( NovelistSelectProfile && ( normalized_isbn \|\| normalized_upc ) ) %]
1649	novSelect.loadContentForQuery(	1764	novSelect.loadContentForQuery(
1650	{	1765	{

Lines 6-43 if (KOHA === undefined \|\| !KOHA) { var KOHA = {}; } Link Here

(-)a/koha-tmpl/opac-tmpl/bootstrap/js/coce.js (-33 / +41 lines)
6	*/	6	*/
7	KOHA.coce = {	7	KOHA.coce = {
8		8
9	/**	9	/**
10	* Search all:	10	* Search all:
11	* <div title="biblionumber" id="isbn" class="coce-thumbnail"></div>	11	* <div title="biblionumber" id="isbn" class="coce-thumbnail"></div>
12	* or	12	* or
13	* <div title="biblionumber" id="isbn" class="coce-thumbnail-preview"></div>	13	* <div title="biblionumber" id="isbn" class="coce-thumbnail-preview"></div>
14	* and run a search with all collected isbns to coce cover service.	14	* and run a search with all collected isbns to coce cover service.
15	* The result is asynchronously returned, and used to append <img>.	15	* The result is asynchronously returned, and used to append <img>.
16	*/	16	*/
17	getURL: function(host,provider,newWindow) {	17	getURL: function(host, provider) {
18	var ids = [];	18	var ids = [];
19	$("[id^=coce-thumbnail]").each(function(i) {	19	$("[id^=coce-thumbnail]").each(function() {
20	var id = $(this).attr("class"); // id=isbn	20	var id = $(this).attr("class"); // id=isbn
21	if ( id !== '' ) { ids.push(id); }	21	if (id !== '') { ids.push(id); }
22	});	22	});
23	if (ids.length == 0) return;	23	if (ids.length == 0) return;
24	ids = ids.join(',');	24	ids = ids.join(',');
25	var coceURL = host + '/cover?id=' + ids + '&provider=' + provider;	25	var coceURL = host + '/cover?id=' + ids + '&provider=' + provider;
26	$.ajax({	26	$.ajax({
27	url: coceURL,	27	url: coceURL,
28	dataType: 'jsonp',	28	dataType: 'jsonp',
29	success: function(urlPerID){	29	success: function(urlPerID) {
30	for (var id in urlPerID) {	30	for (var id in urlPerID) {
31	var url = urlPerID[id];	31	var url = urlPerID[id];
32	$("[id^=coce-thumbnail]."+id).each(function() {	32	$("[id^=coce-thumbnail]." + id).each(function() {
33	var img = document.createElement("img");	33	var img = document.createElement("img");
34	img.src = url;	34	img.src = url;
35	img.title = url; //FIXME: to delete	35	img.alt = "Cover image";
36	$(this).html(img);	36	img.onload = function() {
37	});	37	// image dimensions can't be known until image has loaded
38	}	38	if (img.height == 1 && img.width == 1) {
39	}	39	$(this).closest(".coce-coverimg").remove();
40	});	40	}
41	}	41	};
		42	$(this).attr('href', url);
		43	$(this).append(img);
		44	});
		45	}
		46	},
		47
		48	});
		49	}
42		50
43	};	51	};