开发者

show text over images using jquery slider

开发者 https://www.devze.com 2023-03-03 23:41 出处:网络
I implemented the easySlider as here http://cssglobe.com/lab/easyslide开发者_如何学运维r1.7/02.html

I implemented the easySlider as here http://cssglobe.com/lab/easyslide开发者_如何学运维r1.7/02.html and now i want to show some text over the image like this http://themeforest.net/item/community-innovation/full_screen_preview/101572

I see that both are different plugins but i want to use the easySlider plugin and show the text. I tried some things like getting the alt text and displaying it over the image but din't work. any ideas please?

regards


You need to wrap the text to an element after each image, like this:

<li>
  <img src="[whatever]"/>
  <div>Here comes my text</div>
</li>

Then position with CSS by giving setting the <li>'s position property to relative, and absolute for the <div> that holds your text, with top/right/bottom/left properties, depending on your design.

#slider li { position: relative; }
#slider div { left: 10px; right: 10px; bottom: 10px; position: absolute; }

Note: If you want IE6 support, use the left/right+width property for the <div> in your CSS instead of left+right.


instead of using <li> you can use <p> and <span> for the text so the code will be:

<p><img src=""/><span>Here the text</span></p>

This way the code will be valid :)

0

精彩评论

暂无评论...
验证码 换一张
取 消