Ajax Next / Previous Picture (jQuery / PHP)

If you are looking for a simple script to navigate next / previous image without refreshing page, this example will do exactly that using jQuery Ajax and PHP.

SQL Tabe

Following SQL code creates a table named "pictures" with 3 columns (id, PictureTitle, PictureName) and inserts pictures data into the table.
MYSQL
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
CREATE TABLE IF NOT EXISTS `pictures` ( `id` int(11) NOT NULL AUTO_INCREMENT, `PictureTitle` varchar(60) NOT NULL, `PictureName` varchar(60) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ; INSERT INTO `pictures` (`id`, `PictureTitle`, `PictureName`) VALUES (1, 'Benjamin Button', 'benjamin_button.jpg'), (2, 'Liv Taylor', 'liv-taylor.jpg'), (3, 'Macro Shot 1', 'pic1.jpg'), (4, 'Macro Shot 2', 'pic2.jpg'), (5, 'Sweets', 'mysweets.jpg');

Index Page

A picture will be loaded primarily, and then user can navigate to next / previous images without refreshing the page. Below is the jQuery code that sends Ajax request to getpicture.php to fetch picures.
JQUERY
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
$(document).ready(function() { $.post( "getpicture.php", { pic: "1"}, function( data ) { $("#picture").html( data ); }); $("#picture").on("click",".get_pic", function(e){ var picture_id = $(this).attr(\'data-id\'); $("#picture").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>"); $.post( "getpicture.php", { pic: picture_id}, function( data ) { $("#picture").html( data ); }); return false; }); });

getpicture.php

File gets image id from index.php, and gets image information from database, creates next/previous button returns image data back to index.php. Replace xxxxx with your MySQL username, password and database name.
PHP
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
$username = "root"; //mysql username $password = ""; //mysql password $hostname = "localhost"; //hostname $databasename = 'test'; //databasename //get pic id from ajax request if(isset($_POST["pic"]) && is_numeric($_POST["pic"])) { $current_picture = filter_var($_POST["pic"], FILTER_SANITIZE_NUMBER_INT); }else{ $current_picture=1; } //Connect to Database $mysqli = new mysqli($hostname, $username, $password, $databasename); if ($mysqli->connect_error){ die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error); } //get next picture id $result = $mysqli->query("SELECT id FROM pictures WHERE id > $current_picture ORDER BY id ASC LIMIT 1")->fetch_object(); if($result){ $next_id = $result->id; } //get previous picture id $result = $mysqli->query("SELECT id FROM pictures WHERE id < $current_picture ORDER BY id DESC LIMIT 1")->fetch_object(); if($result){ $prev_id = $result->id; } //get details of current from database $result = $mysqli->query("SELECT PictureTitle, PictureName FROM pictures WHERE id = $current_picture LIMIT 1")->fetch_object(); if($result){ //construct next/previous button $prev_button = (isset($prev_id) && $prev_id>0)?'<a href="#" data-id="'.$prev_id.'" class="get_pic"><img src="prev.png" border="0" /></a>':''; $next_button = (isset($next_id) && $next_id>0)?'<a href="#" data-id="'.$next_id.'" class="get_pic"><img src="next.png" border="0" /></a>':''; //output html echo '<table width="500" border="0" cellpadding="5" cellspacing="0">'; echo '<tr>'; echo '<td><table width="100%" border="0" cellpadding="5" cellspacing="0">'; echo '<tr>'; echo '<td width="10%">'.$prev_button.'</td>'; echo '<td width="80%" align="center"><h3>'.$result->PictureTitle.'</h3></td>'; echo '<td width="10%">'.$next_button.'</td>'; echo '</tr>'; echo '</table></td>'; echo '</tr>'; echo '<tr>'; echo '<td align="center"><img src="pictures/'.$result->PictureName.'" /></td>'; echo '</tr>'; echo '</table>'; }
Download Demo
New question is currently disabled!