Question

我只想将html文本添加到着名的图片滑块supersized。

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

html可以代替演示中的“media temple（ve）服务器”文本。

我也在尝试为文本添加一些不错的动画。

但我无法弄清楚在哪里写html以及如何将其添加到幻灯片放映中，以便每个图像都附加了它自己的html。

在实施我所说的内容时，他们的API似乎也模糊不清。

那里有人吗？

Answer 1

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

要为每个图片指定不同的文字，您需要在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出现在超大背景图像的顶部。

Answer 2

感谢狗的回答，我用这种方式改进了脚本：

在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。

Answer 3

你可以在页面上写下你想要的任何内容，如<ul id="demo-block">....</ul>，如果你有原始的demo.html页面，那么这个ul块就是......

Answer 4

我遇到了同样的问题，想出了这个非常糟糕的解决方案...... 它有效但可以大大改进。

我更改了每张幻灯片的脚本，以包含项目的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从源中提取描述。

将html文本添加到超大的jquery图像幻灯片中

4 个答案: