CSS Codes
CSS Layouts

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Full Page Slideshow Demo 1</title>
<link rel="stylesheet" type="text/css" href="smooth_slider.css">

<style>

.slideshowwrapper{ /* dimensions of outermost slideshow container */
width: 80%;
height: 600px;
position: relative;
overflow: hidden;
}

</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)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</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", {
"playlist_url":"playlist.json", // 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>
</head>
<body>

<div class="slideshowwrapper">
<div id="throbber"><img src="img/throbber.gif"></div>
<div id="resume" style="display:none">Replay</div>
<div id="pan_area"></div>
<div id="img_msg_area"><span></span></div>
<div id="static_text_area">There is nothing more amazing than nature, the miracle that is every creature in her domain. The birds, the lions, down to every insect, together they form the circle of life that supports each other.</div>
</div>

<p>Default set up of Full Page Slideshow. The slideshow is contained in an arbitrary DIV "slideshowcontainer", so it spans the entire area of this DIV, and not the whole page. The dimensions of the DIV is set to 80% width and 600px tall.</p>

</body>
</html>