Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript slideshow preload problems

    Hi everyone!
    My slide show doesn't preload correctly.
    I have a slideshow made with Javascript. It uses PHP to automatically load images in it from a folder.

    it consists of a php file that resides in the image folder and a html page with the javascript code that contains the slide show and a image preloader. but the images don't load well. And I can't figure out the mistake.

    I don't expect any instant solutions, but some advice would be very appreciated.

    the php file:
    Code:
    <?
    //PHP SCRIPT: getimages.php
    Header("content-type: application/x-javascript");
    
    //This function gets the file names of all images in the current directory
    //and ouputs them as a JavaScript array
    function returnimages($dirname=".") {
    $pattern="/(\.jpg$)|(\.png$)|(\.JPG$)|(\.jpeg$)|(\.gif$)/"; //valid image extensions
    $files = array();
    $curimage=0;
    if($handle = opendir($dirname)) {
    while(false !== ($file = readdir($handle))){
    if(preg_match($pattern, $file)){ //if this file is a valid image
    //Output it as a JavaScript array element
    echo 'galleryarray['.$curimage.']="'.$file .'";';
    $curimage++;
    
    }
    }echo 'var totalamount ="'.$curimage.'";';
    
    closedir($handle);
    }
    return($files);
    }
    
    echo 'var galleryarray=new Array();
    
    '; //Define array in JavaScript
    returnimages() //Output the array elements containing the image file names
    ?>

    the HTML file:

    Code:
    <head>
    
    <link type="text/css" rel="stylesheet" href="style.css"/>
    
    <script src="images/slideshow2/getimages.php"></script>
    
    <script language=”javascript”>
            var imageObject = new Image();
            
            for(i=0; i<totalamount; i++ )
            {
                    imageObject.src = "images/slideshow2/"+galleryarray[i];
            }
    </script> 
    
    
    <script type="text/javascript">
    
    var curimg=0
    function rotateimages(){
    document.getElementById("slideshow").setAttribute("src", "images/slideshow2/"+galleryarray[curimg])
    curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
    if (document.getElementById) document.getElementById("CaptionBox").innerHTML= galleryarray[curimg];
    
    
    }
    
    window.onload=function(){
    setInterval("rotateimages()", 3700)
    }
    
    
    </script>
    </head>
    
    <div style="width: 500px;">
    <img id="slideshow"  src="images/slideshow2/image1.jpg"/ width=500>
    </div>
    <div style="
            -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -moz-transform-origin: bottom left;  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);" 
    id=CaptionBox class=Caption>
       <a> This is the default caption.
       </a> </div>

    VERY CURIOUS
    best Sam

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by gameonedne View Post
    .....but the images don't load well.
    That's a bit like going to the doctor and saying "I don't feel well - what is wrong?" and not saying anything else and then expect the doctor to fix you.

    What error messages are you getting? What exatly is/isn't happening that should/shouldn't? Are any images loading and if so how many?

    If you wrote all that code, it should take you only a couple of minutes to at least identify the problem area in your code by using echo statements to check variables' values and program logic.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, sorry
    The actual problem is that the images do appear in the slideshow, but just nog preloaded, cause they still load from top to bottom, instead of just in an instance.
    The preload script should fix that, but it doesn't, so the error must be in this code I think:
    Code:
    <script language=”javascript”>
            var imageObject = new Image();
            
            for(i=0; i<totalamount; i++ )
            {
                    imageObject.src = "images/slideshow2/"+galleryarray[i];
            }
    </script>
    most common mistake is the wrong URL, but that seems to be correct.
    but since I am a newbe, I can't recognize the wrong thing here. Off course the code is lent from several website. Just glued together by me.

    Hope I have been more specific now.
    thanks, best Sam

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by gameonedne View Post
    .....Off course the code is lent from several website. Just glued together by me.
    ok, that's what I suspected.

    I don't get involved in fixing up other peoples' cobbled together bits and pieces of code from various sources.

    It's quicker for me to write my own code from scratch than to spend time debugging cobbled together code.

    If you would like to learn how to do it properly, then have a go at it and I will be happy to help. If you want someone to debug the cobbled together bits and pieces you posted then hopefully someone else will come along.

    Good luck

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by gameonedne View Post
    The preload script should fix that, but it doesn't, so the error must be in this code I think:
    Code:
    <script language=”javascript”>
            var imageObject = new Image();
            
            for(i=0; i<totalamount; i++ )
            {
                    imageObject.src = "images/slideshow2/"+galleryarray[i];
            }
    </script>most common mistake is the wrong URL, but that seems to be correct
    Another common mistake is trying to load all the images into one placeholder effectively at the same time, meaning that only the last one will load.

    Code:
    var imageObjects = [], img; 
            
    for( var i=0; i<totalamount; i++ )
    {
        img = new Image();
        img.src = "images/slideshow2/"+galleryarray[i];
        imageObjects.push( img );
    }


  •  

    Posting Permissions

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