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?

I am going to workout a full screen slider like this. I will let you know when I get it ready. — jssor, Jun 29 '14 at 10:19
@jssor, wow, that would be great! In my case, I'm trying to make it *almost* full screen -- I have a little margin on the sides and a footer. Just being able to set width and height (with JSSOR responding correctly by re-filling) would do the trick. (Or, being able to tell JSSOR just to keep up with its parent on resize/orient events, since the parent can be specified in vw/vh units). — richardtallent, Jun 29 '14 at 14:38
@jssor, here's the very early stages of my design (again, not safe for work -- I photograph nudes), to give you an idea what I've been doing. It works fine on page load, but the responsive code does strange things: http://home.tallent.us/new/ — richardtallent, Jun 29 '14 at 15:20

jssor · Accepted Answer · 2015-03-03T09:05:11.427

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>

This is closer, but the wider photos aren't taking up the full browser width, they are letterboxed into the same width as the tall ones. I'd like to have the wide ones take up the full width of the page, and the tall ones take up the full height. — richardtallent, Jul 02 '14 at 06:35
Yes, you are right. We'd better add $ResizeCanvas api. But I am not sure how long it would take to get it ready. For now, the post above is the closest solution. — jssor, Jul 02 '14 at 08:07
Thanks! I'll keep an eye out for a new version that allows adjustment to a specific height/width. In the meantime, JSSOR is still much better than the other script I found that does something a bit closer ("Supersize"). — richardtallent, Jul 02 '14 at 14:14
Hi @jssor, just wondering if you've had any luck adding a $ResizeCanvas api? The only other solution I've found is to reload the page when the window is resized, which is suboptimal. — richardtallent, Dec 02 '14 at 07:50
We need hard work to rearrange structure of codes and full test. And now I am working on the online slider builder project. I am sorry that there is a long time to go. — jssor, Dec 02 '14 at 08:02

score 1 · Answer 2 · edited Aug 31 '17 at 01:17

1

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.

edited Aug 31 '17 at 01:17

FluffyKitten

13,824
10
39
52

answered Aug 31 '17 at 00:47

Ayush Agrawal

23
5

How can I make JSSOR change its aspect ratio?

2 Answers2

Linked