lukmangrd/platypush
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Finally got a proper scaling for carousel widget pictures

Browse source
This commit is contained in:
Fabio Manganiello 2018-05-07 14:50:08 +02:00
parent e671a1294c
commit 37c6e25ac3
2 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
platypush/backend/http/static/css/widgets/image-carousel.css
View file

@ -9,7 +9,6 @@
.carousel > img { .carousel > img {
flex-shrink: 0; flex-shrink: 0;
max-height: 100%;
border-radius: 5px; border-radius: 5px;
height: 22.5em; height: 22.5em;
} }

18
platypush/backend/http/static/js/widgets/image-carousel.js
View file

@ -15,17 +15,19 @@ $(document).ready(function() {
var refreshImage = function() { var refreshImage = function() {
var $oldImg = $imgContainer.find('img'); var $oldImg = $imgContainer.find('img');
var $newImg = $imgContainer.find('img').clone() var $newImg = $('<img></img>')
.attr('src', images[processedImages++]).css('min-width', '') .attr('src', images[processedImages++])
.hide().appendTo($imgContainer); .attr('alt', 'Could not load image')
.appendTo('body').hide();
if ($newImg.width() > $newImg.height()) {
$newImg.css('min-width', '100%');
}
$newImg.on('load', function() { $newImg.on('load', function() {
$oldImg.remove(); $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) { if (processedImages == images.length-1) {