实现Fancybox上一张/下一张按钮点击时的图片浏览量更新

嗨，我看了你的问题，当前代码在直接点击图片打开Fancybox时能正常更新浏览量，但切换上/下一张按钮时没触发更新，对吧？这是因为Fancybox的切换按钮是动态生成的，而且它有自己的事件体系，直接绑定点击事件抓不到。咱们可以利用Fancybox提供的内置事件来解决这个问题，同时优化代码逻辑避免重复。

解决方案步骤： #

1. 修改JavaScript代码（核心修改）

我们可以抽离出浏览量更新的AJAX逻辑成独立函数，然后同时处理初始点击图片和Fancybox切换幻灯片两种场景：

<script>
$(document).ready(function(){
  // 抽离AJAX更新逻辑，方便复用
  function updatePhotoView(uniqueId) {
    $.ajax({ 
      url: 'photo-gallery-count-update.php',
      data: {"uniqueid": uniqueId},
      method: 'post',
      // 可选：如果需要处理成功/失败回调，可以加上
      // success: function(response) {
      //   console.log("浏览量更新成功");
      // },
      // error: function() {
      //   console.log("浏览量更新失败");
      // }
    });
  }

  // 保留原来的初始点击逻辑（处理直接点击图片的情况）
  $('.updatecount').click(function(){
    var unique_id = $(this).parent().data('id');
    updatePhotoView(unique_id);
  });

  // 监听Fancybox的幻灯片切换事件，处理上/下一张点击
  $().fancybox({
    selector: '[data-fancybox="gallery"]',
    // 当幻灯片切换完成（上/下一张点击后）触发
    onSlideChange: function(instance, slide) {
      // 获取当前幻灯片对应的页面原始触发元素（就是页面上的<a>标签）
      var $origElement = slide.$orig;
      // 往上找到包含data-id的.card父元素
      var uniqueId = $origElement.closest('.card').data('id');
      // 调用更新函数
      updatePhotoView(uniqueId);
    },
    // 可选：如果希望第一次打开Fancybox时也触发（如果担心初始点击没触发的话）
    // 不过原来的点击事件已经处理了，这里可以根据需求决定是否添加
    // onActive: function(instance, slide) {
    //   var $origElement = slide.$orig;
    //   var uniqueId = $origElement.closest('.card').data('id');
    //   updatePhotoView(uniqueId);
    // }
  });
});
</script>

2. HTML部分无需修改

你的现有HTML结构完全可以支持上面的逻辑，因为我们是通过Fancybox的API找到原始元素对应的.card的data-id，所以保持原来的代码即可：

<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>

3. 优化PHP更新逻辑（可选但推荐）

你原来的PHP代码是先查询当前浏览量再加1更新，这种方式在高并发场景下可能会出现计数错误。咱们可以直接用MySQL的原子更新语法，不用先查询，更高效安全：

<?php
include("db.php");

if(isset($_POST['uniqueid'])){
   $unique_id = $database->filter($_POST['uniqueid']);

   // 直接使用原子更新，避免并发问题
   $insertdata = array (          
      'viewed' => $database->inc('viewed', 1), // 假设你的数据库类支持inc方法，自动生成viewed = viewed +1
      'viewed_on' => date("Y-m-d H:i:s"),          
   );
   $where = array (
      'unique_id' => $unique_id
   );
   $database->update($photo_gallery_table, $insertdata, $where);

   // 如果你更习惯直接写SQL，也可以这么写（更直观）：
   // $query = "UPDATE $photo_gallery_table 
   //           SET viewed = viewed + 1, viewed_on = ? 
   //           WHERE unique_id = ?";
   // $database->query($query, array(date("Y-m-d H:i:s"), $unique_id));
}
?>

为什么原来的方法不行？ #

你之前尝试给.fancybox-slide--next、.fancybox-slide--previous加点击事件没生效，是因为这些元素是Fancybox动态生成的，在页面初始加载时还不存在，所以你的点击事件绑定不到它们。而使用Fancybox官方提供的onSlideChange内置事件，是Fancybox本身的事件机制，能准确捕获切换动作。

备注：内容来源于stack exchange，提问作者Sing O Song