How stretch slider to full browser width and height?

gk's Avatar

gk

11 Oct, 2012 01:04 PM

Can you provide an demo page with a full-page slider?

Following the CSS on the KB article "How stretch slider to full browser width and height? " my photos stretch too much. But instead of my providing a link example, could you provide a demo implementation?

  1. Support Staff 1 Posted by Dmitry Semenov on 11 Oct, 2012 07:32 PM

    Dmitry Semenov's Avatar

    Hi,

    Please send me link to page and I'll tell you what's wrong.

    Dmitry

  2. 2 Posted by gk on 12 Oct, 2012 07:49 AM

    gk's Avatar

    See sample attached.

    <div class="sliderContainer fullWidth clearfix">
        <div id="full-slider" class="royalSlider rsDefault">
            <img class="rsImg" src="Penguins.jpg" alt="penguins" />
            <img class="rsImg" src="Tulips.jpg" />
        </div>
    


  3. Support Staff 3 Posted by Dmitry Semenov on 12 Oct, 2012 01:49 PM

    Dmitry Semenov's Avatar

    You had an extra }); in js code.

    Dmitry

  4. 4 Posted by gk on 12 Oct, 2012 02:59 PM

    gk's Avatar

    Ok, but still. The full browser view crops the image:
    http://screencast.com/t/CaRAR9h3tvHz

    That is, unzipping your attachment and opening the index.html with Firefox the slider images don't display correctly. They seem cropped.

  5. Support Staff 5 Posted by Dmitry Semenov on 13 Oct, 2012 06:50 AM

    Dmitry Semenov's Avatar

    How image is resized depends on imageScaleMode option. http://dimsemenov.com/plugins/royal-slider/documentation/#options

    Dmitry

  6. 6 Posted by gk on 13 Oct, 2012 07:12 AM

    gk's Avatar

    Dmitry, the 'fill' option should fill the browser screen but without cropping it in part. This is a bug. Supersized* gets it right.

  7. Support Staff 7 Posted by Dmitry Semenov on 13 Oct, 2012 07:32 PM

    Dmitry Semenov's Avatar

    On this image resizer app site is good illustration about what "fill" scale mode does - http://www.simpleviewer.net/simpleviewer/pro/support/layout_guide.html

    Let me please deside where bug is.

    Dmitry

  8. Dmitry Semenov closed this discussion on 13 Oct, 2012 07:32 PM.

  9. gk re-opened this discussion on 13 Oct, 2012 09:01 PM

  10. 8 Posted by gk on 13 Oct, 2012 09:01 PM

    gk's Avatar

    ok, so it's a feature request can you add the STRETCH mode?

  11. Support Staff 9 Posted by Dmitry Semenov on 14 Oct, 2012 12:11 PM

    Dmitry Semenov's Avatar

    If you wish stretch mode, you may simply set imageScaleMode and align to none and stretch it via CSS: .royalSlider img {width: 100%; height: 100%}

    Dmitry

  12. 10 Posted by gk on 22 Oct, 2012 10:13 AM

    gk's Avatar

    That didn't work so well either. The slides didn't stretch appropriately. http://screencast.com/t/TJ7FgjkdNx5e

    <style type="text/css">      
           #full-height-slider {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                width: auto;
                height:auto;
                z-index: 0;
          }
          
          .royalSlider img {width: 100%; height: 100%}
        </style>
        
        <script>
    jQuery(document).ready(function($) {
          $('#full-height-slider').royalSlider({
         imageScaleMode : 'none'
          });
    });
        </script>
        </head>
    <body>                    
     <div id="full-height-slider" class="royalSlider rsDefault">
        <img class="rsImg" src="Penguins.jpg" alt="penguins" />
        <img class="rsImg" src="Tulips.jpg" />
    </div>
    </body>
    
  13. Support Staff 11 Posted by Dmitry Semenov on 22 Oct, 2012 06:13 PM

    Dmitry Semenov's Avatar

    Hi,

    You probably missed that you need also to disable align to center

    jQuery(document).ready(function($) {
          $('#full-height-slider').royalSlider({
         imageScaleMode : 'none',
         imageAlignCenter: false
          });
    });
    

    Dmitry

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac