Clever Geek Handbook

How to resize Jssor Image slider without losing responsive nature, image aspect ratio, etc. IPhone only?

The website I am developing is sensitive to nature i.e. the design of the website is customized according to the device on which it is viewed. I used the Bootstrap framework .

I am using the Jssor JQuery Image slider in my website. It works great and works perfect for me on all devices and all popular widely known browsers. The only problem I am facing is when it is viewed on iPhone, the sliding images in the Jssor slider need to be resized 460 px * 280 px

. In other words, the Jssor image slider should appear slightly larger than the current size. However, the aspect ratio of the image displayed in the slider must be maintained.

Also, when the site is viewed on an iPhone, the image slider should fill the entire horizontal screen. This image slider should not have any white space appearing around the slider. Currently, two vertical blanks appear on both sides of the slider.

Initially, when a website is viewed in a browser on a PC or laptop, the slider image resolution is 940 px * 370 px

and it automatically adjusts according to the size of the device it is viewed on.

The specified measurement change should only occur on the iPhone and not on other devices. On other devices, it works perfectly and perfectly. Also, the aspect ratio of the image should not be disturbed in this process.

For your reference, I am putting below the HTML code and the jQuery slider code. All required library files are included.

HTML code:

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 940px; height: 370px; overflow: hidden; ">

      <div u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
        <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
      </div>     

      <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 940px; height: 370px; overflow: hidden;">
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Bud_Light_Lime_1413041685.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute; left:350px; bottom: 40px;  width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Finlandia_1413041875.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Three_Olives_1413042332.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute;left:350px; bottom: 40px;  width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Avalon_1413041406.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Brancott_1413042551.JPG" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute;left:350px; bottom: 40px;  width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
      </div>        
      <div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">           
        <div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
      </div>        
      <style>
      .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
        background: url(img/b05.png) no-repeat;
        overflow: hidden;
        cursor: pointer;
      }

      .jssorb05 div {
        background-position: -7px -7px;
      }

      .jssorb05 div:hover, .jssorb05 .av:hover {
        background-position: -37px -7px;
      }

      .jssorb05 .av {
        background-position: -67px -7px;
      }

      .jssorb05 .dn, .jssorb05 .dn:hover {
        background-position: -97px -7px;
      }
      .jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn {
        position: absolute;
        cursor: pointer;
        display: block;
        background: url(img/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;
      }

      .jssora12ldn {
        background-position: -256px -37px;
      }

      .jssora12rdn {
        background-position: -315px -37px;
      }
      .captionOrange, .captionBlack {
        color: #fff;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
      }
      .captionOrange {
        background: #EB5100;
        background-color: rgba(235, 81, 0, 0.6);
      }
      .captionBlack {
        font-size:16px;
        background: #000;
        background-color: rgba(0, 0, 0, 0.4);
      }
      a.captionOrange, A.captionOrange:active, A.captionOrange:visited {
        color: #ffffff;
        text-decoration: none;
      }
      a.captionOrange:hover {
        color: #eb5100;
        text-decoration: underline;
        background-color: #eeeeee;
        background-color: rgba(238, 238, 238, 0.7);
      }
      .bricon {
        background: url(img/browser-icons.png);
      }
    </style>       
    <span u="arrowleft" class="jssora12l" style="width: 30px; height: 46px; top: 123px; left: 0px;"></span>
    <span u="arrowright" class="jssora12r" style="width: 30px; height: 46px; top: 123px; right: 0px"></span>        
      <a style="display: none" href="http://www.jssor.com">javascript</a>
    </div>

JQuery code:

<script>
    jQuery(document).ready(function ($) {

      var _SlideshowTransitions = [{ $Duration: 1200, $Opacity: 2 }];

      var options = {
        $AutoPlay: 1,                                    
        $AutoPlaySteps: 1,                                  
        $Idle: 3000,                            
        $PauseOnHover: 1,                               
        $ArrowKeyNavigation: true,                          
        $SlideDuration: 500,                                
        $MinDragOffsetToSlide: 20,                          
        $SlideSpacing: 0,                                   
        $Cols: 1,                                  
        $Align: 0,                                
        $UISearchMode: 1,                                   
        $PlayOrientation: 1,                                
        $DragOrientation: 3,                                

        $SlideshowOptions: {                                
          $Class: $JssorSlideshowRunner$,                 
          $Transitions: _SlideshowTransitions,            
          $TransitionsOrder: 1,                           
          $ShowLink: true                                    
        },

        $BulletNavigatorOptions: {                                
          $Class: $JssorBulletNavigator$,                       
          $ChanceToShow: 2,                               
          $Steps: 1,                                      
          $Rows: 1,                                      
          $SpacingX: 10,                                   
          $SpacingY: 10,                                   
          $Orientation: 1                                 
        },

        $ArrowNavigatorOptions: {
          $Class: $JssorArrowNavigator$,              
          $ChanceToShow: 2,                               
          $Steps: 1                                       
        }
      };
      var jssor_slider1 = new $JssorSlider$("slider1_container", options);

      function ScaleSlider() {
        var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
        if (parentWidth)
          jssor_slider1.$ScaleWidth(Math.min(parentWidth, 940));
        else
          window.setTimeout(ScaleSlider, 30);
        }

        ScaleSlider();

        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
          $(window).bind('resize', ScaleSlider);
        }       
    });
    </script>
+3


source to share


3 answers 


//Your website
jQuery(document).ready(function ($) { 
   //...
   function ScaleSliderDevices() {
             var bodyWidth = DEVICE.Screen.width();
             if (DEVICE.Screen.osDimVariation()) {
                 bodyWidth = DEVICE.Screen.width() + osWidthOffset();
             }
              jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 940));
         };

    //...
    if (DEVICE.mobile())
    {
        $(window).bind('resize', ScaleSliderDevices);
    }

    //as the resize event may not fire at the beginning sometimes, please scale slider manually after document load
    ScaleSliderDevices();
}


+1


source


Since you are already using bootstrap, why not use the bootstrap built into the carousel? All responsive work is done for you.

plnkr demo



<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

        <div class="item active">
            <img src="http://smartrebate.eywaharvest.com/images/brands/Bud_Light_Lime_1413041685.jpg" />
            <div class="carousel-caption">
                slideshow transition twins
            </div>
        </div>

        <div class="item">
            <img src="http://smartrebate.eywaharvest.com/images/brands/Three_Olives_1413042332.jpg" />
            <div class="carousel-caption">
                slideshow transition twins
            </div>
        </div>

        <div class="item">
            <img src="http://smartrebate.eywaharvest.com/images/brands/Avalon_1413041406.jpg" />
            <div class="carousel-caption">
                slideshow transition twins
            </div>
        </div>

        <div class="item">
            <img src="http://smartrebate.eywaharvest.com/images/brands/Brancott_1413042551.JPG" />
            <div class="carousel-caption">
                slideshow transition twins
            </div>
        </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
+1


source


Conclusion: Added resizing for each device:

  • Added device detection https://github.com/matthewhudson/device.js/blob/master/lib/device.js source inside js with small updates made by me to resolve width and height issues on IOS.

  • Added a slider scale to match the width of the body, not the parent width, you may need to calculate both the parent and the width.

    //Your website
jQuery(document).ready(function ($) { 
//...
       function ScaleSliderDevices() {
                 var bodyWidth = DEVICE.Screen.width();
                 if (DEVICE.Screen.osDimVariation()) {
                     bodyWidth = DEVICE.Screen.width() + osWidthOffset();
                 }
                  jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 940));
             };

//...
if (DEVICE.mobile())
        {
            $(window).bind('resize', ScaleSliderDevices);
        }
}

  • add resize event for devices (mostly rotation)

JSFIDDLE: Example does not run on devices, using code in your local website to test it on devices.

http://jsfiddle.net/sp75dzaq/13/

You can find comments here with more details.

0


source






More articles:


All Articles