How can I make JSSOR change its aspect ratio?

Question

I'm an art photographer in my spare time, and I'm working on a new design for my web site (note: NSFW) using a great open-source slideshow library, JSSOR.

I want to fill the browser without changing the aspect ratio of the photos (i.e., center them as large as possible).

A $FillMode of 1 works beautifully for this, but I'm having trouble creating code to respond to browser resize/rotation.

Calculating the proper new height/width (browser minus footer text and a little margin) on resize is easy, but there appears to be no way to set the width and height programmatically after the slideshow has initialized. Am I missing something?

All of the responsive code I've seen for JSSOR (e.g., this answer) uses the $ScaleWidth() method. Unfortunately, that method attempts to maintain the aspect ratio of the slideshow canvas, while I want the slideshow canvas to stretch with the browser (while maintaining the aspect ration of the photo via the $FillMode=1 logic).

I dug into the code for $ScaleWidth(), but there's some weird DOM-voodoo in there, so I haven't figured out how to create a my own method to force-resize to a particular width and height.

Ideas?

Answer 1

Scripts

<!-- it works the same with all jquery version from 1.x to 2.x -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (39KB) or jssor.sliderc.mini.js (31KB, with caption, no slideshow) or jssor.sliders.mini.js (26KB, no caption, no slideshow) instead for release -->
<!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
<script type="text/javascript" src="../js/jssor.core.js"></script>
<script type="text/javascript" src="../js/jssor.utils.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var _SlideshowTransitions = [
        //Fade
        { $Duration: 700, $Opacity: 2, $Brother: { $Duration: 1000, $Opacity: 2 } }
        ];

        var options = {
            $FillMode: 1,                                       //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
            $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlayInterval: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
            },

            $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSlider() {
            var windowWidth = $(window).width();

            if (windowWidth) {
                var windowHeight = $(window).height();
                var originalWidth = jssor_slider1.$OriginalWidth();
                var originalHeight = jssor_slider1.$OriginalHeight();

                var scaleWidth = windowWidth;
                if (originalWidth / windowWidth < originalHeight / windowHeight) {
                    scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
                }

                jssor_slider1.$ScaleWidth(scaleWidth);
            }
            else
                window.setTimeout(ScaleSlider, 30);
        }

        ScaleSlider();

        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end

    });
</script>

html

<div style="position: relative; width: 100%; overflow: hidden;">
    <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
        <!-- Jssor Slider Begin -->
        <!-- You can move inline styles to css file or css block. -->
        <div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1000px; height: 1000px;">
            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: relative; left: 0px; top: 0px; width: 1000px; height: 1000px; overflow: hidden; ">
                <div><img u="image" src="tallent/web-2012-01-29-183109.jpg" /></div>
                <div><img u="image" src="tallent/web-2014-04-01-104205.jpg" /></div>
                <div><img u="image" src="tallent/test-wide.jpg" /></div>
                <div><img u="image" src="tallent/web-2012-02-04-123703.jpg" /></div>
                <div><img u="image" src="tallent/web-2012-06-02-083648.jpg" /></div>
                <div><img u="image" src="tallent/web-2014-04-01-093103.jpg" /></div>
                <div><img u="image" src="tallent/web-2013-11-20-131902.jpg" /></div>
                <div><img u="image" src="tallent/web-2013-06-30-184152.jpg" /></div>
                <div><img u="image" src="tallent/web-2013-04-19-163938.jpg" /></div>
                <div><img u="image" src="tallent/web-2013-03-10-084125.jpg" /></div>
            </div>

            <!-- Arrow Navigator Skin Begin -->
            <style>
                        /* jssor slider arrow navigator skin 03 css */
                        /*
                .jssora03l              (normal)
                .jssora03r              (normal)
                .jssora03l:hover        (normal mouseover)
                .jssora03r:hover        (normal mouseover)
                .jssora03ldn            (mousedown)
                .jssora03rdn            (mousedown)
                */
                        .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn {
                            position: absolute;
                            cursor: pointer;
                            display: block;
                            background: url(../img/a03.png) no-repeat;
                            overflow: hidden;
                        }

                        .jssora03l {
                            background-position: -3px -33px;
                        }

                        .jssora03r {
                            background-position: -63px -33px;
                        }

                        .jssora03l:hover {
                            background-position: -123px -33px;
                        }

                        .jssora03r:hover {
                            background-position: -183px -33px;
                        }

                        .jssora03ldn {
                            background-position: -243px -33px;
                        }

                        .jssora03rdn {
                            background-position: -303px -33px;
                        }
            </style>
            <!-- Arrow Left -->
            <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
            </span>
            <!-- Arrow Right -->
            <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px">
            </span>
            <!-- Arrow Navigator Skin End -->
        </div>
    </div>
</div>

Answer 2

For anyone who comes looking for $ResizeCanvas. They've finally added a function that can help get the required slider size with $ScaleSize.

For the latest version 25.2.0, we added a new method $ScaleSize(width, height) instead of $ResizeCanvas.