scale: [s, s],
origin: [0, 0]
}).css('text-align', 'left');
- m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({scale: [s, s], origin: [0, 0]}).css('text-align', 'left');
+ m.find('.multimediaScale').css({width: nw, height: nh, overflow: 'hidden'}).transform({
+ scale: [s, s],
+ origin: [0, 0]
+ }).css('text-align', 'left');
break;
- case 'slideshow':
+ case 'slideshow':
+ var w = Math.max(ww * 0.8);
+ var h = Math.max(hh * 0.8);
+ if (ww < 800) {
+ w = ww;
+ h = hh;
+ fullscreen = true;
+ $(".fb-slideshow").addClass('fb-slideshow-fullscreen');
+ } else {
+ $(".fb-slideshow").removeClass('fb-slideshow-fullscreen');
+ }
- // 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 optimizeHeight = (h < 600);
+ if (optimizeHeight) {
+ $(".fb-slideshow-thumbnails").addClass('fb-slideshow-nothumbs');
+ m.find('.back').addClass('small');
+ } else {
+ $(".fb-slideshow-thumbnails").removeClass('fb-slideshow-nothumbs');
+ m.find('.back').removeClass('small');
+ }
+
+ // 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
+ var headerHeight = m.find('.caption').outerHeight(); // Height of title section that also contains close button
+ var thumbnailsHeight = m.find('.fb-slideshow-thumbnails').outerHeight(); // Thumbnail slider height
+ var offset = 0;
- // Process each slide and calculate optimal height for image and slide container
- m.find('.fb-slideshow-slide').each(function() {
+ if (optimizeHeight) {
+ offset = -headerHeight;
+ headerHeight = 0;
+ thumbnailsHeight = 0;
+ var contentHeight = h;
+ }
- // 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;
+ m.find('.content').css({top: offset});
- // 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
- });
- });
+ var 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 () {
- // setTimeout(function() {
- // var slideshowID = m.find('.fb-slideshow').attr('id');
- // $('#' + slideshowID).find('.fb-slideshow-slide').css('visibility', 'visible');
- // }, 100)
+ // 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
+ });
+ });
break;
default:
break;
ccss.maxHeight = h - captionHeight;
if (forceHeight) {
css.minHeight = css.height = h;
- ccss.minHeight = ccss.height = h - captionHeight;
+ if (contentHeight === undefined) {
+ ccss.minHeight = ccss.height = h - captionHeight;
+ } else {
+ ccss.minHeight = ccss.height = contentHeight;
+ }
} else {
ccss.minHeight = ccss.height = css.minHeight = css.height = '';
}
function FluidbookSlideshow(fluidbook) {
- this.fluidbook = fluidbook;
+ this.fluidbook = fluidbook;
}
FluidbookSlideshow.prototype = {
- initSlideshow: function(id) {
- var $slideshow = $('#' + id),
- thumbnailsID = id +'_thumbnails',
- $thumbnails;
+ initSlideshow: function (id) {
+ var $slideshow = $('#' + id),
+ thumbnailsID = id + '_thumbnails',
+ $thumbnails;
- if ($slideshow.length == 0) return false;
+ if ($slideshow.length == 0) return false;
- // Dynamically add thumbnails from full sized images
- // Images have to load anyway so we can reuse full images for thumbnails
- $('<div class="fb-slideshow-thumbnails" id="'+ thumbnailsID +'"></div>').appendTo($slideshow.parent());
- $thumbnails = $('#' + thumbnailsID);
+ // Dynamically add thumbnails from full sized images
+ // Images have to load anyway so we can reuse full images for thumbnails
+ $('<div class="fb-slideshow-thumbnails" id="' + thumbnailsID + '"></div>').appendTo($slideshow.parent());
+ $thumbnails = $('#' + thumbnailsID);
- $slideshow.find('img').each(function() {
- var img = $(this).clone();
- $thumbnails.append(img);
- });
+ $slideshow.find('img').each(function () {
+ var img = $(this).clone();
+ $thumbnails.append(img);
+ });
- // Main image slider
- $slideshow.slick({
- variableWidth: false,
- asNavFor: '#'+ thumbnailsID, // Synced with thumbnails slider
- infinite: false,
- draggable: true
- });
+ // Main image slider
+ $slideshow.slick({
+ variableWidth: false,
+ asNavFor: '#' + thumbnailsID, // Synced with thumbnails slider
+ infinite: false,
+ draggable: true
+ });
- // Thumbnails slider
- $thumbnails.slick({
- slidesToShow: 6,
- asNavFor: '#'+ id, // Synced with main slider
- focusOnSelect: true,
- variableWidth: true,
- arrows: false,
- draggable: true,
- swipeToSlide: true,
- infinite: false,
- centerMode: false
- });
- }
+ // Thumbnails slider
+ $thumbnails.slick({
+ slidesToShow: 6,
+ asNavFor: '#' + id, // Synced with main slider
+ focusOnSelect: true,
+ variableWidth: true,
+ arrows: false,
+ draggable: true,
+ swipeToSlide: true,
+ infinite: false,
+ centerMode: false
+ });
+ }
}
@menutransition: 400ms;
- -webkit-transition: all @menutransition;
- -moz-transition: all @menutransition;
- -ms-transition: all @menutransition;
- -o-transition: all @menutransition;
- transition: all @menutransition;
+ -webkit-transition: opacity @menutransition, top @menutransition;
+ -moz-transition: opacity @menutransition, top @menutransition;
+ -ms-transition: opacity @menutransition, top @menutransition;
+ -o-transition: opacity @menutransition, top @menutransition;
+ transition: opacity @menutransition, top @menutransition;
&[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"] {
.caption {
line-height: 1;
z-index: 1;
+ &.small{
+ width: 30px;
+ height: 30px;
+ padding: 10px;
+ font-size: 7px;
+ line-height: 10px;
+ }
+
.rtl & {
right: auto;
left: 0;
#tooltip {
@tooltip-arrows-size: 10px;
-
position: absolute;
background-color: @tooltip-background;
color: @tooltip-color;
// Slideshow Module
.fb-slideshow {
- position: relative;
- padding: 0 60px;
-
- img {
- max-width: 100%;
- }
-
- &-slide {
- display: flex !important;
- flex-direction: column;
- justify-content: center;
- text-align: center;
- //visibility: hidden; // Hide until JS can resize the images to avoid flicker
-
- &-image {
- margin: 0 auto;
- }
-
- &-caption {
- padding: 1em 0;
- }
- }
-
- &-thumbnails {
- padding: 20px 60px 40px;
-
- img {
- height: 80px;
- width: auto;
- margin-right: 30px;
- }
-
- .slick-current {
- // Using outline so it doesn't affect layout or image size
- outline: 5px solid @menu-select-background;
- outline-offset: -5px;
- }
- }
+ position: relative;
+ padding: 0 60px;
+
+ &.fb-slideshow-fullscreen {
+ padding: 0;
+ }
+
+ img {
+ max-width: 100%;
+ }
+
+ &-slide {
+ position: relative;
+ display: flex !important;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ //visibility: hidden; // Hide until JS can resize the images to avoid flicker
+
+ &-image {
+ margin: 0 auto;
+ }
+
+ &-caption {
+ padding: 1em 0;
+ }
+ }
+
+ &-thumbnails {
+ &.fb-slideshow-nothumbs{
+ display: none;
+ }
+
+
+ padding: 20px 60px 40px;
+
+ img {
+ height: 80px;
+ width: auto;
+ margin-right: 30px;
+ cursor: pointer;
+ }
+
+ .slick-current {
+ // Using outline so it doesn't affect layout or image size
+ outline: 5px solid @menu-select-background;
+ outline-offset: -5px;
+ }
+ }
}
-
//--- Slick slider overrides
.slick-slider * {
- outline: none;
+ outline: none;
}
.slick-disabled {
- opacity: 0.25; // Applied to arrows when not clickable
+ opacity: 0.25; // Applied to arrows when not clickable
}
.slick-arrow {
- display: inline-block;
- content: '';
- width: 25px;
- height: 25px;
- border-style: solid;
- border-color: #fff;
- border-width: 0 3px 3px 0;
-
- &:before {
- display: none;
- }
+ display: inline-block;
+ content: '';
+ width: 25px;
+ height: 25px;
+ border-style: solid;
+ border-color: #fff;
+ border-width: 0 3px 3px 0;
+ z-index: 2;
+
+ &:before {
+ display: none;
+ }
}
.slick-next {
- transform: rotate(-45deg);
- right: 20px;
+ transform: rotate(-45deg);
+ right: 20px;
}
.slick-prev {
- transform: rotate(135deg);
- left: 20px;
+ transform: rotate(135deg);
+ left: 20px;
}
projects / fluidbook-html5.git / commitdiff