0

我正在使用 Galleria 全屏幻灯片放映http://galleria.aino.se/themes/fullscreen/并且我正在尝试在几张幻灯片的中间添加文本和超文本。

这是我的html代码：

<head>
    <meta charset="utf-8">
    <title> welcome to my website</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="galleria/galleria-1.2.2.min.js"></script>
   <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>

<body>
<div id="galleria">
  <a href="images/logo.jpg"><img title="Project Abstract" alt="brief dics about project abstract" src="images/logo.thumb.jpg"></a>    
  <a href="images/image1.jpg"><img title="slide 1" alt="brief disc about slide 1" src="images/image1.thumb.jpg"></a> 
  <a href="images/image2.jpg"><img title="slide 2" alt="brief disc about slide 2" src="images/image2.thumb.jpg"></a> 
  <a href="images/image3.jpg"><img title="slide 3" alt="brief disc about slide 3" src="images/image3.thumb.jpg"></a>  
  <a href="images/image4.jpg"><img title="slide 4" alt="brief disc about slide 4" src="images/image4.thumb.jpg"></a>
</div>

<script>
Galleria.loadTheme('galleria/themes/fullscreen/galleria.fullscreen.min.js');
$('#galleria').galleria({
transition: 'fade',
show: 19
});
</script>

</body>

我希望下面这个程式化的 div 标签覆盖幻灯片：

.textbox {
position: relative;
height: 600px;
width: 900px;
top: 180px;
margin-left:auto;
margin-right:auto;
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.7;
text-align: justify;
}

不幸的是，我还是网络世界的新手，如果有人能指导我完成如何在 Galleria 幻灯片上应用文本的步骤，我将不胜感激。

提前致谢。

4

2 回答 2

0

我不明白 - 你想使用一个带有类的元素.textbox吗？您可以在 HTML ( <div class="textbox">My text here</div>) 中创建元素，一切顺利。我唯一推荐的是将 CSS 属性添加z-index到.textbox该类。

于 2011-03-20T15:02:42.737 回答
0

只需将文本框放在源代码中#galleria div 之后。

您还需要添加z-index:10001到文本框，因为全屏功能将 10000 的 zIndex 应用于容器。您可能还想添加position:absolute而不是relative.

于 2011-03-22T14:40:45.663 回答