Fullscreen -> full hight not working

s-l-'s Avatar

s-l-

21 Sep, 2012 02:26 PM

Hello first of all nice plugin you have there!

My Problem. Id like to setup a fullscreenslider with width:100% & height:100% of browser. But I can´t get the image to scale to 100%height :( Is it possible? I uploaded a example: http://soerenlachnit.com/sincdemo/ Would be great if you could take a look and tell me what I am doing wrong here.
Thanks in advance
Soeren

  1. Support Staff 1 Posted by Dmitry Semenov on 22 Sep, 2012 07:12 PM

    Dmitry Semenov's Avatar
  2. 2 Posted by s-l- on 24 Sep, 2012 08:31 AM

    s-l-'s Avatar

    Hi Dimitry,
    yes I tried this. My code looks like this:

     ` <div class="container-backgroundslide">
        <!--/ ANFANG SLIDER -->
        <div id="full-width-slider" class="royalSlider contentSlider rsDefault">
            <div><img class="rsImg" src="Bilder/index-bild-1.jpg"></div>
            <div><img class="rsImg" src="Bilder/index-bild-2.jpg"></div>
        </div>
        <!--/ Ende SLIDER -->
      </div>`
    

    the css:
    `

    #container-backgroundslide {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0px; /* height of thumbs (if not required set to 0) */
    height auto;
    width: auto;
    

    } ` I´d like that the hight is alway filled to bottom browser. Is that possible!?

  3. Support Staff 3 Posted by Dmitry Semenov on 24 Sep, 2012 08:33 AM

    Dmitry Semenov's Avatar

    Please read last sentence here - http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-str... You should disable autoScaleSlider.

    Dmitry

  4. 4 Posted by s-l- on 24 Sep, 2012 09:31 AM

    s-l-'s Avatar

    Mmmh, I can´t get it to work :( I rewrote everything. It shows the arrow nav but no images.

    autoScaleSlider: false, 
    autoHeight: false,
    

    The HTML looks like this:
    ` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    test-fs-slider



      <div id="container-backgroundslide">
        <div id="full-width-slider" class="royalSlider rsDefault">
            <div><img class="rsImg" src="Bilder/index-bild-1.jpg"></div>
            <div><img class="rsImg" src="Bilder/index-bild-2.jpg"></div>
        </div>
      </div>
    
    <script src="assets/js/jquery.js"></script>
    <script src="royalslider/jquery.royalslider.min.js"></script>
    
    
    <script id="addJS">jQuery(document).ready(function($) {
    

    $('#full-width-slider').royalSlider({

    arrowsNav: true,
    loop: false,
    keyboardNavEnabled: true,
    controlsInside: false,
    imageScaleMode: 'fill',
    arrowsNavAutoHide: false,
    autoScaleSlider: false, 
    controlNavigation: 'none',
    navigateByClick: true,
    startSlideId: 0,
    autoPlay: false,
    transitionType:'fade',
    autoHeight: false,
    

    }); });
    `

    the CSS:

    `#container-backgroundslide {

    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0px; /* height of thumbs (if not required set to 0) */
    height: auto;
    width: auto;
    

    }`

    I uploaded a new demopage here:

    http://www.soerenlachnit.com/sincdemo/test-fs-slider.html

  5. Support Staff 5 Posted by Dmitry Semenov on 24 Sep, 2012 01:29 PM

    Dmitry Semenov's Avatar

    Apply these styles to slider root node (.royalSlider), or change height 'auto' to 100%.

    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