Ajax Next / Previous Picture (jQuery / PHP)
Written by Saran on June 17, 2012, Updated September 3, 2014
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>';
}
