Comment faire pour que JSSOR change son format d'image?

je suis photographe d'art dans mon temps libre, et je travaille sur un nouveau design pour mon site web (note: NSFW) en utilisant une grande bibliothèque de diaporamas open-source, JSSOR .

je veux remplir le navigateur sans changer le format des photos ( i.e. , les centrer aussi grand que possible).

Un $FillMode de 1 fonctionne à merveille, mais je vais avoir de la difficulté à créer du code pour répondre au redimensionnement/à la rotation du navigateur.

calculer la nouvelle hauteur/largeur appropriée (navigateur moins texte du pied de page et un peu de marge) sur Redimensionner est facile, mais il semble qu'il n'y ait aucun moyen de définir la largeur et hauteur programmatique après que le diaporama a initialisé. Ai-je raté quelque chose?

tout le code responsive que J'ai vu pour JSSOR ( e.g. , cette réponse ) utilise $ScaleWidth() la méthode. Malheureusement, cette méthode tente de maintenir le rapport d'aspect de la toile de diaporama, alors que je veux la toile de diaporama à stretch avec le navigateur (tout en maintenant le rapport d'aspect de la photo via la $FillMode=1 logique).

j'ai creusé dans le code pour $ScaleWidth() , mais il y a du DOM-voodoo bizarre là-dedans, donc je n'ai pas compris comment créer une méthode my own pour forcer-redimensionner à une largeur particulière et hauteur.

idées?

2
demandé sur Community 2014-06-29 07:27:56

2 réponses

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>
5
répondu jssor 2015-03-03 09:05:11

pour quiconque vient chercher $ ResizeCanvas. Ils ont finalement ajouté une fonction qui peut aider à obtenir la taille de curseur nécessaire avec $ScaleSize.

pour la dernière version 25.2.0, nous avons ajouté une nouvelle méthode $ScaleSize (width, hauteur) au lieu de $ ResizeCanvas.

1
répondu Ayush Agrawal 2017-08-31 01:17:19