update在上一个或下一个按钮上访问fancybox上的单击 我正在使用Fancybox进行照片库。并使用以下代码在使用PHP MySQL和AJAX的单击时更新照片视图。 我想在打开的幻想中上一个或下一个按钮时更新图像的视图...

Question

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);
    }
  }
 }
?>

直接单击照片时，该代码正在工作。

当照片点击时，打开构图显示照片。

我想在打开的fancybox中单击下一个 /上一个按钮时更新下一个或上一个照片的视图。 我尝试在JavaScript点击事件中添加类名

.fancybox-slide--next

，

.fancybox-slide--previous

，但它不起作用。

您应该收听旋转木马“更改”事件，因为用户可以使用键盘导航。请参阅此处的第二个示例-https：//fancyapps.com/fancybox/api/events/#tips-and-tricks

Fancybox.bind("[data-fancybox]", {
  on: {
    "Carousel.ready Carousel.change": (fancybox) => {
      // Current slide
      const slide = fancybox.getSlide();

      // The corresponding trigger element
      // (i.e. the link that is clicked to launch Fancybox)
      const triggerEl = slide.triggerEl;

      // ... update your count here !!!
    },
  },
});