Results 1 to 7 of 7

Thread: Can't get images to display on Full Page Slideshow

  1. #1
    Join Date
    Feb 2016
    Location
    League City, Texas
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can't get images to display on Full Page Slideshow

    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>
    Last edited by Beverleyh; 02-20-2016 at 12:06 AM. Reason: Formatting

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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
    DD Admin

  3. #3
    Join Date
    Feb 2016
    Location
    League City, Texas
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by Beverleyh; 02-20-2016 at 12:08 AM. Reason: Formatting

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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?
    Last edited by Beverleyh; 02-20-2016 at 06:42 PM.
    DD Admin

  5. #5
    Join Date
    Feb 2016
    Location
    League City, Texas
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Feb 2016
    Location
    League City, Texas
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by Beverleyh; 02-20-2016 at 06:42 PM. Reason: Formatting

  7. #7
    Join Date
    Feb 2016
    Location
    League City, Texas
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Finally got it to work. Thank you for your help!

Similar Threads

  1. Replies: 6
    Last Post: 01-23-2015, 11:54 AM
  2. Full Page Image slideshow won't run
    By larrygard in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-30-2014, 04:14 PM
  3. Full Page Slideshow
    By greg 123 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-21-2014, 11:03 AM
  4. how to display full bg image on web page
    By ramzraja in forum CSS
    Replies: 1
    Last Post: 01-26-2011, 07:23 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •