I'm trying to make category based gallery with ajax/php/mysql. On the index page are loaded bunch of images. They have href link to the page where user can see only selected image from that category. Now I want to make two buttons for next and prev links so the user can navigate to next image from that category.
The problem is that I'm not sure that I understand it how exactly work the ajax part and how I can "give" the category ID.
This is the link from the index page
<a href="test.php?image_id='.$row['image_id'].'"></a>
This is on the test.php
<head>
<script type="text/javascript">
$(document).ready(function() {
$.post( "getpicture.php", { img_category: "1"}, function( data ) {
$(".main-post").html( data );
});
$(".main-post").on("click",".get_pic", function(e){
var image_id = $(this).attr('data-id');
$(".main-post").html("<div style=\"margin:50px auto;width:50px;\"><img src=\"loader.gif\" /></div>");
$.post( "getpicture.php", { img_category: 1 }, function( data ) {
$(".main-post").html( data );
});
return false;
});
});
</script>
</head>
<body>
<article class="main-post">
// HERE THE IMAGE IS LOADED
</article>
</body>
This is the source in getpicture.php
//get pic id from ajax request
if(isset($_POST["img_category"]) && is_numeric($_POST["img_category"]))
{
$current_picture = filter_var($_POST["img_category"], 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 image_id FROM images WHERE image_id > $current_picture ORDER BY image_id ASC LIMIT 1")->fetch_object();
if($result){
$next_id = $result->image_id;
}
//get previous picture id
$result = $mysqli->query("SELECT image_id FROM images WHERE image_id < $current_picture ORDER BY image_id DESC LIMIT 1")->fetch_object();
if($result){
$prev_id = $result->image_id;
}
//get details of current from database
$result = $mysqli->query("SELECT image_name, image_title, image_hits FROM images WHERE img_category = $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 '
<h1><a href="#">'.$result->image_title.'</a></h1>
<div class="pull-right">
'.$prev_button.'
'.$next_button.'
</div>
<div class="article-content">
<img src="upload/'.$result->image_name.'" alt=""/>
</div>';
}
It's clear that I'm kind of new in this field and still learning but can't understand this.
Right now I click on image with ID=431 on test.php is loaded first row from database id=1 and when I click on next button doesn't change anything.. just refreshing the image that is current.
UPDATE: image table structure
image_id
image_name
image_type
image_size
image_alt
image_path
img_category
image_category table
category_id
category_name
Aucun commentaire:
Enregistrer un commentaire