diff --git a/platypush/backend/http/static/css/widgets/image-carousel.css b/platypush/backend/http/static/css/widgets/image-carousel.css index 31c6e89a..38bea137 100644 --- a/platypush/backend/http/static/css/widgets/image-carousel.css +++ b/platypush/backend/http/static/css/widgets/image-carousel.css @@ -9,7 +9,6 @@ .carousel > img { flex-shrink: 0; - max-height: 100%; border-radius: 5px; height: 22.5em; } diff --git a/platypush/backend/http/static/js/widgets/image-carousel.js b/platypush/backend/http/static/js/widgets/image-carousel.js index 4b5a3791..8726cc72 100644 --- a/platypush/backend/http/static/js/widgets/image-carousel.js +++ b/platypush/backend/http/static/js/widgets/image-carousel.js @@ -15,17 +15,19 @@ $(document).ready(function() { var refreshImage = function() { var $oldImg = $imgContainer.find('img'); - var $newImg = $imgContainer.find('img').clone() - .attr('src', images[processedImages++]).css('min-width', '') - .hide().appendTo($imgContainer); - - if ($newImg.width() > $newImg.height()) { - $newImg.css('min-width', '100%'); - } + var $newImg = $('') + .attr('src', images[processedImages++]) + .attr('alt', 'Could not load image') + .appendTo('body').hide(); $newImg.on('load', function() { $oldImg.remove(); - $newImg.fadeIn(); + if ($newImg.width() > $newImg.height()) { + $newImg.css('width', '100%'); + } + + $newImg.css('max-height', '100%'); + $newImg.remove().appendTo($imgContainer).fadeIn(); }); if (processedImages == images.length-1) {