Text and buttons over image in Orbit

[tomuve]

Hi, how can I add text and buttons over images in orbit? I can't find the way to do that. I'm using foundation 4. Thanks for any help

[Pixelalb]

You may want to use captions. Here's how your html markup should look like: http://foundation.zurb.com/docs/components/orbit.html

[mhayes]

You can also use an image as a background, as discussed in #2347. So assuming you had HTML markup like this:

<ul id="featured" data-orbit>
  <li id="slide1">
    <img src="http://placehold.it/1200x300&text=Slide1" />
    <p>Text goes here!</p>
  </li>
  <li id="slide2">
    <img src="http://placehold.it/1200x300&text=Slide1" />
    <p>Text goes here!</p>
  </li>
</ul>

You could then write corresponding CSS to make images sit behind your content:

#slide1 img {position:absolute; z-index: -1;}
#slide2 img {position:absolute; z-index: -1;}

I'm going to close this issue out, hope this helps you out!

[tomuve]

Thanks guys. I used the code you wrote but the slider changes its height when it shows the slider with the text over the image.

Here is the test site I'm developing: www.capitalizarme.com/smv

What I want to achieve is a slider like this http://320press.com/wp-foundation/ but with a different image in each slider backgroud.

[mhayes]

Just noticed that this only works with the latest version of Foundation in GitHub and will be part of 4.3.2 which will be released within the next week. Specifically 556113d addresses this issue and was used to close out #402.

Sorry for the confusion. You can either copy this file into your project:

https://raw.github.com/zurb/foundation/master/js/foundation/foundation.orbit.js

Or wait for us to release Foundation 4.3.2 sometime in the next week.

Happy coding!

[tomuve]

Thank you!