javascript - adding html text to supersized jquery image slide - Stack Overflow

admin管理员组

文章数量:1313347

i just want to add html text to the famous image slider supersized.

This is their demo page : .2/demo.html.

The html can be just in the place of the "media temple (ve) server " text in the demo.

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.

Their API also seems to be obscure to me in implementing what i said.

Any one there?

i just want to add html text to the famous image slider supersized.

This is their demo page : http://buildinternet./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.

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.

Their API also seems to be obscure to me in implementing what i said.

Any one there?

• javascript
• jquery
• html
• css
• jquery-plugins

Share Improve this question Follow edited Oct 31, 2011 at 15:18 jhanifen 4,59188 gold badges4545 silver badges6868 bronze badges asked Oct 31, 2011 at 11:19 Istiaque AhmedIstiaque Ahmed 6,4982626 gold badges8080 silver badges144144 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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./example.jpg', title : 'ADD A CAPTION HERE', thumb : 'http://example./example.jpg', url : 'http://www.example.'}
]

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.

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.

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

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.

本文标签： javascriptadding html text to supersized jquery image slideStack Overflow