is a demo...
At the top of the page i put all the images so you can be sure that they are going in the correct order. At bottom it tells you the total # of images.
Here is the code.
I am -assuming- you know PHP and Javascript (at least a little) and you'll be able to break it down. I didn't bother coding it or anything but I can garauntee it's my work.
What you need to do is create a mysql database and then a table in it w/ 2 rows (id and one called urls) - have your friend add all of the URLS to the images to that database (or create an upload form that will do it automatically) and then voila! It's all done...
No refreshes or anything, javascript does it without refreshes.. Here you go.
If you have any questions on the code, let me know lol.
<?php
mysql_connect("localhost","MYSQLUSERNAME","MYSQLPASSWORD") or die(mysql_error());
mysql_select_db("IMAGEDATABASE") or die(mysql_error());
$sql = "SELECT * from images";
$result = mysql_query($sql);
$totalimages = 0;
$imageurls = array("null");
?>
<script language="javascript">
<!--
var imageurls = new Array();
imageurls[0] = "null";
-->
</script>
<?php
while($row = mysql_fetch_array($result)) {
array_push($imageurls,$row['url']);
$totalimages +=1;
echo ?>
<script language="javascript">
<!--
imageurls.push("<?php echo $row['url'];?>");
-->
</script>
<img src="<?php echo $row['url'];?>">
<?php
}
?><center><br><br><br><br>
<a href="#" onclick="goFirst()">First</a> |
<a href="#" onclick="goPrev()">Prev</a> |
<a href="#" onclick="goNext()">Next</a> |
<a href="#" onclick="goLast()">Last</a>
<br>
<img src="<?php echo $imageurls[1];?>" id="im">
</center>
<br><br>
<?php echo $totalimages;?><br>
<script type="text/javascript">
<!--
var totalimages = <?php echo $totalimages; ?>;
var currentimage = 1;
var nextimage;
var previmage;
function goFirst() {
currentimage = 1;
document.getElementById('im').src='<?php echo $imageurls[1];?>';
}
function goLast() {
currentimage = totalimages;
document.getElementById('im').src='<?php echo $imageurls[$totalimages];?>';
}
function goNext() {
if((currentimage + 1) > totalimages)
{
currentimage = totalimages - 1;
}
document.getElementById('im').src=imageurls[currentimage+1];
currentimage += 1;
}
function goPrev() {
if((currentimage - 1) < 1)
{
currentimage = 2;
}
document.getElementById('im').src=imageurls[currentimage-1];
currentimage -= 1;
}
-->
</script>
EDIT: If anyone wants to clean up the code and make it look better and still work and comment it, ect, feel free to do so. Just don't name it as your own work as this did take me a while to do. I'm always up for a challenge.