adding html text to supersized jquery image slide

Question

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.

Answer 1

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 :

{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)

then in supersized.shutter.js i added after the line

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.

Answer 2

Thanks dogs for answer, i improve script in this way:

in the first line of supersized.shutter.js add this

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 :

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:

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.

Answer 3

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.

Answer 4

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..