diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65ae668e763195d8d29e4deab56f46a7e9c92177..8d03b047e632360f865869d495b28f62d3b2711f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [2.7.5] - 28/10/2020
+
+- Fix image gallery component not rendering thumbnails in Chrome/Safari
+
## [2.7.4] - 21/09/2020
- Fix expansion of accordion items when an accordion item is rendered multiple items in the same page
diff --git a/cern_components.info.yml b/cern_components.info.yml
index 69107b00fb249b8ba8d9968ca3c0178b118a39a0..8b15e53f08c60dc802bf9c93769ca85ac6822c4d 100755
--- a/cern_components.info.yml
+++ b/cern_components.info.yml
@@ -2,7 +2,7 @@ name: "CERN Components"
type: module
description: "Provides all the necessary modules regarding CERN Web Components."
core: 8.x
-version: 2.7.4
+version: 2.7.5
package: CERN Components
dependencies:
- components:components (>=8.x-1.1-alpha1)
diff --git a/patterns/molecules/gallery/js/gallery_carousel.js b/patterns/molecules/gallery/js/gallery_carousel.js
index 472dfbe899c8c8dfcd87e132a668ebf446edf51b..8f028a950d52763312a130a11909007ecf77599e 100755
--- a/patterns/molecules/gallery/js/gallery_carousel.js
+++ b/patterns/molecules/gallery/js/gallery_carousel.js
@@ -3,9 +3,7 @@
'use strict';
$(function () {
- //the jQuery here determines whether the page contains an iframe and therefore is a video resource
- //See [WT-645] for more detailed information
- runGalleryCarousel(jQuery(this).find('iframe').length == 0);
+ runGalleryCarousel();
runThumbnailBackground();
jQuery('.gallery-carousel').each(function () {
@@ -23,8 +21,8 @@
// create carousel
// parameter is for disabling the thumbs for video resource types
- function runGalleryCarousel(hasThumbs) {
- var owl = $('.gallery-carousel');
+ function runGalleryCarousel() {
+ let owl = $('.gallery-carousel');
owl.on('initialized.owl.carousel', function (e) {
runThumbnailBackground();
runCDSImages();
@@ -33,7 +31,7 @@
});
owl.owlCarousel({
dots: false,
- thumbs: hasThumbs,
+ thumbs: true,
thumbImage: true,
nav: false,
items: 1,
@@ -64,10 +62,10 @@
.on('error', function () {
$(this).prev('span').removeClass('cds-background-hidden');
$(this).closest('figure').addClass('loading-cds-error');
- var errorurl = $(this).attr('src'); //gets the url which throws the error to find it afterwards in the thumbnail items
+ let errorurl = $(this).attr('src'); //gets the url which throws the error to find it afterwards in the thumbnail items
$(this).closest('.owl-carousel').find('.owl-thumb-item').each(function () {
- var background = $(this).attr('style');
+ let background = $(this).attr('style');
if (background.indexOf(errorurl) >= 0) {
$(this).addClass('loading-cds-error');
return false; //returning false to break out of the each() loop as the thumb item was found
@@ -80,12 +78,12 @@
function runMaxWidth() {
$(".component-gallery .owl-item").each(function () {
- var maxHeight = 0;
- var captionWidth = $(this).find("figure img").width();
+ let maxHeight = 0;
+ let captionWidth = $(this).find("figure img").width();
$(this).find("figcaption").css('max-width', captionWidth);
- var imageMaxWidth = $(this).width();
+ let imageMaxWidth = $(this).width();
$(this).find('img').css('max-width', imageMaxWidth - 10);
})
@@ -98,29 +96,27 @@
$('.open-overlay').remove();
runOverlay();
} else {
- var galleryNumber = 1;
+ let galleryNumber = 1;
$('.component-gallery').each(function () {
$(this).find('.component-gallery__image').each(function () {
-
+ let imageSrcOverlay;
+ let linkTitle = "";
if ($(this).find('figcaption').length > 0) {
- var linkTitle = $(this).find('figcaption').text();
- var imageSrcOverlay = $(this).siblings(".component-gallery__link").find('a.component-gallery__link__last').attr('href');
+ linkTitle = $(this).find('figcaption').text();
+ imageSrcOverlay = $(this).siblings(".component-gallery__link").find('a.component-gallery__link__last').attr('href');
imageSrcOverlay = imageSrcOverlay.split('?')[0] + '?size=medium';
- //console.log(imageSrcOverlay);
} else {
- var linkTitle = 'no caption';
- var imageSrcOverlay = $(this).find("img").attr('src');
- //console.log(imageSrcOverlay);
+ linkTitle = 'no caption';
+ imageSrcOverlay = $(this).find("img").attr('src');
}
-
- var linkCode = '<a class="open-overlay group' + galleryNumber + '" href="' + imageSrcOverlay + '" title="' + linkTitle + '">open</a>';
+ let linkCode = '<a class="open-overlay group' + galleryNumber + '" href="' + imageSrcOverlay + '" title="' + linkTitle + '">open</a>';
if ($(this).find('.image-gallery-overlay').length > 0) {
$(this).find('.image-gallery-overlay').append(linkCode);
} else {
$(this).find('figure a').append(linkCode);
}
- })
+ });
$('a.group' + galleryNumber).colorbox({
rel: "group" + galleryNumber + "",
@@ -132,21 +128,21 @@
//iframe: true,
opacity: "0.9",
onComplete: function () {
- if ($('#cboxTitle').text() == 'no caption') {
+ if ($('#cboxTitle').text() === 'no caption') {
$('#cboxTitle').css('display', 'none');
$('#cboxLoadedContent').css('height', '100%');
} else {
$('#cboxTitle').css('display', 'block');
$('#cboxLoadedContent').css('height', '77.5%');
}
- var cboxImageWidth = $('#cboxLoadedContent').find('img').width();
+ let cboxImageWidth = $('#cboxLoadedContent').find('img').width();
$('#cboxTitle').css('width', cboxImageWidth);
},
onCleanup: function () {
$(this).closest('.gallery-carousel').trigger('destroy.owl.carousel');
//the same jQuery as in the start to determine video resources
- runGalleryCarousel(jQuery(this).find('iframe').length == 0);
+ runGalleryCarousel(jQuery(this).find('iframe').length === 0);
runThumbnailBackground();
}
});
@@ -161,13 +157,13 @@
function runThumbnailBackground() {
$(".owl-carousel .owl-thumb-item").each(function () {
if ($(this).find("img").length > 0) {
- var imageSrc = $(this).find("img").attr('src');
+ let imageSrc = $(this).find("img").attr('src');
$(this).css('background', 'url("' + imageSrc + '") no-repeat center center / cover');
if ($(this).attr('style').length > 0) {
$(this).find("img").remove();
}
}
- var backgroundContent = $(this).css('background-image');
+ let backgroundContent = $(this).css('background-image');
if (backgroundContent.indexOf('undefined') >= 0) {
$(this).remove();
}