From e3a7031f4f801019ef788f7334a46cfc201ab684 Mon Sep 17 00:00:00 2001 From: LeoZandvliet Date: Sun, 27 Dec 2015 18:04:13 +0100 Subject: [PATCH 1/3] Update slideshow.calculation.js Based several calculations on the 'orientation' setting. --- .../slideshow/slideshow.calculation.js | 83 +++++++++++++++---- 1 file changed, 69 insertions(+), 14 deletions(-) diff --git a/js/frontend/slideshow/slideshow.calculation.js b/js/frontend/slideshow/slideshow.calculation.js index 5e7107e..0217613 100644 --- a/js/frontend/slideshow/slideshow.calculation.js +++ b/js/frontend/slideshow/slideshow.calculation.js @@ -151,7 +151,7 @@ // Create jQuery object from view var $view = $(this.$views[viewID]); - + // Return when the slideshow's width or height haven't changed if ((typeof forceCalculation !== 'boolean' || !forceCalculation) && this.$content.width() == $view.outerWidth(true)) @@ -170,14 +170,51 @@ var viewWidth = this.$content.width() - ($view.outerWidth(true) - $view.width()); var viewHeight = this.$content.height() - ($view.outerHeight(true) - $view.height()); - var slideWidth = Math.floor(viewWidth / $slides.length); - var slideHeight = viewHeight; - var spareWidth = viewWidth % $slides.length; + if(this.settings['orientation']=='horizontal') + { + var slideWidth = Math.floor(viewWidth / $slides.length); + } + else + { + var slideWidth = viewWidth; + } + + if(this.settings['orientation']=='horizontal') + { + var slideHeight = viewHeight; + } + else + { + var slideHeight = Math.floor(viewHeight / $slides.length); + } + + if(this.settings['orientation']=='horizontal') + { + var spareWidth = viewWidth % $slides.length; + var spareHeight = 0; + } + else + { + var spareWidth = 0; + var spareHeight = viewHeight % $slides.length; + } + var totalWidth = 0; + var totalHeight = 0; - // Cut off left and right margin of outer slides - $($slides[0]).css('margin-left', 0); - $($slides[$slides.length - 1]).css('margin-right', 0); + + if(this.settings['orientation']=='horizontal') + { + // Cut off left and right margin of outer slides + $($slides[0]).css('margin-left', 0); + $($slides[$slides.length - 1]).css('margin-right', 0); + } + else + { + // Cut off top and bottom margin of outer slides + $($slides[0]).css('margin-top', 0); + $($slides[$slides.length - 1]).css('margin-bottom', 0); + } $.each($slides, $.proxy(function(slideID, slide) { @@ -188,18 +225,35 @@ var outerWidth = $slide.outerWidth(true) - $slide.width(); var outerHeight = $slide.outerHeight(true) - $slide.height(); - // Add spare width pixels to the last slide - if (slideID == ($slides.length - 1)) + if(this.settings['orientation']=='horizontal') { - $slide.width((slideWidth - outerWidth) + spareWidth); + // Add spare width pixels to the last slide + if (slideID == ($slides.length - 1)) + { + $slide.width((slideWidth - outerWidth) + spareWidth); + } + else + { + $slide.width(slideWidth - outerWidth); + } + + $slide.height(slideHeight - outerHeight); } else { + // Add spare height pixels to the last slide + if (slideID == ($slides.length - 1)) + { + $slide.height((slideHeight - outerHeight) + spareHeight); + } + else + { + $slide.height(slideHeight - outerHeight); + } + $slide.width(slideWidth - outerWidth); } - $slide.height(slideHeight - outerHeight); - // Each slide type has type specific features if ($slide.hasClass('slideshow_slide_text')) { @@ -429,7 +483,8 @@ } // Add up total width - totalWidth += $slide.outerWidth(true); + totalWidth += $slide.outerWidth(true); + totalHeight += $slide.outerHeight(true); }, this)); $view.css({ @@ -437,4 +492,4 @@ 'height': viewHeight }); }; -}()); \ No newline at end of file +}()); From 3388d8108a821ab234e5d3b6f7088fb8bce4645d Mon Sep 17 00:00:00 2001 From: LeoZandvliet Date: Sun, 27 Dec 2015 18:06:02 +0100 Subject: [PATCH 2/3] Update slideshow.modules.js Based some css on vertical orientation --- js/frontend/slideshow/slideshow.modules.js | 56 +++++++++++++++++----- 1 file changed, 45 insertions(+), 11 deletions(-) diff --git a/js/frontend/slideshow/slideshow.modules.js b/js/frontend/slideshow/slideshow.modules.js index 16873c9..b262cdd 100644 --- a/js/frontend/slideshow/slideshow.modules.js +++ b/js/frontend/slideshow/slideshow.modules.js @@ -48,7 +48,14 @@ { $.each(this.$container.find('.slideshow_description_box'), $.proxy(function(key, description) { - $(description).css('top', this.$container.outerHeight(true)); + if(this.settings['orientation']=='horizontal') + { + $(description).css('top', this.$container.outerHeight(true)); + } + else + { + $(description).css('top', $(description).closest('.slideshow_slide').outerHeight(true)); + } }, this)); }, this)); @@ -62,14 +69,22 @@ $.each($(this.$views[this.visibleViews[1]]).find('.slideshow_description_box'), $.proxy(function(key, description) { - $(description).css('top', this.$container.outerHeight(true)); + if(this.settings['orientation']=='horizontal') + { + $(description).css('top', this.$container.outerHeight(true)); + } + else + { + $(description).css('top', $(description).closest('.slideshow_slide').outerHeight(true)); + } }, this)); }, this)); // Register a mouse enter event to animate showing the description boxes. this.$slides.mouseenter($.proxy(function(event) - { + { var $description = $(event.currentTarget).find('.slideshow_description_box'); + var $slide = $(event.currentTarget).closest('.slideshow_slide'); // Use a timer, so the description doesn't pop up on fly-over this.descriptionTimer = setTimeout( @@ -79,9 +94,18 @@ this.descriptionTimer = ''; // Animate pop up - $description - .stop(true, false) - .animate({ 'top': (this.$container.outerHeight(true) - $description.outerHeight(true)) }, parseInt(this.settings['descriptionSpeed'] * 1000, 10)); + if(this.settings['orientation']=='horizontal') + { + $description + .stop(true, false) + .animate({ 'top': (this.$container.outerHeight(true) - $description.outerHeight(true)) }, parseInt(this.settings['descriptionSpeed'] * 1000, 10)); + } + else + { + $description + .stop(true, false) + .animate({ 'top': ($slide.outerHeight(true) - $description.outerHeight(true)) }, parseInt(this.settings['descriptionSpeed'] * 1000, 10)); + } }, this), 200 ); @@ -99,10 +123,20 @@ } // Find description and stop its current animation, then start animating it out - $(event.currentTarget) - .find('.slideshow_description_box') - .stop(true, false) - .animate({ 'top': this.$container.outerHeight(true) }, parseInt(this.settings['descriptionSpeed'] * 1000, 10)); + if(this.settings['orientation']=='horizontal') + { + $(event.currentTarget) + .find('.slideshow_description_box') + .stop(true, false) + .animate({ 'top': this.$container.outerHeight(true) }, parseInt(this.settings['descriptionSpeed'] * 1000, 10)); + } + else + { + $(event.currentTarget) + .find('.slideshow_description_box') + .stop(true, false) + .animate({ 'top': $(event.currentTarget).outerHeight(true) }, parseInt(this.settings['descriptionSpeed'] * 1000, 10)); + } }, this)); }; @@ -451,4 +485,4 @@ } }, this)); }; -}()); \ No newline at end of file +}()); From 86bf43b134fdbd066b4c2a0f6f511ad52c544314 Mon Sep 17 00:00:00 2001 From: LeoZandvliet Date: Sun, 27 Dec 2015 18:07:24 +0100 Subject: [PATCH 3/3] Update SlideshowPluginSlideshowSettingsHandler.php Added the option 'Orientation', to allow a vertical oriented slideshow. --- classes/SlideshowPluginSlideshowSettingsHandler.php | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/classes/SlideshowPluginSlideshowSettingsHandler.php b/classes/SlideshowPluginSlideshowSettingsHandler.php index 2c23420..53958b6 100644 --- a/classes/SlideshowPluginSlideshowSettingsHandler.php +++ b/classes/SlideshowPluginSlideshowSettingsHandler.php @@ -432,7 +432,8 @@ static function getDefaultSettings($fullDefinition = false, $fromDatabase = true 'waitUntilLoaded' => 'true', 'showLoadingIcon' => 'true', 'random' => 'false', - 'avoidFilter' => 'true' + 'avoidFilter' => 'true', + 'orientation' => 'horizontal' ); // Read defaults from database and merge with $data, when $fromDatabase is set to true @@ -473,7 +474,8 @@ static function getDefaultSettings($fullDefinition = false, $fromDatabase = true 'waitUntilLoaded' => __('Wait until the next slide has loaded before showing it', 'slideshow-jquery-image-gallery'), 'showLoadingIcon' => __('Show a loading icon until the first slide appears', 'slideshow-jquery-image-gallery'), 'random' => __('Randomize slides', 'slideshow-jquery-image-gallery'), - 'avoidFilter' => sprintf(__('Avoid content filter (disable if \'%s\' is shown)', 'slideshow-jquery-image-gallery'), SlideshowPluginShortcode::$bookmark) + 'avoidFilter' => sprintf(__('Avoid content filter (disable if \'%s\' is shown)', 'slideshow-jquery-image-gallery'), SlideshowPluginShortcode::$bookmark), + 'orientation' => __('Orientation of the whole slideshow', 'slideshow-jquery-image-gallery'), ); $data = array( @@ -490,6 +492,7 @@ static function getDefaultSettings($fullDefinition = false, $fromDatabase = true 'enableResponsiveness' => array('type' => 'radio' , 'default' => $data['enableResponsiveness'] , 'description' => $descriptions['enableResponsiveness'] , 'group' => __('Display', 'slideshow-jquery-image-gallery') , 'options' => array('true' => $yes, 'false' => $no)), 'showDescription' => array('type' => 'radio' , 'default' => $data['showDescription'] , 'description' => $descriptions['showDescription'] , 'group' => __('Display', 'slideshow-jquery-image-gallery') , 'options' => array('true' => $yes, 'false' => $no)), 'hideDescription' => array('type' => 'radio' , 'default' => $data['hideDescription'] , 'description' => $descriptions['hideDescription'] , 'group' => __('Display', 'slideshow-jquery-image-gallery') , 'options' => array('true' => $yes, 'false' => $no) , 'dependsOn' => array('settings[showDescription]', 'true')), + 'orientation' => array('type' => 'select', 'default' => $data['orientation'] , 'description' => $descriptions['orientation'] , 'group' => __('Display', 'slideshow-jquery-image-gallery') , 'options' => array('horizontal' => __('Horizontal', 'slideshow-jquery-image-gallery'), 'vertical' => __('Vertical', 'slideshow-jquery-image-gallery'))), 'play' => array('type' => 'radio' , 'default' => $data['play'] , 'description' => $descriptions['play'] , 'group' => __('Control', 'slideshow-jquery-image-gallery') , 'options' => array('true' => $yes, 'false' => $no)), 'loop' => array('type' => 'radio' , 'default' => $data['loop'] , 'description' => $descriptions['loop'] , 'group' => __('Control', 'slideshow-jquery-image-gallery') , 'options' => array('true' => $yes, 'false' => $no)), 'pauseOnHover' => array('type' => 'radio' , 'default' => $data['loop'] , 'description' => $descriptions['pauseOnHover'] , 'group' => __('Control', 'slideshow-jquery-image-gallery') , 'options' => array('true' => $yes, 'false' => $no)), @@ -502,7 +505,7 @@ static function getDefaultSettings($fullDefinition = false, $fromDatabase = true 'waitUntilLoaded' => array('type' => 'radio' , 'default' => $data['waitUntilLoaded'] , 'description' => $descriptions['waitUntilLoaded'] , 'group' => __('Miscellaneous', 'slideshow-jquery-image-gallery'), 'options' => array('true' => $yes, 'false' => $no)), 'showLoadingIcon' => array('type' => 'radio' , 'default' => $data['showLoadingIcon'] , 'description' => $descriptions['showLoadingIcon'] , 'group' => __('Miscellaneous', 'slideshow-jquery-image-gallery'), 'options' => array('true' => $yes, 'false' => $no) , 'dependsOn' => array('settings[waitUntilLoaded]', 'true')), 'random' => array('type' => 'radio' , 'default' => $data['random'] , 'description' => $descriptions['random'] , 'group' => __('Miscellaneous', 'slideshow-jquery-image-gallery'), 'options' => array('true' => $yes, 'false' => $no)), - 'avoidFilter' => array('type' => 'radio' , 'default' => $data['avoidFilter'] , 'description' => $descriptions['avoidFilter'] , 'group' => __('Miscellaneous', 'slideshow-jquery-image-gallery'), 'options' => array('true' => $yes, 'false' => $no)) + 'avoidFilter' => array('type' => 'radio' , 'default' => $data['avoidFilter'] , 'description' => $descriptions['avoidFilter'] , 'group' => __('Miscellaneous', 'slideshow-jquery-image-gallery'), 'options' => array('true' => $yes, 'false' => $no)) ); } @@ -640,4 +643,4 @@ class="' . $class . '" // Return return $inputField; } -} \ No newline at end of file +}