如何在 Galleria 全屏幻灯片上添加文字？答案

【问题标题】：how to add text on Galleria fullscreen slides?如何在 Galleria 全屏幻灯片上添加文字？
【发布时间】：2011-03-20 14:57:44
【问题描述】：

我正在使用 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 幻灯片上应用文本的步骤，我将不胜感激。

提前致谢。

【问题讨论】：

标签： jquery json slideshow galleria

【解决方案1】：

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

【讨论】：

所以如果我想在这张幻灯片上添加 .textbox：我应该放在哪里（
我的文字在这里
）？谢谢

【解决方案2】：

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

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

【讨论】：

这是我正在开发的网站：quran.aaliahdesign.com 在“关于我的一点点，项目摘要和设计概念”页面上我使用了图像，因为我不知道如何添加文本和链接的超文本。我尝试了你的方法，但仍然没有运气。希望您能进一步提供帮助。谢谢。