Can't get images to display on Full Page Slideshow

**luckyginger** · 02-19-2016, 10:21 PM

1) Script Title: Full page slideshow

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...pageslideshow/

3) Describe problem: I can't get the images to display. The loading graphic appears and the pictures never load. I can't figure out what I'm doing wrong. Please help. I've replaced the images in the img folder with my images, named the same as the demo ones. Test page here: http://luckyacewebdesign.com/watersedge/test.html
Code is here on my test page:

Code:

<!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 this option 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>

**ddadmin** · 02-19-2016, 11:15 PM

There should be a playlist.json file in the same directory as your slideshow page defining the paths to the images you wish to show. For example: http://dynamicdrive.com/dynamicindex.../playlist.json

**luckyginger** · 02-19-2016, 11:52 PM

I've got the playlist saved in that directory, with image paths listed. The images are in a folder called "img" in the same directory. Code on the playlist is as follows:

Code:

{
    "playlist": [
        {
            "url": "img/img0.jpg",
     
        },
        {
            "url": "img/img1.jpg",
      
        },
        {
            "url": "img/img2.jpg",
   
        },
        {
            "url": "img/img3.jpg",
         
        },
        {
            "url": "img/img4.jpg",
          
        },
		        {
            "url": "img/img5.jpg",
          
        },
		        {
            "url": "img/img6.jpg",
          
        },
		        {
            "url": "img/img7.jpg",
          
        },
		        {
            "url": "img/img8.jpg",
          
        }
    ],

   "hold_time":2,
		"loops":2,
	 "transition_time":1
}

I renamed my images to match the ones already listed and added a few. Not sure why they aren't displaying. The playlist file is there but it's not showing when I click on the link in a browser. http://luckyacewebdesign.com/watersedge/playlist.json
Any ideas as to why it is invisible?

**ddadmin** · 02-20-2016, 08:02 AM

Hmm the bottom line is http://luckyacewebdesign.com/watersedge/playlist.json is not available to any browser requesting it. Are you sure the file is actually present in the "watersedge" directory?

**luckyginger** · 02-20-2016, 03:26 PM

I'll try it on their server in a sub folder. It's on my server now - maybe that will make a difference. The file is showing up on my Dreamweaver FTP and from the GoDaddy File Manager. I have no idea why it's not loading in a browser. Very odd.

**luckyginger** · 02-20-2016, 03:49 PM

Ok... http://watersedge.events/newsite/playlist.json It's showing up there, but the images still aren't loading here: http://watersedge.events/newsite/ Do I need to add the captions back on for it to work?