как добавить текст на полноэкранные слайды Galleria?

Я использую полноэкранное слайд-шоу 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;
}

К сожалению, я все еще новичок в веб-мире и был бы очень признателен, если бы кто-нибудь рассказал мне, как наносить текст поверх слайдов галереи.

Заранее спасибо.


json jquery slideshow galleria
person user668241    schedule 20.03.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я не понимаю - вы хотите использовать элемент с классом .textbox? Вы можете просто создать элемент в своем HTML (<div class="textbox">My text here</div>), и все готово. Единственное, что я бы порекомендовал, это добавить свойство CSS z-index к этому классу .textbox.

person mattsven    schedule 20.03.2011
comment
поэтому, если я хочу добавить .textbox поверх этого слайда: ‹a href=images/logo.jpg›‹img title=Project Abstract alt=brief dics about project abstract src=images/logo.thumb.jpg›‹/a › где я должен разместить (‹div class=textbox›Мой текст здесь‹/div›)? спасибо - person user668241; 21.03.2011

arrow_upward
0
arrow_downward

Просто поместите текстовое поле после div #galleria в исходном коде.

Вам также нужно будет добавить z-index:10001 в текстовое поле, поскольку полноэкранная функция применяет к контейнеру zIndex, равный 10000. Вы также можете добавить position:absolute вместо relative.

person David Hellsing    schedule 22.03.2011
comment
Это веб-сайт, над которым я работаю: quran.aaliahdesign.com немного обо мне , аннотации проекта и страницы концепции дизайна Я использовал изображения, потому что не мог понять, как добавить текст и гипертекст к ссылкам. Я попробовал ваш метод, но все равно не повезло. Надеюсь, вы можете помочь дальше. Спасибо. - person user668241; 28.03.2011