How do I show the caption when fullscreen

gbunney's Avatar

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

    Dmitry Semenov's Avatar

    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

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

    gbunney's Avatar

    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?

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

    Dmitry Semenov's Avatar

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

    Dmitry

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

    gbunney's Avatar

    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?

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

    Dmitry Semenov's Avatar

    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

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

    gbunney's Avatar

    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.

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

    Dmitry Semenov's Avatar

    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

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

    Dmitry Semenov's Avatar

    Your code...

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

    gbunney's Avatar

    That works!

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

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

Comments are currently closed for this discussion. You can start a new one.

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