添加HTML文本超大型jQuery圖片幻燈片

我只是想添加HTML文本到着名的圖像滑塊supersized。添加HTML文本超大型jQuery圖片幻燈片

這是他們的演示頁面： http://buildinternet.com/project/supersized/slideshow/3.2/demo.html。

該html可以在演示中的「媒體寺廟（ve）服務器」文本的位置。

我也試圖給文本添加一些不錯的動畫。

但我不知道在哪裏寫HTML和如何將其添加到幻燈片放映，以便每個圖像將它自己的HTML附加到它。

他們的API對我來說似乎對我執行我所說的事情是晦澀難懂的。

有沒有人在那裏？

來源

2011-10-31 Istiaque Ahmed

您有沒有正在處理的頁面示例 - 代碼或實例？

要爲每個圖像指定不同的文本，你需要你的JavaScript中添加一個title屬性，從演示的例子是 -

[ // 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>

然後給股利一些風格 -

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

z-index應確保div出現在超大背景圖像的頂部。

來源

2011-10-31 15:13:04 Tom

滑塊的演示頁面是我的例子。如何爲幻燈片中的每個圖像添加不同的文字？你的代碼會做什麼plz？所有圖像的相同文本> –

查看關於每個圖像的不同文本的修訂答案。 – Tom

標題已經在那裏,,,不同的圖像不同的標題出現在演示幻燈片上。我沒有找到任何解決方案，我的問題....我怎樣才能創造一個明確的文字爲每個圖像要以一個吸引人的方式在圖像本身上顯示？每個圖像的 –

你可以寫任何你想要的頁面上像<ul id="demo-block">....</ul>，如果你有原創demo.html頁面此UL塊療法..

來源

2011-11-18 07:09:11

不同文字。那麼怎麼辦？ –

我有同樣的問題，以及與此非常僞劣解決方案上來...... 它的工作，但可以大大改善。

我改劇本每張幻燈片，包括項目這樣的ID號：

{image : 'content/pic1.jpg', title : 'title here', url : '', proj_id : '#projectID#'},

（記住這僅僅是一個例子。我用asp動態填充的幻燈片列表）

然後在supersized.shutter.js i中的線之後添加

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從源中獲取描述。

在supersized.shutter的第一行

：

來源

2012-02-02 10:15:15 Dog

感謝犬的答案，我以這種方式提高腳本。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在幻燈片的同一頁面中。

來源

2013-04-22 16:52:06

讓我測試代碼。 –

添加HTML文本超大型jQuery圖片幻燈片

回答

相關問題