php: make array from pictures in a folder and display them interchangeably?
Question
The following code is supposed to make an array from pictures found in a directory that end in .png using php, then allow buttons to change the pointer on the array and allow the page to display the current picture that the pointer is on. This doesnt seem to be working at all. Am I doing this correctly?
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {float:left; }
</style>
</head>
<body>
<?PHP
$pages = array ();
$dirname = "assets/pictures/";
$images = glob($dirname."*.png");
foreach($images as $image) {
$pages[] = $image;
}
?>
<?PHP
echo '<img src="'.current($pages).'" class="photo"/>';
function shownext() {
$mode = next($pages);
}
function showprev() {
$mode = prev($pages);
}
function showfirst() {
$mode = reset($pages);
}
function showlast() {
$mode = end($pages);
}
?>
<a href="" onclick="showfirst()">first</a>
<a href="" onclick="showprev()">previous</a>
<a href="" onclick="shownext()">next</a>
<a href="" onclick="showlast()">last</a>
</body>
</html>
4 answers
solution1
1 2014-06-16 06:47:42
onclick ，用于触发javascript函数。
solution2
1 2014-06-16 06:48:57
onclick will allow you to call a javascript function, while your showprev ... showlast functions are all php functions. They are not available in javascript's scope.
Also, in your php code:
- You are closing the loop right after
$pages[] = $image, I think you intend to display (print/echo) all images. - You don't need a loop to copy
$pagesto$images. You can easily copy it:$pages = $images. - You should be aware that
currentonly makes sense inside a loop and you are calling it after loop is closed.
I think though, that you are confusing server-side (ie php) and client-side (ie javascript) execution environments.
solution3
0 2014-06-16 06:51:21
The problem is echo '<img src="'.current($pages).'" class="photo"/>';
This will get echoed once, no matter howoften you change $pages afterwards. You also can't call PHP functions with JavaScript's onclick.
PHP will generate the page on server side! On a fully laoded page, most interaction with the user is done via JavaScript.
To achieve your desired result , you have to export the array to JavaScript and change the image src via JavaScript, a little research will help you.
solution4
0 ACCPTED 2014-06-16 07:12:05
You cant directly put your php functions on onclick="" events. Alternatively, if you want to use jQuery, you could use $.ajax to request the values on PHP. From there, after you got the image paths, manipulate the next, prev, first, last on the client side. Consider this example:
<?php
if(isset($_POST['getimages'])) {
$dirname = "assets/pictures/";
$images = glob($dirname."*.png");
// collect the images
foreach($images as $image) {
$pages[] = $image;
}
echo json_encode($pages);
exit;
}
?>
<img src="" alt="" id="images" width="200" height="200" />
<br/>
<a href="#" class="navigate" id="first">First</a>
<a href="#" class="navigate" id="previous">Previous</a>
<a href="#" class="navigate" id="next">Next</a>
<a href="#" class="navigate" id="last">Last</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var current_pointer = 0;
var images = [];
$.ajax({
url: 'index.php', // call the php file that will process it, i just used this in the same page
type: 'POST',
dataType: 'JSON',
data: {getimages: true},
success: function(response) {
// after a successful response from PHP
// use that data and create your own array in javascript
images = response;
$('#images').attr('src', images[current_pointer]);
}
});
// simple pointer to navigate the array you got from PHP
$('a.navigate').on('click', function(){
var current_val = $(this).attr('id');
switch(current_val) {
case 'first':
current_pointer = 0;
break;
case 'last':
current_pointer = images.length-1;
break;
case 'next':
current_pointer = (current_pointer >= images.length-1) ? images.length-1 : current_pointer+1;
break;
case 'previous':
current_pointer = (current_pointer < 0) ? 0 : current_pointer-1;
break;
}
$('#images').attr('src', images[current_pointer]);
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.