New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text and buttons over image in Orbit #3019

Closed
tomuve opened this Issue Aug 14, 2013 · 5 comments

Comments

Projects
None yet
3 participants
@tomuve

tomuve commented Aug 14, 2013

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

This comment has been minimized.

Pixelalb commented Aug 15, 2013

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

@mhayes

This comment has been minimized.

Contributor

mhayes commented Aug 15, 2013

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!

@mhayes mhayes closed this Aug 15, 2013

@tomuve

This comment has been minimized.

tomuve commented Aug 15, 2013

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

This comment has been minimized.

Contributor

mhayes commented Aug 15, 2013

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

This comment has been minimized.

tomuve commented Aug 15, 2013

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment