html - 使用 RoyalSlider 全屏时如何显示标题

Question

我正在使用 royalslider对于一组图像。它工作正常，只是当它进入全屏时你看不到标题。我相信它被推到了页面底部。

我需要做什么才能在全屏模式下正确显示我的图片说明？

生成的 html 如下所示

<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>

Answer 1

当用户进入全屏 slider 时，获取 rsFullscreen 类。

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