Looking at the code in the <head> of the web page, there are a few rogue </script> tags that need to be removed.
You also have your ftp details showing where "url" should be in the playlist - please remove them from your page ASAP or you could get your server hijacked. You are also mixing the syntax for an external playlist file and an internally embedded playlist;
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link rel="stylesheet" type="text/css" href="smooth_slider.css">
<style>
.slideshowwrapper{ /* dimensions of outermost slideshow container */
width: 1140px;
height: 600px;
position: relative;
overflow: hidden;
float: right;
margin-left: 10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-slider.js">
/***********************************************
* Full Page Slideshow- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
</script>
<script>
$(function() {
$('#resume').on('click', function(){ // set up resume button behavior
$("#pan_area").smoothslider("resume") // resume playing of this slideshow. Pass in "pause" to pause it instead
$(this).hide() // hide resume button
})
$("#pan_area").smoothslider("install", {
"xxxxx remove FTP details/playlist.json":
{ "playlist": [
{
"url":
"img/img0.jpg",
"caption": "A bird perching on a twig"
},
{
"url": "img/img1.jpg",
"caption": "A cheetah"
},
{
"url": "img/img2.jpg",
"caption": "A sand cat kitten"
},
{
"url": "img/img3.jpg",
"caption": "Now some tigers"
}
],
"hold_time":5,
"loops":2,
"transition_time":1
}", // get the playlist and some config from the server
// this function gets called whenever there's an image change
"on_image_change":function(caption, image_url) {
var area= $("#img_msg_area").find("span");
area.animate({"opacity": 0}, 500, "swing", function() {
area.text(caption);
area.animate({"opacity": 1}, 500); // fade in & out take 500ms each
});
},
"loops": 2, // number of loops before stopping. Remove thisoption to run continuously
"throbber":$("#throbber"), // an image to show when waiting for images to load
on_pause:function(){
$('#resume').show()
}
});
});
</script>
</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sony Akpotor Fine Art, Original Oil Figurative Paintings, Abstract, Portraits, Prints & Commissions</title>
<link href="-css/sony-akpotor-fine-art-css.css" rel="stylesheet" type="text/css" />
</head>
For clarification, please refer to the source code of demo3 http://www.dynamicdrive.com/dynamici...show/demo3.htm which makes use of the playlist[] option to define the images, instead of the playlist_url option.
Help on slideshow activation in css5
Reply With Quote
Bookmarks