how to add text on Galleria fullscreen slides?_问答_开发者

how to add text on Galleria fullscreen slides?

开发者 https://www.devze.com 2023-02-19 00:53 出处：网络

I\'m using Galleria fullscreen slide show http://galleria.aino.se/themes/fullscreen/ and I\'m trying to add text and hypertext in the middle of couple of slides.

I'm using Galleria fullscreen slide show http://galleria.aino.se/themes/fullscreen/ and I'm trying to add text and hypertext in the middle of couple of slides.

This is my html code:

<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>

I want this stylized div tag below to overlay the slides:

.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;
}

Unfortunately, I'm still new to the web world and would really appreciate if someone can walk me through the steps to how to apply text on top of the galleria slides.

Thanks in advance.

I'm not understanding - you want to use an element with the class .textbox on it? You can just create the element in your HTML (<div class="textbox">My text here</div>) and you are good to go. Only thing I would recommend is adding the CSS property z-index to that .textbox class.

Just put the textbox after the #galleria div in the source code.

You’ll need to add z-index:10001 to the textbox as well, since the fullscreen function applies a zIndex of 10000 to the container. You might also want to add position:absolute instead of relative.