WIP #1945 @3

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index c86c7a454a841b0ac58b0259de2fe34d26486278..c4d5ca3a2281897eabd4b79c460ef041b2b2c786 100644 (file)
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -589,9 +589,36 @@ FluidbookMenu.prototype = {
                 m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({scale: [s, s], origin: [0, 0]}).css('text-align', 'left');
                 break;
           case 'slideshow':
-                    // ToDo: resize slideshow to fit inside view, accounting for image, caption and thumbnail grid
-                    // w contains max width of popup
-                    // h contains max height of popup
+
+                    // When resizing the slideshow, the goal is to fit it into the maximum modal height (stored in 'h').
+                    // The thumbnails and caption can't be scaled so we must scale the height of the main image
+                    // (it is already scaled for max-width via CSS)
+
+                    var headerHeight = m.find('.caption').outerHeight(), // Height of title section that also contains close button
+                        thumbnailsHeight = m.find('.fb-slideshow-thumbnails').outerHeight(), // Thumbnail slider height
+                        slideMaxHeight = h - headerHeight - thumbnailsHeight; // Remaining height that main image + caption has to fit into
+
+                    // Process each slide and calculate optimal height for image and slide container
+                    m.find('.fb-slideshow-slide').each(function() {
+
+                        // Set the height on this container so flexbox can vertically center
+                        // the contents when they don't take up the full height available
+                        $(this).css('height', slideMaxHeight);
+
+                        var captionHeight = $(this).find('.fb-slideshow-slide-caption').outerHeight() || 0;
+
+                        // Allow image to take up whatever height is left after accounting for the caption
+                        // This is only the max-height so the image might not end up being this tall...
+                        $(this).find('.fb-slideshow-slide-image').css({
+                            'max-height': slideMaxHeight - captionHeight
+                        });
+                    });
+
+                    // setTimeout(function() {
+                    //   var slideshowID = m.find('.fb-slideshow').attr('id');
+                    //   $('#' + slideshowID).find('.fb-slideshow-slide').css('visibility', 'visible');
+                    // }, 100)
+
                 break;
             default:
                 break;

diff --git a/style/fluidbook.slideshow.less b/style/fluidbook.slideshow.less
index c48f00189e4de98c5a8f95061fc2ceeeea0e12f1..b0328bbdb2d840033df58f75c5a1f2f5c83d7c06 100644 (file)
--- a/style/fluidbook.slideshow.less
+++ b/style/fluidbook.slideshow.less
@@ -11,12 +11,19 @@
   }
 
   &-slide {
-    height: 610px;
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
     text-align: center;
-    img {
-      max-height: 550px;
+    //visibility: hidden; // Hide until JS can resize the images to avoid flicker
+
+    &-image {
       margin: 0 auto;
     }
+
+    &-caption {
+      padding: 1em 0;
+    }
   }
 
   &-thumbnails {