making royal slider fullscreen

Question

Hi I'm using royal slider and am trying to make it fullscreen. The nav arrows seem to be working correctly, but nothing else does. I'd like it to function like this site (click on any of the thumbnails to see the slider) http://ahrengot.com/work/skive-festival-website/ and this is the page I'm having trouble replicate that http://klossal.com/js/royalslider/demo/test.html

Any help I can get with this would be great, this is pretty much the last feature I need for my site and I've just been failing at it for acouple days now, thanks.

HTML:

<div id="content-slider" class="royalSlider iskin">                
<ul class="royalSlidesContainer">       
    <li class="royalSlide"> 
        <div style="border:1px solid red;height:100%;">
            <img src="img/contentSliderAssets/4.jpg" width="285" height="200"/>
            <div style="border:1px solid red;">
                <h4>Content Slider</h4>
                <p>You can place HTML content on each slide, touch navigation still 
works. Also you can disable mouse navigation completely or just for specific elements:   
</p>
                <a class="learnMore non-draggable" href="javascript:void()">Non-  
draggable element</a>
                <a class="learnMore" href="javascript:void()">Draggable element</a>
            </div>
        </div>
    </li>
    <li class="royalSlide"> 
        <div >
            <img src="img/contentSliderAssets/1.jpg" width="195" height="240"/>
            <img src="img/contentSliderAssets/2.jpg" width="178" height="240"/>
            <img src="img/contentSliderAssets/3.jpg" width="197" height="240"/>
        </div>
    </li>
    <li class="royalSlide"> 
        <div>               
            <div style="text-align:center; width: 660px; margin: 100px auto 0;">                    
                <p>Slider is tested on  iPad, iPad 2, iPhone 4, HTC Desire and 
Blackberry PlayBook.<br/> If you've found that something works incorrect on your 
device, so please contact me using contact form on my <a 
href="http://goo.gl/H9VAg">profile page</a> and I'll try to fix it asap.</p>
            </div>   
        </div>      
    </li>        
</ul>   
</div>

CSS:

/**
*  Slides area (set background here)
*/

.royalSlider .royalWrapper {
overflow:hidden;    
position:relative;

width:100%; 
height:100%;
}
.royalSlider .royalSlide,
.royalSlider .royalWrapper {
/* Bakground behind slides */
background: #111111;
}
/* slides holder, grabbing container */
.royalSlider .royalSlidesContainer {
position: relative;
left: 0;
top: 0 !important;
list-style:none !important;
margin:0 !important;
padding:0 !important;
border: 0 !important;
}


/* slide item */
.royalSlider .royalSlide {
padding: 0 !important;
margin: 0 !important;   
border: 0 !important;
list-style: none !important;

position:relative;
float:left; 

overflow:hidden;    
}

/* 

Direction Navigation (arrows) 

*/
.royalSlider .arrow
{   
/*background:url(../img/controlsSprite.png) no-repeat 0 0;*/
background-color: #C00;
background-repeat: no-repeat;
background-position: 0 0;

/* change arrows size here */
width: 45px;
height: 90px;

top:50%;
margin-top:-45px;   

cursor: pointer;
display: block;
position: absolute;     

z-index:25;

}
.royalSlider .arrow:hover {

}
.royalSlider .arrow.disabled {

}
/* left arrow */
.royalSlider .arrow.left {
background-position: top left;
left: 0;    
}
/* right arrow */
.royalSlider .arrow.right {
background-position: top right;
right: 0;
 }




/* Control navigation container (bullets or thumbs) */
.royalSlider .royalControlNavOverflow {
width:100%;
overflow:hidden;
position:absolute;
margin-top:-20px;
z-index:25;
}
/* This container is inside ".royalControlNavContainer"  
and is used for auto horizontal centering */
.royalSlider .royalControlNavCenterer { 
float: left;
position: relative;
left: -50%;
}
/* Control navigation container*/ 
.royalSlider .royalControlNavContainer {
float: left;
position: relative;
left: 50%;  
}


/* Scrollable thumbnails containers */
.royalSlider .royalControlNavThumbsContainer {      
left:0;
position:relative;
}
.royalSlider .thumbsAndArrowsContainer {
overflow:hidden;
width: 100%;
position: relative;
}
.royalSlider .royalControlNavOverflow.royalThumbs { 
width: auto;
position: relative;
overflow: hidden;
margin-top:4px; 
}






/* 

Control navigation (bullets, thumbnails)

*/
.royalSlider .royalControlNavOverflow a{    
background:#0C0 none no-repeat scroll 0 0;

width:20px;
height:20px;    

float:left; 
cursor:pointer; 

position:relative;
display:block;

text-indent: -9999px;   
}
/* Current control navigation item */
.royalSlider .royalControlNavOverflow a.current {   
background-color: #C00; 
}
/* Hover state navigation item */
.royalSlider .royalControlNavOverflow a:hover { 
background-color: #00C;
}

/* Thumbnails */
.royalSlider .royalControlNavOverflow a.royalThumb{ 
/*background: none no-repeat 0 0;*/
/*background-color: ;*/
width:144px;
height:60px;    
/* thumbnails spacing, use margin-right only */ 
margin-right:4px;

}
.royalSlider .royalControlNavOverflow a.royalThumb.current {    
background-position: -3px -3px  !important;
border:3px solid #C00 !important;
width:138px;
height:54px;
}
.royalSlider .royalControlNavOverflow a.royalThumb:hover {  
background-position: -3px -3px; 
border:3px solid #00C;
width:138px;
height:54px;
}



/* 

Thumbnails navigation arrows 

*/
.royalSlider .thumbsArrow { 
width: 38px;
height: 68px;   

cursor: pointer;
display: block;
position: relative;     
z-index: 25;

background: #C99;

}
.royalSlider .thumbsArrow.left {    
float: left;
}
.royalSlider .thumbsArrow.right {   
float: right;
}
.royalSlider .thumbsArrow:hover  {

}
.royalSlider .thumbsArrow.disabled {

}






/* Captions container */
.royalSlider .royalCaption {
z-index:20;
display:block;
position:absolute;  
left:0;
top:0;
/*font: normal normal normal 1em/1.5em Georgia, serif;
color:#FFF;     */
}
/* Caption item */
.royalSlider .royalCaptionItem {
position:absolute;  
left:0;
top:0;
margin: 0;
padding: 0;
}



/* Loading (welcome) screen */
.royalSlider .royalLoadingScreen {
background:#FFF;
width:100%;
height:100%;
position:absolute;
z-index:99; 
}
/* Loading screen text ("Loading...") */
.royalSlider .royalLoadingScreen p {        
width:100%;
position:absolute;  
margin:0 auto;
top: 45%;
text-align:center;
}

/* single slide image preloader */
.royalSlider .royalPreloader {  
position:absolute;
width:24px;
height:24px;
left:50%;
top:50%;
margin-left:-12px;
margin-top:-12px;   
z-index:0;  
background-image:url(../img/preloader.gif);
}

.royalSlider .grab-cursor{cursor:move;}
.royalSlider .grab-cursor{cursor:url("../img/cursors/grab.png") 8 8,-moz-grab;}
.royalSlider .grab-cursor{*cursor:url(../img/cursors/grab.cur);}
.royalSlider .grab-cursor{cursor:move\0/;} /* ie8 hack */

.royalSlider .grabbing-cursor{cursor:move;}
.royalSlider .grabbing-cursor{cursor:url("../img/cursors/grabbing.png") 8 8,-moz-
grabbing;}
.royalSlider .grabbing-cursor{*cursor:url(../img/cursors/grabbing.cur);}


/* Cursor used if mouse dragging is disabled */
.royalSlider .auto-cursor{cursor:auto;}

.royalSlider .royalHtmlContent {
position: absolute;
top: 0;
left: 0;
}
.royalSlider .non-draggable {
cursor: auto;
}
.royalSlider .fade-container .royalSlide{
position: absolute;
left: 0;
top: 0;
list-style-type: none;
margin: 0;
padding: 0;
z-index: 10;
}
.royalSlider .royalImage {
max-width:none;
margin:0;
padding: 0 !important;
border: 0 !important;   
}

Solution 1

Why not to ask script author. Auto scale slider option make height scale based on width, you need to disable it if you want it fullscreen.

.royalSlider {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
height: auto;
width: auto;
}

Solution 2

In Royalslider's script file you can manage it by setting following values:

     autoScaleSlider: true,  // Overrides css slider size settings. Sets slider height based on base width and height. Don't forget to set slider width to 100%.
     autoScaleSliderWidth: 0,   // Base slider width
     autoScaleSliderHeight: 0, 

Solution 3

I Noticed your question because I saw tracffic coming to my portfolio from here. My entire WordPress theme is actually public on Github, so you can just take a peek at my code. Here's the link: https://github.com/Ahrengot/Ahrengot-WP-Theme

and here's a link to the JS file used by the gallery: https://github.com/Ahrengot/Ahrengot-WP-Theme/blob/master/library/js/work-gallery.js

Hope this helps :)

Comments

[loriensleafs]

so, I tried that and it seems to not work, this is what it looks like with those settings in play klossal.com/js/royalslider/demo/test.html

[loriensleafs]

do you know why the height is restricted?

[loriensleafs]

wow, thank you so much, my last question is, for the first image there, how would I make it so the image is as full screen as it could be with out cropping width or height, but keeping it centered? So, there are two methods I'm wondering about, how would I do it with the way it currently is: <li class="royalSlide"> <img class="royalImage" src="klossal.com/portfolio/space_2_header.png" /> </li>

[loriensleafs]

and how would I do it keeping that image in a div, so I guess more like a content scroller set up?

[Dmitry Semenov]

There are imageScaleMode and imageAlignCenter options. Please check Javascript options section in docs.