如何在Fancybox画廊中实现鼠标悬停切换图片？

嘿，我明白你的需求啦——点击缩略图用Fancybox打开大图后，鼠标悬停在大图上能切换到另一版本，移出再切回来对吧？之前你试的代码都是针对缩略图的img标签，没法作用到Fancybox里动态生成的大图，这就给你解决办法～

核心思路 #

Fancybox的大图是动态生成的元素，所以不能直接给原始的<a>标签绑定事件，得等Fancybox加载完成后，找到它生成的大图元素再绑定鼠标事件。另外，我们可以给每个缩略图链接加个自定义data属性，用来存备用图的地址，这样不用硬写路径替换，更灵活。

步骤1：修改你的HTML结构 #

给每个带data-fancybox的<a>标签添加data-src-alt属性，用来存放要切换的第二张大图地址：

<a data-fancybox="gallery" href="images/rt/test1.jpg" data-src-alt="images/rt/test2.jpg" data-caption="lorem ipsum">
  <img src="images/rt/thumb.jpg" height="85px" width="85px">
</a>

如果是多个图片的画廊，只要给每个<a>都加上对应的data-src-alt就行。

步骤2：用Fancybox的API绑定鼠标事件 #

根据你用的Fancybox版本，选对应的代码：

如果你用的是Fancybox 3+（推荐）

直接在初始化Fancybox的时候，利用afterShow钩子来绑定事件：

// 初始化Fancybox并绑定切换逻辑
$('[data-fancybox="gallery"]').fancybox({
  afterShow: function(instance, current) {
    // 获取当前幻灯片对应的原始<a>标签
    var originalLink = current.opts.$orig;
    // 从data属性里拿备用图地址
    var alternateSrc = originalLink.data('src-alt');
    // 获取Fancybox里的大图元素
    var $largeImage = current.$image;
    
    // 保存原始大图地址，用于鼠标移出时恢复
    var originalSrc = $largeImage.attr('src');
    
    // 先解绑之前的事件（防止重复绑定），再绑定鼠标进出事件
    $largeImage.off('mouseenter mouseleave')
      .on('mouseenter', function() {
        $(this).attr('src', alternateSrc);
      })
      .on('mouseleave', function() {
        $(this).attr('src', originalSrc);
      });
  }
});

如果你用的是旧版Fancybox（比如2.x）

可以监听全局的afterShow事件：

// 监听Fancybox展示完成的事件
$(document).on('afterShow', '.fancybox-container', function() {
  // 获取当前幻灯片对应的原始<a>标签
  var currentLink = $('.fancybox-slide--current').data('orig');
  var alternateSrc = $(currentLink).data('src-alt');
  var $largeImage = $('.fancybox-image');
  
  var originalSrc = $largeImage.attr('src');
  
  $largeImage.off('mouseenter mouseleave')
    .on('mouseenter', function() {
      $(this).attr('src', alternateSrc);
    })
    .on('mouseleave', function() {
      $(this).attr('src', originalSrc);
    });
});

为什么之前的代码没用？ #

你之前写的代码都是绑定在原始的<a>或缩略图img上，但Fancybox打开后显示的大图是它自己动态创建的新元素，和原始标签没关系，所以必须等Fancybox渲染完成后，再给这个新元素绑定事件～

内容的提问来源于stack exchange，提问作者owlyone