orbit-slider：标题问题

我是新的响应式设计。我正在尝试为我的项目使用Foundation轨道滑块。我无法获取为图片显示的标题。我有以下代码...orbit-slider：标题问题

<div class="row"> 
    <div class="twelve columns"> 
    <div id="slider"> 
    <a href="#"><img src="images/pic1.jpg" /></a> 
    <a href="#"><img src="images/pic2.jpg" /></a> 
    <a href="#"><img src="images/pic3.jpg" /></a> 
    </div> 
</div> 

    <span class="orbit-caption" id="captionOne">Here is a caption1...</span> 
    <span class="orbit-caption" id="captionTwo">Here is a caption2...</span> 
    <span class="orbit-caption" id="captionThree">Here is a caption3...</span> 
</div>

当我第一次尝试此操作时，它不起作用。我试着在Stackoverflow中查看，并尝试使用由commanderdemon给出的修复程序。它仍然没有工作。我甚至没有拿到照片上的黑色标题。

在foundation.css我看到显示器被设置为无为类轨道字幕

/* Captions ---------------------- */ 
.orbit-caption { display:none; font-family: inherit; } 

.orbit-wrapper .orbit-caption { background: black; background: rgba(0, 0, 0, 0.6); 
    z-index: 30; color: white; text-align: center; padding: 7px 0; font-size: 13px; 
    position: absolute; right: 0; bottom: 0; width: 100%; }

通过除去它我能够在看到一个微小的黑色条带（约10px的高）图片和3个标题全部附加在图片上。

如果图片的高度小于400px？有这个需要的CSS修复？
我在做什么错？

我试过只使用图像标记而不是锚标记。两者都有相同的结果。

P.S.我正在使用foundation.css，因为它随附下载。我不允许要么发布的屏幕截图...

对不起发现错误......我应该把数据的标题=“＃captionOne” -Jody

来源

2013-01-24 user1051012

这将是非常艰难的，以帮助你没有一个演示，或者至少你的CSS。 – isherwood

在你的JS们'captions'设置为'true'？

<script type="text/javascript"> 
    $(window).load(function() { 
     $("#featured").orbit({ 
      captions : true 
     }); 
    }); 
</script>

来源

2013-01-24 16:17:06 GDW

提供图片标签相同的ID在SPAN标题标签

来源

2013-04-03 20:10:24 user1966571

orbit-slider：标题问题

回答

相关问题