I am using Fancybox for photo gallery. and using following code to update photo views on click with php mysql and ajax.
I want to update views for images when previous or next button in opened fancybox is clicked.
Current code :
Javascript :
<script>
$('document').ready(function(){
$('.updatecount').click(function(){
var unique_id = $(this).parent().data('id');
$.ajax({
url: 'photo-gallery-count-update.php',
data: {"uniqueid": unique_id},
method: 'post'
});
});
});
</script>
HTML Part :
<div class="card " data-id="<?php echo $pdata['unique_id'];?>">
<div class="card-image updatecount">
<a href="<?php echo $img_url;?>" data-fancybox="gallery" data-caption="<?php echo $caption_final;?>">
<img src="<?php echo $img_url;?>" alt="Image Gallery">
</a>
</div>
<div class="c1"><?php echo $subtitle_final;?></div>
</div>
photo-gallery-count-update.php :
<?php
include("db.php");
if(isset($_POST['uniqueid'])){
$unique_id = $database->filter($_POST['uniqueid']);
$query= "select * from $photo_gallery_table where unique_id='$unique_id'";
$numrow = $database->num_rows($query);
if ($numrow != 0){
$result = $database->get_results($query);
foreach ($result as $data){
$viewed = $data['viewed'];
$viewed_new = $viewed + 1;
$viewed_on = date("Y-m-d H:i:s");
$unique_id_db = $data['unique_id'];
$insertdata = array (
'viewed' => $viewed_new,
'viewed_on' => $viewed_on,
);
$where = array (
'unique_id' => $unique_id_db
);
$database->update($photo_gallery_table, $insertdata, $where);
}
}
}
?>
This code is working when Photo is clicked directly.
When photo is clicked, fancybox get opened showing photo.
I want to update views for next or previous photos when clicked on Next / Previous button in opened fancybox.
I tried adding class names .fancybox-slide--next, .fancybox-slide--previous in javascript click event, but it didn’t work.