Zurb Orbit: добавление текста поверх изображений

Question 1

Я бы добавил заголовок и описание для каждого слайда, примерно так:

enter image description here

  <!-- Header -->
  <div id="featured">
      <img src="http://cf2.imgobject.com/t/p/w780/fI3ucpgaVKOUcQ82vhgWmWuLlg2.jpg">
      <img  src="http://cf2.imgobject.com/t/p/w780/dAc3Ob868XGnAX8uOptb7HWx0In.jpg">
      <img  src="http://cf2.imgobject.com/t/p/w780/2fwHVLvh6kdwCujsMwtNmwRJAf1.jpg">   
  </div>

<script type="text/javascript">
    $(window).load(function() {

       $('#featured').orbit();
    });
  </script>

Я пробовал с «субтитрами», но не получил того же эффекта. Как я мог это сделать?

Zurb Fondation Orbit

css zurb-foundation orbit

3

sparkle 14 Янв 2013 в 03:29

Answer

Я работаю с Фондом прямо сейчас, поэтому постараюсь вам в этом помочь. Поскольку я не делал этого раньше, ваши отзывы будут полезны.

Сначала в вашем App.js добавьте эту строку для Fluid Orbit:

$('#featuredContent').orbit({ fluid: '800x800' });

800x800 - это ширина и высота вашего орбитального слайдера.

Затем в свой App.css вы должны добавить это:

#featuredContent .back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

Это относится к вашему #featuredContent в вашем файле .js и добавляет класс .back, который мы будем использовать в нашем HTML-коде:

<div id="featuredContent">
  <div>
    <h4>This is a content slider.</h4>
    <p>Each slide holds arbitrary content, like text or actions.</p>
    <img class="back" src="/images/test.jpg" />
  </div>
  <div>
    <h4>We can include text and buttons, like this!</h4>
    <p>We take no responsibility for what happens if you click this button.</p>
    <p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p>
    <img class="back" src="/images/test.jpg" />
  </div>
  <div>
    <h4>We can include text and buttons, like this!</h4>
    <p>We take no responsibility for what happens if you click this button.</p>
    <p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p>
    <img class="back" src="/images/test.jpg" />
  </div>
</div>

Я думаю, это должно помочь, и на заднем плане будет изображение с заголовком (H4) и описанием (P) под ним. Вы также можете настроить положение заголовка и описания в CSS, используя:

#featuredContent p {
}

А также

#featuredContent h4 {
}

2

Hossein J 14 Янв 2013 в 18:24

Question 2