2013-02-14 2 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'); 
}; 

кто-нибудь работал с королевской слайдера ?? или была похожая ситуация, с которой вы прошли? я действительно пытался использовать что-то Двойники с этим

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

так, что класс «rsCaption» присутствует, но это просто создает новый слайд между изображениями

+0

Вы когда-нибудь находили решение? –

+0

Эй @ DylanValade, мы в конце концов пошли с другим слайдером. Но я попробовал ваше решение и, похоже, работает. – TheLegend

+0

Спасибо, что сообщили мне. Что вы использовали вместо этого? –

ответ

1

По некоторым причинам файл .js не справиться с globalCaption флагом , Скопирована последняя версия автора и подписи, которые были описаны в документации.

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

Для перемещения надписи снаружи контейнера слайдера добавить appendTo свой royalSlider вызов.

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

// Move caption container, auto refresh when slides change 
$('.rsGCaption').appendTo('.new-container'); 
Смежные вопросы