0

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.

user668241
  • 1
  • 1
  • 1

2 Answers2

0

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.

mattsven
  • 22,305
  • 11
  • 68
  • 104
0

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.

David Hellsing
  • 106,495
  • 44
  • 176
  • 212
  • This is the website I'm working on: http://www.quran.aaliahdesign.com/ on the "a little about me, project abstract and design concept" pages I used images because I couldn't figure out how to add text and hypertext to the links. I tried your method but still no luck. Hope you can help further. thank you. – user668241 Mar 28 '11 at 14:21