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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with "Dynamically populating a JavaScript image slideshow"

    Hi, I'm completely new to web design & php so I'm trying to follow the tutorial here which uses php to return a list of images in a folder then display them.
    However when I try implementing this on my machine (so putting the php code into one file, the javascript into a main html with some jpegs in the same folder) but I get the following errors:
    Code:
    getimages.php:1 Uncaught SyntaxError: Unexpected token <
    getimages.php:-1 Resource interpreted as Script but transferred with MIME type text/php
    The php file is as follows:
    PHP 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$)|(\.jpeg$)|(\.gif$)"//valid image extensions
    $files = array();
    $curimage=0;
    if(
    $handle opendir($dirname)) {
    while(
    false !== ($file readdir($handle))){
    if(
    eregi($pattern$file)){ //if this file is a valid image
    //Output it as a JavaScript array element
    echo 'galleryarray['.$curimage.']="'.$file .'";';
    $curimage++;
    }
    }

    closedir($handle);
    }
    return(
    $files);
    }

    echo 
    'var galleryarray=new Array();'//Define array in JavaScript
    returnimages() //Output the array elements containing the image file names
    ?>
    Any help would be much appreciated!

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Posts
    271
    Thanks
    3
    Thanked 40 Times in 40 Posts
    The code works fine. Are you including this in another file?
    If you can't stand behind your troops, feel free to stand in front of them
    Semper Fidelis

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have this in an html file in the same directory:
    Code:
    <body>
    <script src="getimages.php"></script>
    
    <script type="text/javascript">
    
    var curimg=0
    function rotateimages(){
    document.getElementById("slideshow").setAttribute("src", galleryarray[curimg])
    curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
    }
    
    window.onload=function(){
    setInterval("rotateimages()", 2500)
    }
    </script>
    
    <div style="width: 170px; height: 160px">
    <img id="slideshow" src="1.jpg" />
    </div>
    </body>
    Which is taken from the tutorial website, but with the file path's changed slightly to fit what I have


  •  

    Posting Permissions

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