2012-09-25 2 views
0

이미지 집합에 royalslider을 사용하고 있습니다. 전체 화면으로 전환 할 때 캡션을 볼 수 없다는 점을 제외하고는 정상적으로 작동합니다. 나는 그것이 페이지의 맨 아래로 밀려 나고 있다고 생각한다.RoyalSlider로 전체 화면 캡션을 표시하는 방법

이미지 캡션을 전체 화면 모드로 올바르게 표시하려면 어떻게해야합니까? 사용자가 전체 화면 슬라이더 rsFullscreen 클래스를 가져옵니다 입력하면

생성 된 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> 

답변

1

것 같습니다.

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

다시 한 번 감사드립니다. Dmitry. .royalSlider.rsFullscreen {하단 : 91px! 중요; } 그리고 그것은 큰 일했습니다 :) – Lango

관련 문제