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

    dynamic image viewer using php and javascript

    alright i am getting frustrated with this code. I am using this javascript slideshow and can't seem to get it to work when i put it into my php page. The amount of images changes often so i need to load them dynamically. Here is my code, if there is a better way to do this let me know.

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original: Ricocheting (ricocheting@hotmail.com) -->
    <!-- Web Site: http://www.ricocheting.com -->

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin slideshow code
    var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
    current = 0;
    function next() {
    if (document.slideform.slide[current+1]) {
    document.images.show.src = document.slideform.slide[current+1].value;
    document.slideform.slide.selectedIndex = ++current;
    }
    else first();
    }
    function previous() {
    if (current-1 >= 0) {
    document.images.show.src = document.slideform.slide[current-1].value;
    document.slideform.slide.selectedIndex = --current;
    }
    else last();
    }
    function first() {
    current = 0;
    document.images.show.src = document.slideform.slide[0].value;
    document.slideform.slide.selectedIndex = 0;
    }
    function last() {
    current = document.slideform.slide.length-1;
    document.images.show.src = document.slideform.slide[current].value;
    document.slideform.slide.selectedIndex = current;
    }
    function ap(text) {
    document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
    rotate();
    }
    function change() {
    current = document.slideform.slide.selectedIndex;
    document.images.show.src = document.slideform.slide[current].value;
    }
    function rotate() {
    if (document.slideform.slidebutton.value == "Stop") {
    current = (current == document.slideform.slide.length-1) ? 0 : current+1;
    document.images.show.src = document.slideform.slide[current].value;
    document.slideform.slide.selectedIndex = current;
    window.setTimeout("rotate()", rotate_delay);
    }
    }
    // End -->
    </script>
    </HEAD>



    <BODY>

    <?php


    $myDirectory = opendir("../../../../myurl");

    // get each entry
    while($entryName = readdir($myDirectory)) {
    //str_replace("img_","",$entryName);
    $dirArray[] = $entryName;
    }

    // close directory
    closedir($myDirectory);

    // count elements in array
    $indexCount = count($dirArray);


    for($index=0; $index < $indexCount; $index++) {

    $fileArray = str_replace("img_","",$dirArray);
    $numArray = str_replace(".png","",$fileArray);

    }
    // sort 'em
    sort($numArray);
    // remove first two elements
    $finalArray = array_slice($numArray, 2);


    // print 'em
    print("<TABLE width=632 align=center border=1 cellpadding=5 cellspacing=0 class=whitelinks><tr>\n");
    print("<td>");


    // loop through the array of files and print them all
    for($index=0; $index < $indexCount; $index++) {


    if (substr("$numArray[$index]", 0, 1) != "."){ // don't list hidden files
    print("<a target=show id=\"$numArray[$index]\" href=\"http://myurl/img_". "$numArray[$index]" .".png\">$numArray[$index] </a>| ");
    }


    }
    print("<a target=show href=\"list_files3.php\">Index</a></td></tr></TABLE>\n");

    print("<center><form name=slideform><table cellspacing=1 cellpadding=4 bgcolor=\"#000000\"><tr><td align=center bgcolor=\"white\"><b>Image Slideshow</b></td></tr><tr>
    <td align=center bgcolor=\"white\" width=200 height=150>
    <img src=\"http://myurl/img_0.png\" name=\"show\"></td>
    </tr><tr><td align=center bgcolor=\"#C0C0C0\"><select name=\"slide\" onChange=\"change();\"><option value=\"http://myurl/img_". "$finalArray[$index]" ."png\" selected>$finalArray[0]");

    for($index=1; $index < $indexCount; $index++) {

    print("<option value=\"http://myurl/img_". "$finalArray[$index]" ."png\">$finalArray[$index]");

    }
    print("</select></td></tr><tr><td align=center bgcolor=\"#C0C0C0\"><input type=button onClick=\"first();\" value=\"|<<\" title=\"Beginning\"><input type=button onClick=\"previous();\" value=\"<<\" title=\"Previous\"><input type=button name=\"slidebutton\" onClick=\"ap(this.value);\" value=\"Start\" title=\"AutoPlay\"><input type=button onClick=\"next();\" value=\">>\" title=\"Next\"><input type=button onClick=\"last();\" value=\">>|\" title=\"End\"></td></tr></table></form></center>");

    ?>

  • #2
    Regular Coder mic2100's Avatar
    Join Date
    Feb 2006
    Location
    Scunthorpe
    Posts
    562
    Thanks
    15
    Thanked 28 Times in 27 Posts
    here is one i made myself, it loads in the files from a directory and dynamically displayes them.

    Code:
    <div align="left">Gallery</div><p><center>
                  <img src="images/photo/<? echo $firstpic; ?>" name="photo" id="photo">
                  
                  <input name="first" type="button" id="first" value="First" onClick="first_displayimage()" disabled="true">
                  
                  <input name="previous" type="button" id="previous" value="Previous" onClick="previous_displayimage()" disabled="true">
                  
                  <input name="next" type="button" id="next" value="Next" onClick="next_displayimage()" >
                  
                  <input name="last" type="button" id="last" value="Last" onClick="last_displayimage()" ></center>
                  
                  </p>
    and.... at the top of the page

    Code:
    <?php
    $dir = "images/photo/";
    $i=0;
    ?>
    <script>
    
    var images = [<? if (is_dir($dir)){if ($dh = opendir($dir)){while (($file = readdir($dh)) !== false){if($file != '.' && $file != '..' && $file != 'Thumbs.db'){if($i==0){$firstpic=$file;}$i++;$filenames.="'".$file."', ";}}echo substr($filenames, 0, -2);closedir($dh);}} ?>];
    
    var firstimage = images[0];
    var nextimage = images[1];
    var previousimage = '';
    var lastimage = images[images.length - 1];
    
    var nextmarker = 1;
    var previousmarker = '';
    
    var numberofImages = images.length
    
    window.onload = 
    window.onload = 
    
    function first_displayimage()
    {
    
    	nextimage = images[1];
    	previousimage = '';
    
    	nextmarker = 1;
    	previousmarker = 0
    	
    	document.getElementById("photo").src = 'images/photo/' + firstimage;
    	
    	document.getElementById("next").disabled = false;
    	document.getElementById("last").disabled = false;
    
    	if(previousmarker == 0)
    	{
    	
    		document.getElementById("previous").disabled = true;
    		document.getElementById("first").disabled = true;
    	
    	}
    
    }
    
    function previous_displayimage()
    {
    
    	if(previousmarker == 0)
    	{
    	
    		document.getElementById("previous").disabled = true;
    		document.getElementById("first").disabled = true;
    	
    	}	
    
    	document.getElementById("photo").src = 'images/photo/' + previousimage;
    	
    	nextmarker = previousmarker + 1;
    	previousmarker = previousmarker - 1
    		
    	nextimage = images[nextmarker];
    	previousimage = images[previousmarker];	
    	
    	document.getElementById("next").disabled = false;
    	document.getElementById("last").disabled = false;
    
    }
    
    function next_displayimage()
    {
    
    	document.getElementById("photo").src = 'images/photo/' + nextimage;
    	
    	previousmarker = nextmarker - 1;
    	nextmarker = nextmarker + 1;
    	
    	nextimage = images[nextmarker];
    	previousimage = images[previousmarker];	
    	
    	document.getElementById("first").disabled = false;
    	document.getElementById("previous").disabled = false;
    	
    	if(nextmarker == images.length)
    	{
    	
    		document.getElementById("next").disabled = true;
    		document.getElementById("last").disabled = true;
    	
    	}
    	
    
    }
    
    function last_displayimage()
    {
    
    	previousmarker = images.length - 2;
    	
    	nextimage = '';
    	previousimage = images[previousmarker];
    
    	nextmarker = images.length;
    	
    	document.getElementById("photo").src = 'images/photo/' + lastimage;	
    	
    	document.getElementById("first").disabled = false;
    	document.getElementById("previous").disabled = false;
    	
    	if(nextmarker == images.length)
    	{
    	
    		document.getElementById("next").disabled = true;
    		document.getElementById("last").disabled = true;
    	
    	}
    
    }
    
    </script>
    I hope this helps....

  • #3
    bs1
    bs1 is offline
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mic2100,

    I'm trying to use your javascript/php code to create a dynamic slideshow on my site. Thank you very much for doing this because it is the best solution I've ever found.

    But I'm having one problem. In this test page I built with your code, for some reason the NEXT, PREVIOUS, and LAST buttons work, but the button to go back to the FIRST image in the directory doesn't seem to work.

    Here's the test page I've built: http://www.pollyticks.com/slideshow.php

    And here's the actual code I'm using for the page: http://www.pollyticks.com/slideshow.txt

    Do you happen to see what could be causing the FIRST link not work? What am I doing wrong? Thanks a lot for writing this. If I can get this working I'll be a happy man. -Blue

  • #4
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    no images

    I am using your scripts exactly as you describe, and the buttons show up nicely, but none of my images display.
    They are all .jpgs and they are in a folder called Images right off of my root site. Is there another way to clarify the path?

    I'm assuming I can replace yours with
    Images/
    but that doesn't seem to work!


  •  

    Posting Permissions

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