javascript 将 html 文本添加到超大 jquery 图像幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7952988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
adding html text to supersized jquery image slide
提问by Istiaque Ahmed
i just want to add html text to the famous image slider supersized.
我只想将 html 文本添加到著名的超大图像滑块。
This is their demo page : http://buildinternet.com/project/supersized/slideshow/3.2/demo.html.
这是他们的演示页面：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.
html 可以只是在演示中的“媒体寺庙（ve）服务器”文本的位置。
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.
但我不知道在哪里编写 html 以及如何将其添加到幻灯片中，以便每个图像都附加有自己的 html。
Their API also seems to be obscure to me in implementing what i said.
他们的 API 在实现我所说的方面对我来说似乎也很模糊。
Any one there?
有人在吗？
回答by Tom
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 -
要为每个图像指定不同的文本，您需要在 javascript 中添加标题属性，演示中的示例是 -
[ // 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 -
<div id="message-box">Hi, this is my text.</div>
Then give the div some style -
然后给 div 一些样式 -
#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.
z-index 应确保 div 出现在超大背景图像的顶部。
回答by Manuel Fasano
Thanks dogs for answer, i improve script in this way:
感谢狗的回答，我以这种方式改进了脚本：
in the first line of supersized.shutter.js add this
在 supersized.shutter.js 的第一行添加这个
desctext = function() {
var projID = api.getField('proj_id');
var url = "slide_return.php?id="+projID;
$('#brief_holder').load(url);
};
then after the line
然后在该行之后
_init : function(){
add this to load description of the first image
添加这个来加载第一张图片的描述
desctext;
after line
后线
if (vars.slide_current.length){
$(vars.slide_current).html(vars.current_slide + 1);
}
add
添加
desctext;
now same of dogs script, include the id number of the description like this :
现在与狗脚本相同，包括描述的 ID 号，如下所示：
slides:[// Slideshow Images
{image : 'images/index_1.jpg', proj_id : '1'},
{image : 'images/index_2.jpg', proj_id : '2'},
{image : 'images/index_3.jpg', proj_id : '3'}
]
]
create a page named slide_return.php with code like this:
创建一个名为 slide_return.php 的页面，代码如下：
switch($_GET['id']){
case "1":
echo "<h1><a href='#'>Text Link for slide 1</a></h1>";
break;
case "2":
echo "<h1><a href='#'>Text Link for slide 2</a></h1>";
break;
case "3":
echo "<h1><a href='#'>Text Link for slide 3</a></h1>";
break;
}
}
finally put a blank div #brief_holder in the same page of slide.
最后在幻灯片的同一页中放置一个空白的 div #brief_holder。
回答by Sonal Khunt
You can write whatever you want on page like <ul id="demo-block">....</ul>if you have original demo.html page this ul block is ther..
你可以在页面上写任何你想要的东西，<ul id="demo-block">....</ul>如果你有原始的 demo.html 页面，这个 ul 块就在那里..
回答by Dog
i had the same problem and came up with this very shoddy solution... it works but can be improved upon greatly.
我遇到了同样的问题，并提出了这个非常劣质的解决方案......它有效，但可以大大改进。
i changed the script for each slide to include the id number of the project like this :
我更改了每张幻灯片的脚本以包含项目的 ID 号，如下所示：
{image : 'content/pic1.jpg', title : 'title here', url : '', proj_id : '#projectID#'},
(bear in mind this is just an example... i use asp to dynamically populate the slides list)
（记住这只是一个例子......我使用asp动态填充幻灯片列表）
then in supersized.shutter.js i added after the line
然后在 supersized.shutter.js 我在该行之后添加
afterAnimation : function(){
this
这
var projID = api.getField('proj_id');
var url = "project_brief.asp?id="+projID;
$('#brief_holder').load(url);
where #brief_holder is an empty div and project_brief.asp pulls the description from the source.
其中#brief_holder 是一个空的div，而project_brief.asp 从源中提取描述。
