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.

Show comment
Hide comment
@Pixelalb

Pixelalb 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

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.

Show comment
Hide comment
@mhayes

mhayes Aug 15, 2013

Contributor

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!

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.

Show comment
Hide comment
@tomuve

tomuve 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.

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.

Show comment
Hide comment
@mhayes

mhayes Aug 15, 2013

Contributor

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!

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.

Show comment
Hide comment
@tomuve

tomuve Aug 15, 2013

Thank you!

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