adding html text to supersized jquery image slide
Solution 1
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.
Solution 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.
Related videos on Youtube
Comments
-
Istiaque Ahmed almost 2 years
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.
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?
-
Istiaque Ahmed over 12 yearsthe demo page of the slider is my example. How can I add different text for every image in the slideshow ? What will ur code do plz? same text for all the images>
-
Tom over 12 yearsCheck out the revised answer about different text for each image.
-
Istiaque Ahmed over 12 yearstitle is already there,,, and those different titl for different images appear well on the demo slideshow. I don't find any solution to my problem.... how can I create a distinct text for each image to be displayed on the image itself in a catchy manner ?