Open a gallery associated with an ID from a database inside a lightbox
I have a little problem here, I'm trying to create an anchor called "Photo", so when the user clicks on that anchor, aaAjax will grab the results from the PHP / MySQL database and display the images inside the open lightbox.
I tried to create something like this:
<a href="" data-lightbox="imoveis">Fotos</a>
Then Ajax:
$(document).on('click','#photos',function(event){
var imovel_id = $(this).attr('id');
$.ajax({
url: 'gallery_query',
type: 'POST',
dataType:"json",
data:{imovel_id: imovel_id},
success: function(data) {
if(data.status == 1) {
//Display images;
} else {
// Return Error message;
}
}
});
initLightbox();
});
Then my PHP request:
<?php require("includes/db_connect.php"); ?>
<?php $imovel_id = $_POST['property_id']; ?>
<?php
$query = "SELECT * FROM gallery WHERE imovel_id = '$imovel_id'";
$result = mysqli_query($connection,$query);
while($row = mysqli_fetch_assoc($result) ){
?>
<?php
if($result > 0){
$data['status'] = 1;
$data['retorno'] .= '<a href="../images/imoveis/'. $row['foto_gallery'] .'" data-lightbox="imoveis"><img src="../images/imoveis/'. $row['foto_gallery'] .'></a>';
mysqli_close($connection);
}else{
$data['status'] = 0;
$data['retorno'] = "Erro ao exibir fotos, se o erro persistir, entre em contato conosco.";
}
echo json_encode($data);
?>
<?php } ?>
My problem is I don't know if this works and what to use in Ajax. I'm researching how Ajax works exactly, so I tried to implement it with a lightbox as an experiment. Anyone though?
Thank!
source to share
Several pointers:
Pick your row to make sure no SQL queries are sent to your server (and not escaping might allow someone to delete all of your data!
<?php $imovel_id = mysqli_real_escape_string($_POST['property_id']); ?>
That is, if in your database you are writing rows for imovel_id,
If not
<?php $imovel_id = intval($_POST['property_id']); ?>
<?php
$query = "SELECT * FROM gallery WHERE imovel_id = $imovel_id";
Sending the result:
// declare $data before, scope issue
$data = null;
if($result > 0){
$data['status'] = 1;
$data['retorno'] .= '<a href="../images/imoveis/'. $row['foto_gallery'] .'" data-lightbox="imoveis"><img src="../images/imoveis/'. $row['foto_gallery'] .'"></a>'; // you were missing a closing quote for the image src.
}else{
$data['status'] = 0;
$data['retorno'] = "Erro ao exibir fotos, se o erro persistir, entre em contato conosco.";
}
mysqli_close($connection); // close connection regardless of returned data
echo json_encode($data);
Hope it helps.
Edit:
One last thing if you want to display what you get:
$.ajax({
url: 'gallery_query',
type: 'POST',
dataType:"json",
data:{imovel_id: imovel_id},
success: function(data) {
if(data.status == 1) {
$('#idOfElement').html(data.retorno);
} else {
// Return Error message;
}
}
});
source to share