添加html文本到超大的jQuery图像幻灯片 [英] adding html text to supersized jquery image slide

问题描述

我只想将html文字加到 supersized 的着名图片滑杆。

这是他们的演示页面：
http://buildinternet.com/project/supersized/slideshow/3.2/demo.html 。

html可以只是

我还试图在文本中添加一些漂亮的动画。

但我不知道在哪里写html和如何添加到幻灯片放映，以便每个图像将有自己的html附加到它。

$

他们的API似乎对我来说是模糊不清的。

解决方案

您有一个正在处理的网页示例 - 代码或实例？

要为每个图片指定不同的文本，您需要在javascript中添加title属性，演示的示例是 -

  [//幻灯片图片
 {image：'http://example.com/example.jpg'，标题：'ADD A CAPTION HERE'，thumb：'http://example.com/ example.jpg'，url：'http://www.example.com'} 
] 
  

要为所有图片添加文字重叠式广告：

尝试在主体中创建div -

 < div id =message-box>您好，这是我的文字。< / div> 
  

然后赋予div一些样式 -

 ＃message-box {
 z-index：9999; 
 float：left; 
 margin-left：30px; 
} 
  

z-index应确保div出现在超大背景图片。

i just want to add html text to the famous image slider supersized.

This is their demo page : http://buildinternet.com/project/supersized/slideshow/3.2/demo.html.

The html can be just in the place of the "media temple (ve) server " text in the demo.

I am also trying to add some nice animation to the text.

But I can't figure out where to write the html and how to add that to the slide show so that each image will have it's own html attached to it.

Their API also seems to be obscure to me in implementing what i said.

Any one there?

解决方案

Do you have an example of the page you're working on - code or a live example?

To specify different text for each image you will need to add a title attribute within your javascript, the example from the demo is -

 [ // Slideshow Images
{image : 'http://example.com/example.jpg', title : 'ADD A CAPTION HERE', thumb : 'http://example.com/example.jpg', url : 'http://www.example.com'}
]

To add a text overlay for all images:

Try creating a div within your main body -

<div id="message-box">Hi, this is my text.</div>

Then give the div some style -

#message-box {
  z-index: 9999;
  float: left;
  margin-left: 30px;
}

The z-index should ensure that the div appears on top of the supersized background image.

这篇关于添加html文本到超大的jQuery图像幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！