2013-02-14 87 views
1

嘿那裏只是一個簡單的,我似乎無法正確。皇家滑塊沒有添加標題

我正在實施我正在使用的網站上的皇家滑塊。我把它放在筆記本電腦的圖像裏面,我想要的是當你滾動瀏覽圖像時,在每個圖像的底部有一個標題。我只是使用簡單的圖像,所以文檔here建議我只是在圖像中使用alt,插件只是將它撿起來,只是它沒有。

我的HTML看起來像這樣:

<div class="laptopBg"> 
    <img src="/images/laptop.png" class="imgBg" width="707" height="400"> 
    <div id="slider-toolkit" class="royalSlider rsDefaultInv"> 
    <img src="/images/t1.jpg" alt="the toolkit landing page" /> 
    <img src="/images/t2.jpg"/> 
    <img src="/images/t3.jpg"/> 
    <img src="/images/t4.jpg"/> 
    </div> 
</div> 

我在皇家滑塊我有設置如下:

function makeRoyalSlider(systemName) { 
    $('#slider-' + systemName).royalSlider({ 
    autoHeight: false, 
    arrowsNav: true, 
    arrowsNavAutoHide: false, 
    fadeInLoadedSlide: false, 
    globalCaption:true, //this is the option they say is required for rendering captions. 
    controlNavigationSpacing: 0, 
    controlNavigation: 'bullets', 
    imageScaleMode: 'fill', 
    imageAlignCenter: true, 
    loop: false, 
    loopRewind: true, 
    numImagesTopReload: 6, 
    keyboardNavEnabled: true, 
    autoScaleSlider: true, 
    autoScaleSliderWidth: 486,  
    autoScaleSliderHeight: 315 
    }).data('royalslider'); 
}; 

有沒有人與皇家滑塊工作?或者有類似的情況,你通過了?我曾嘗試使用的東西simular本

<figure class="rsCaption">This caption <b>HTML</b> text will be used.</figure> 

,使類「rsCaption」是存在的,但只是創建

+0

您是否曾經找到過解決方案? – 2015-06-19 18:17:23

+0

嘿@DylanValade,我們最終走了一個不同的滑塊。但我確實嘗試了你的解決方案,它似乎工作。 – TheLegend 2015-06-29 11:06:20

+0

謝謝你讓我知道。你用什麼來代替? – 2015-06-29 15:51:58

回答

1

圖像之間的新的幻燈片出於某種原因,.js文件沒處理globalCaption標誌。複製了作者的最新版本和文檔中解釋過的標題。

http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js

要移動字幕滑塊容器外添加此appendToroyalSlider電話。

// initialize 
$('#photos').royalSlider({ ... globalCaption: true, ... }); 

// Move caption container, auto refresh when slides change 
$('.rsGCaption').appendTo('.new-container');