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

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

0 голосов
/ 20 марта 2011

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

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

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

Ответы [ 2 ]

0 голосов
/ 22 марта 2011

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

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

0 голосов
/ 20 марта 2011

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

...