Home → RoyalSlider HTML version issues →

How do I show the caption when fullscreen

• Edit

gbunney

25 Sep, 2012 06:45 AM

Everything is working fine except that when it goes fullscreen the you can't see the caption. I believe it's being pushed off the bottom of the page.

What options do I need to set to correctly show my image captions in full screen mode?

The generated html looks like the following

<div id="gallery-43" class="royalSlider rsDefault fwImage">
    <a class="rsImg"  data-rsDelay="1000" href="/media/cache/2a/4b/2a4b9079557d28eb235a8f505e9fdcf6.jpg">
        <!-- The caption -->
        <small class="attribution">
            <p>Author</p>
        </small>
        <figcaption>image caption </figcaption>
        <!-- The image -->
        <img width="60" height="40" class="rsTmb" src="/media/cache/2f/18/2f180c644eb92eccb8c0040a37e52b4a.jpg" />
    </a>
    <a class="rsImg"  data-rsDelay="1000" href="/media/cache/05/1b/051bf8a02ae1d2ad2420b6418f5dca05.jpg">
        <!-- The caption -->
        <small class="attribution">
            <p>author</p>
        </small>
        <figcaption>image caption.</figcaption>
        <!-- The image -->
        <img width="60" height="40" class="rsTmb" src="/media/cache/9b/82/9b823a0b97d242b9d14133ffe00ca620.jpg" />
    </a>
</div>

<style>
  #gallery-43 {
    margin: 24px 0 66px;
    background-color: rgba(255,255,255,0.2);
  }
  .rsGCaption {
    background: black;
    color: #b2b2b2;
    display:block;
    font-size: 16px;
    line-height: 18px;
    padding-bottom: 16px;
    padding-top: 12px;
  }
  .rsGCaption span {
    display: block;
    clear: both;
    color: #bbb;
    font-size: 14px;
    line-height: 22px;
  }
  .rsGCaption small.attribution {
    color: #535353;
    font-weight: bold;
  }
</style>
<script>
    $(document).ready(function() {
      $('#gallery-43').royalSlider({
        fullscreen: {
          enabled: true,
          nativeFS: true
        },
        arrowsNavAutohide: false,
        arrowsNavHideOnTouch: false,
        autoScaleSlider: true, 
        autoScaleSliderWidth: 960,     
        autoScaleSliderHeight: 850,
        controlNavigation: 'thumbnails',
        globalCaption: true,
        imageAlignCenter: true,
        imageScaleMode: 'fit',
        keyboardNavEnabled: true,
        loop: false,
        numImagesToPreload:4
      });
    });
</script>

1. Support Staff 1 Posted by Dmitry Semenov on 25 Sep, 2012 08:14 AM

   

   When user enters fullscreen slider gets rsFullscreen class. You may set absolute position to it and put it where you need it.

   #gallery-43.rsFullscreen .rsGCaption {
       // styles for global caption in fullscreen
   }
   

   Dmitry

   • Edit

2. 2 Posted by gbunney on 26 Sep, 2012 12:15 AM

   

   That doesn't quite do what I want. Sorry if I wasn't as clear in my first post.

   In #gallery-43 I see three main divs

   1. rsOverflow
   2. rsNav
   3. rsGCaption

   The fullscreen seems to only take 1and 2 into account. Because 1 and 2 are taking up the whole screen, there is nowhere for me to put 3 (without covering some part of 1 or 2).

   I need 1 to be smaller. I can't do this with .rsFullscreen because it's height seems to be set by javascript and overwrites anything I try to do.

   Is there a way for me to make rsOverflow smaller height in fullscreen mode i.e. minus 100 pixels off the height and set the rsGCaption to fixed height of 100 pixels so everything is shown on the screen?

   • Edit

3. Support Staff 3 Posted by Dmitry Semenov on 26 Sep, 2012 06:08 PM

   

   You may change size of slider area in fullscreen via CSS. In royalslider.css, around line 80.

   Dmitry

   • Edit

4. 4 Posted by gbunney on 27 Sep, 2012 06:25 AM

   

   I'm sorry, I still don't understand how that can help.

   If I set rsGCaption to position:absolute and move it manually, then it will sit above my image and hide a portion of that image.

   Do you have an example of a fullscreen royalslider with captions turned on?

   • Edit

5. Support Staff 5 Posted by Dmitry Semenov on 27 Sep, 2012 07:33 PM

   

   Please send me link to page you're working on with turned on caption option and tell me exactly how you want it to look like in fullscreen, I'll show you CSS code that you need to add.

   Dmitry

   • Edit

6. 6 Posted by gbunney on 28 Sep, 2012 06:29 AM

   

   Thanks for your reply Dmitry

   I have attached the following.

   royalslider_fullscreen_caption.zip HTML that has the issue (my actual site is behind security).

   royalslider_minimised.png Image of the minimised state. I am happy with this

   royalslider_fullscreen_current_NO_CAPTION.png Image of the current maximised state.
   Note that you can not see the caption in this image. I know that I can set it's position to absolute and move it up, but then it would cover the image.

   royalslider_fullscreen_HOW_I_WANT_IT.png Image of what I would like.
   Note that the image has been made smaller to make room for the caption on the bottom (done with the developer inspector. I don't know how to do this with css because the height is dynamic.

   For the final solution I'm happy to have my caption box a fixed height.
   The final product is also meant to have nativeFS: true. I just turned it off for this so it was easier to screen shot.

   Thanks again for all your help so far.

   • royalslider_minimised.png 81.1 KB
   • royalslider_fullscreen_current_NO_CAPTION.png 77.4 KB
   • royalslider_fullscreen_HOW_I_WANT_IT.png 176 KB
   • royalslider_fullscreen_caption.zip 198 KB
   • Edit

7. Support Staff 7 Posted by Dmitry Semenov on 28 Sep, 2012 06:45 AM

   

   All you need is to add this CSS:

   .royalSlider.rsFullscreen {
       bottom: 91px !important;
   }
   

   Where 91 is height of your caption block.

   Add it after royalslider.css or simply edit royalslider.css about line 80.

   Dmitry

   • Edit

8. Support Staff 8 Posted by Dmitry Semenov on 28 Sep, 2012 06:46 AM

   

   Your code...

   • rs.zip 191 KB
   • Edit

9. 9 Posted by gbunney on 28 Sep, 2012 06:52 AM

   

   That works!

   Thanks. I was trying to change the height, it didn't occur to me to use bottom.

   • Edit

10. gbunney closed this discussion on 28 Sep, 2012 06:52 AM.