CODEWITHSUNDEEP
javascriptjqueryjssor
Kandarra
Kandarra

Reputation: 7

JSSOR Scale Size: Keep Size of Bullets and Arrows

I am using the jssor image slider with jquery. It works good, but have an issue with resizing the slider.

I want to resize the slider, when window width changes. For that, the jssor-API provides the function $ScaleWidth(newWidth). But I am not really happy with the result. After $ScaleWidth is done, it also resizes the arrows and bullets. That is not good.

If the slider gets smaller, the clickable area for arrows and bullets gets too small to click on or to be seen.

If the slider gets to big, the images become too big, that you see every pixel of the original arrow/bullet image.

Here is the code I have at the moment:

HTML

<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
   <title></title>
   <style>
        html, body{margin: 0px}
   </style>
</head>
<body>
    <div id="Slider" style="position: relative; top: 0px; left: 0px;">
    <!-- Slides Container -->
    <div id="Slides" u="slides" style="position: absolute; overflow: hidden; left: 0px; top: 0px;">
        [List of DIVs with IMG tags]
    </div>
    <!--#region Arrow Navigator Skin Begin -->
    <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
    <style>
        /* jssor slider arrow navigator skin 12 css */
        /*
        .jssora12l                  (normal)
        .jssora12r                  (normal)
        .jssora12l:hover            (normal mouseover)
        .jssora12r:hover            (normal mouseover)
        .jssora12l.jssora12ldn      (mousedown)
        .jssora12r.jssora12rdn      (mousedown)
        */
        .jssora12l, .jssora12r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 30px;
            height: 46px;
            cursor: pointer;
            background: url(/templates/SliderCore/a12.png) no-repeat;
            overflow: hidden;
        }
        .jssora12l { background-position: -16px -37px; }
        .jssora12r { background-position: -75px -37px; }
        .jssora12l:hover { background-position: -136px -37px; }
        .jssora12r:hover { background-position: -195px -37px; }
        .jssora12l.jssora12ldn { background-position: -256px -37px; }
        .jssora12r.jssora12rdn { background-position: -315px -37px; }
    </style>
    <!-- Arrow Left -->
    <span id="SliderArrowLeft" u="arrowleft" class="jssora12l" style="top: 102px; left: 0px;">
    </span>
    <!-- Arrow Right -->
    <span id="SliderArrowRight" u="arrowright" class="jssora12r" style="top: 102px; right: 0px;">
    </span>
    <!--#endregion Arrow Navigator Skin End -->

    <!--#region Bullet Navigator Skin Begin -->
    <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
    <style>
        /* jssor slider bullet navigator skin 10 css */
        /*
        .jssorb10 div           (normal)
        .jssorb10 div:hover     (normal mouseover)
        .jssorb10 .av           (active)
        .jssorb10 .av:hover     (active mouseover)
        .jssorb10 .dn           (mousedown)
        */
        .jssorb10 {
            position: absolute;
        }
        .jssorb10 div, .jssorb10 div:hover, .jssorb10 .av {
            position: absolute;
            /* size of bullet elment */
            width: 11px;
            height: 11px;
            background: url(/templates/SliderCore/b10.png) no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb10 div { background-position: -10px -10px; }
        .jssorb10 div:hover, .jssorb10 .av:hover { background-position: -40px -10px; }
        .jssorb10 .av { background-position: -70px -10px; }
        .jssorb10 .dn, .jssorb10 .dn:hover { background-position: -100px -10px; }
    </style>
    <!-- bullet navigator container -->
    <div u="navigator" class="jssorb10" style="bottom: 16px; right: 6px;">
        <!-- bullet navigator item prototype -->
        <div u="prototype"></div>
    </div>
    <!--#endregion Bullet Navigator Skin End -->
</div>
</body>
</html>

JavaScript

<script src="jquery-2.1.3.min.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
    $(document).ready(function () {
        var _SlideshowTransitions = [
            {$Duration:1200,$Opacity:2} //Fade
        ];
        var options = {
            $AutoPlay: true,
            $FillMode: 5,
            $DragOrientation: 0,
            $AutoPlayInterval: 3000,
            $LazyLoading: 1,
            $ArrowNavigatorOptions: {                       
                $Class: $JssorArrowNavigator$,              
                $ChanceToShow: 1,                           
                $AutoCenter: 2,
                $Steps: 1 
            },
            $BulletNavigatorOptions: { 
                $Class: $JssorBulletNavigator$,  
                $ChanceToShow: 2,  
                $AutoCenter: 1, 
                $Steps: 1,        
                $Lanes: 1,  
                $SpacingX: 10,       
                $SpacingY: 10,          
                $Orientation: 1           
            },
            $SlideshowOptions: {  
                $Class: $JssorSlideshowRunner$, 
                $Transitions: _SlideshowTransitions, 
                $TransitionsOrder: 1,            
                $ShowLink: false           
            }
        };

        $.clientCoords = function(){
           if ($('html').is('.ie6, .ie7, .ie8, .ie9')){
                return {
                    w:document.documentElement.offsetWidth,
                    h:document.documentElement.offsetHeight
                }
            }
            else
                return {w:window.innerWidth, h:window.innerHeight}
        }

        var MainDiv = $("#Slider");
        var SlidesDiv = $("#Slides");
        var client = $.clientCoords();
        MainDiv.css("height", client.h+ "px").css("width", client.w+"px");
        SlidesDiv.css("height",client.h+ "px").css("width",client.w+"px");

        var Slider = new $JssorSlider$('Slider', options);

        function ScaleSlider() {
            Slider.$ScaleWidth($('#Slider').parent().width());                
        }
        ScaleSlider();

        $(window).bind('resizeEnd', function() {
            ScaleSlider();
        });

        $(window).resize(function() {
            if(this.resizeTO) 
                  clearTimeout(this.resizeTO);
            this.resizeTO = setTimeout(function() {
                $(this).trigger('resizeEnd');
            }, 500);
        });
    });
</script>

Is there any other way to resize the slider area and relocate the arrows/bullets?

I think relocating the arrows after scaling the slider using jquery will be not the problem. But how to resize the jssor slider while it is on AutoPlay and do no restart?

I tried to use 

MainDiv.css('width', newWidth+'px').css('height',newHeight+'px');
SlidesDiv.css('width', newWidth+'px').css('height',newHeight+'px');

But this did not effect the running slider. It stayed the size it had on Autoplay start.

Upvotes: 0

Views: 587

Answers (1)

Fenistil
Fenistil

Reputation: 3801

You can add $Scale: false to your $ArrowNavigatorOptions and $BulletNavigatorOptions to prevent it from resizing.

$ArrowNavigatorOptions: {                       
    $Class: $JssorArrowNavigator$,              
    $ChanceToShow: 1,                           
    $AutoCenter: 2,
    $Steps: 1,
    $Scale: false
},
$BulletNavigatorOptions: { 
    $Class: $JssorBulletNavigator$,  
    $ChanceToShow: 2,  
    $AutoCenter: 1, 
    $Steps: 1,        
    $Lanes: 1,  
    $SpacingX: 10,       
    $SpacingY: 10,          
    $Orientation: 1,
    $Scale: false
},

I hope it helps.

Upvotes: 2

Related Questions