I checked this site for the same questions, but I do not want to change the image in this project without reloading the page - it needs to be reloaded. Although, when I press the nextor buttons previous, the page jumps straight up, as it should be, there is a way to deal with this, so when the user clicks on the next image, the page reloads the image on the screen, and not the user who has to scroll down each time ? Here is my script:
$albumName = "Our Gallery"; // Name your album!
/*
* Installation:
* 1.) Place your photos into the images directory.
* - Photos will be displayed in alphabetical order.
* 2.) Rename the "basic-php-photo-album" folder to anything you wish.
* - Example: paris-photo-album
* 3.) Upload the renamed folder and all of its contents to your server.
*
* That it! Make multiple albums by repeating the above 3 steps.
*/
/*
* You shouldn't need to change anything beyond this.
*
*/
$p = $_GET['p'];
if ($handle = opendir("uploads")) {
$i = 1;
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$img[$i] = $file;
if ($p == $img[$i]) {
$ci = $i;
}
$i++;
}
}
closedir($handle);
$ti = $i - 1;
$pi = $ci - 1;
if ($p == "") {
$ni = $ci + 2;
} else {
$ni = $ci + 1;
}
$prevNext = "";
if ($pi > 0) {
$piFile = $img[$pi];
$prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $piFile . "\" title=\"Previous image\">Previous «</a>";
} else {
$prevNext .= "«";
}
$prevNext .= " | ";
if ($ni <= $ti) {
$niFile = $img[$ni];
$prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $niFile . "\" title=\"Next image\">» Next</a>";
} else {
$prevNext .= "»";
}
if ($p == "") {
$p = $img[1];
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Dave Caravan Lettings</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Hire our Deluxe Plus Caravan based in Sandy Bay, Exmouth for an easy, great priced family holiday! Comes complete with all required facilities as standard!">
<meta name="keywords" content="Haven,Holidays,Sandy,Bay,Devon,Cliffs,Exmouth,Beach,Caravan,Hire,Rental,Rent,Cheap,Holiday,Family,Entertainment,Daves,Letting,Lettings,Fun,Best,Stay,Nights,Price,Buy">
<meta name="author" content="BaseEnterprises WebDesign">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
td, select, input {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}
.hRule {
border-top: 1px solid #cdcdcd;
margin: 0px 0px 10px 0px;
}
img {
border: 1px solid #333333;
}
.nextPrevious {
font-size: 18px;
color: #cdcdcd;
padding-bottom: 15px;
}
a, a:visited {
color: #cc0000;
text-decoration: none;
}
a:active, a:hover {
color: #cc0000;
text-decoration: underline;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="header-bg">
<div class="wrap">
<div class="header">
<div class="logo">
<h1><a href="index.html">Dave Caravan Lettings</a></h1>
</div>
</div>
<div class="header-bot">
<div class="menu">
<ul>
<li class="home"><a href="index.html">Home</a></li>
<li class=""><a href="location.html">Location</a></li>
<li class=""><a href="facilities.html">Facilities</a></li>
<li class=""><a href="availability.php">Availability</a></li>
<li class=""><a href="contact.html">Contact Us</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="banner">
<div class="wrap">
<span class="banner-img">
<img src="images/banner2.jpg" alt=""/>
</span>
</div>
</div>
</div>
<div class="main">
<div class="wrap">
<div class="content-bot">
<h3><?php echo $albumName; ?></h3>
<p>Images sent to us by previous holiday makers staying in our Caravan... See what it like yourself by browsing the images below...</p><br></br>
<div class="inner-top">
<div class="section group" align="center">
<div class="hRule"></div>
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr align="center">
<td class="nextPrevious"><?php echo $prevNext; ?></td>
</tr>
<tr align="center">
<td><img src="uploads/<?php echo $p; ?>" alt="<?php echo $$albumName; ?>" border="0" height="300px" width="400px"></td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>