我只想将 html 文本添加到著名的图像滑块 supersized。
这是他们的演示页面： http://buildinternet.com/project/supersized/slideshow/3.2/demo.html.
html可以在demo中的“media Temple(ve) server”文本的位置。
我也在尝试为文本添加一些漂亮的动画。
但我不知道在哪里编写 html 以及如何将其添加到幻灯片放映中，以便每个图像都附有它自己的 html。
在实现我所说的时，他们的 API 对我来说似乎也很模糊。
有人吗？
【问题讨论】：
标签： javascript jquery html css jquery-plugins
感谢狗的回答，我这样改进脚本：
在 supersized.shutter.js 的第一行添加这个
desctext = function() {
var projID = api.getField('proj_id');
var url = "slide_return.php?id="+projID;
$('#brief_holder').load(url);
};
然后在该行之后
_init : function(){
添加这个以加载第一张图片的描述
desctext;
行后
if (vars.slide_current.length){
$(vars.slide_current).html(vars.current_slide + 1);
}
添加
desctext;
现在和狗脚本一样，包括描述的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'}
]
使用如下代码创建一个名为 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;
}
最后在同一页幻灯片中放了一个空白的 div #brief_holder。
【讨论】：
我遇到了同样的问题，并想出了这个非常粗制滥造的解决方案...... 它可以工作，但可以大大改进。
我更改了每张幻灯片的脚本以包含项目的 ID 号，如下所示：
{image : 'content/pic1.jpg', title : 'title here', url : '', proj_id : '#projectID#'},
（请记住，这只是一个示例……我使用 asp 来动态填充幻灯片列表）
然后在 supersized.shutter.js 中我在该行之后添加了
afterAnimation : function(){
这个
var projID = api.getField('proj_id');
var url = "project_brief.asp?id="+projID;
$('#brief_holder').load(url);
#brief_holder 是一个空的 div，project_brief.asp 从源中提取描述。
【讨论】：
如果你有原始的demo.html页面，你可以在<ul id="demo-block">....</ul>这样的页面上写任何你想要的东西，这个ul块就在那里..
【讨论】：
您是否有正在处理的页面的示例 - 代码或实时示例？
要为每个图像指定不同的文本，您需要在 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'}
]
为所有图像添加文本覆盖：
尝试在主体中创建一个 div -
<div id="message-box">Hi, this is my text.</div>
然后给 div 一些样式 -
#message-box {
z-index: 9999;
float: left;
margin-left: 30px;
}
z-index 应该确保 div 出现在超大背景图片的顶部。
【讨论】：