...

View Full Version : dynamic image viewer using php and javascript



hoeyjope
11-17-2006, 02:36 PM
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>");

?>

mic2100
11-18-2006, 02:20 PM
here is one i made myself, it loads in the files from a directory and dynamically displayes them.



<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



<?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....

bs1
11-26-2006, 06:19 PM
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

michelleg
02-11-2010, 08:20 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum