javascript - 我怎样才能让 JSSOR 改变它的纵横比？

Question

我在业余时间是一名艺术摄影师，我正在使用一个很棒的开源幻灯片库为我的网站(注:NSFW)进行新设计，JSSOR .

我想在不改变照片纵横比的情况下填充浏览器(即，让它们尽可能大地居中)。

1 的 $FillMode 对此效果很好，但我在创建响应浏览器大小调整/旋转的代码时遇到了问题。

在调整大小时计算适当的新高度/宽度(浏览器减去页脚文本和一点边距)很容易，但似乎无法在幻灯片放映后以编程方式设置宽度和高度初始化。我错过了什么吗？

我见过的所有 JSSOR 响应式代码(例如，this answer)都使用了 $ScaleWidth() 方法。不幸的是，该方法试图保持幻灯片 Canvas 的纵横比，而我希望幻灯片 Canvas 随浏览器拉伸(stretch)(同时保持照片 通过 $FillMode=1 逻辑)。

我深入研究了 the code对于 $ScaleWidth()，但是里面有一些奇怪的 DOM-voodoo，所以我还没有想出如何创建一个我自己的方法来强制调整到特定宽度和 高度。

想法？

Answer 1

脚本

<!-- 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>