Please help me with PHP arrays and javascript
I have had alot of trouble finding a good explanation on this. I went up and down on the web most of today.
If someone can help with this, please include complete code in the post.
Here it goes.
I would like to read the contents of a directory into an array using PHP (The filenames of images). After this, I would like to be able to show the images one by one by clicking on a next and a a previous link. The only way to do this, I found out is using Javascript. How can I do this. Please post example code of how to do this, if you know how. I already know that you have to use Javascript with PHP.
This is what I have so far. It displays only a single image from the images/ directory, because there is no Javascript interaction. Can someone extend this to use with Javascript. However, the entire directory is read into the $filename array. So, accessing specific images is easy server side, but not client side. The only thing I can do with this is create an image rotator.
Quote:
<html>
<head>
<title>test</title>
</head>
<body>
<?php
$filename = glob("images/*.bmp");
echo "<img src=\"$filename[0]\" />";
?>
</body>
</html>
Re: Please help me with PHP arrays and javascript
I don't know where you got the idea that JavaScript was needed for this, because it isn't.
first, fill an array with filenames:
PHP Code:
$images = glob('images/*.jpg');
then, figure out what image we're on by using a GET request, and set a default starting image.
PHP Code:
$i = isset($_GET['image']) && isset($images[$_GET['image']]) ? $_GET['image'] : 0;
in this case, if the image is set and in the array of images, we use that index. otherwise, use the first index (0).
then, figure out if there is a previous picture. there would be no previous picture if we're on the first picture.
PHP Code:
$prev = $i > 0 ? $i - 1 : false;
if we're not on the first picture, the previous picture is set to the current picture's index minus one. if we are, we set the previous picture to boolean false.
then, figure out if there is a next picture using the same logic we use for the previous picture, but this time we figure out if we are on the last picture or not. the last picture would not have a next picture.
PHP Code:
$next = $i < count($images) - 1 ? $i + 1 : false;
then, we tie it together by adding HTML.
PHP Code:
<img src="<?php echo $images[$i]; ?>" />
<?php if($prev): ?>
<a href="?image=<?php echo $prev; ?>">prev</a>
<?php endif; ?>
<?php if($next): ?>
<a href="?image=<?php echo $next; ?>">next</a>
<?php endif; ?>
Re: Please help me with PHP arrays and javascript
kows, thank you. That helps. There is one more thing. I neglected to mention the reason for Javascript.
Simply to have less server side requests.
The code you posted is very helpful and I immediately dissected it.
Is there a chance you or anyone else could give me an example using Javascript.
The idea is to have the server send the array of filenames to a javascript variable and from there have javascript do client side event handling for next previous image and etc.
Re: Please help me with PHP arrays and javascript
Code:
<html>
<head>
<script language="javascript" type="text/javascript"><!--
var imagesToDisplay = [<?php echo $image_array ?>];
var current = 0;
function nextImage() {
if(++current > imagesToDisplay.length) current = 0;
document.getElementById("myimage").src = imagesToDisplay[current];
}
function prevImage() {
if(--current < 0) current = imagesToDisplay.length - 1;
document.getElementById("myimage").src = imagesToDisplay[current];
}
onload = function() {
document.getElementById("myimage").src = imagesToDisplay[0];
}
// --></script>
</head>
<body>
<img id="myimage" src="placeholder.png" /><br />
<a href="#" onclick="prevImage(); return false">Prev</a> | <a href="#" onclick="nextImage(); return false">Next</a>
</body>
</html>
This is just a general idea, though - remember to make it compatible with people who don't have Javascript (enabled).
