在 fancybox 画廊内鼠标悬停时交换图像？

Question

当单击缩略图并将图像加载到 Fancybox 幻灯片中时，我希望将鼠标悬停在图像上时能够在图像的两个不同版本之间切换。

我一直在尝试通过搜索此处的问题找到的各种代码片段，但我找不到针对我的确切问题的问答。

我尝试了各种不同版本的鼠标悬停脚本，如下所示：

$("#test").mouseover(function (e) {    
    $(this).attr("src", $(this).attr("src").replace("images/rt/test1.jpg", "images/rt/test2.jpg"));
}).mouseout(function (e) {
    $(this).attr("src", $(this).attr("src").replace("images/rt/test2.jpg", "images/rt/test1.jpg"));
});

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

这是将图像加载到幻灯片中的代码：

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

img src 部分是缩略图，但我需要切换版本的是 href 标签引用的图像。我还没有找到任何可以做到这一点的东西。

下面是我发现确实有效的一件事，但只有当我将它与 img 标签一起使用时它才有效，而不是当我尝试将它应用于 href 部分时。

<img src="images/rt/test1.jpg" height="85px" width="85px" onmouseover="this.src='images/rt/test2.jpg'"onmouseout="this.src='images/rt/test1.jpg'">

理想情况下，我需要这样的东西，我可以将其放入 href 标记中，或者对 mouseout 函数进行一些修改，以针对 fancybox 的右侧部分。

如果你说不出来，我是 jquery 的真正初学者，所以我可能遗漏了一些非常明显的东西！

Answer 1

此问题的答案与 99% 的其他与 fancybox 相关的问题的答案相同 - 只需使用回调即可。回调允许您在进度的不同阶段执行代码，例如，在图像加载后立即执行。所以，代码可能是这样的：

$('[data-fancybox="gallery"]').fancybox({
  afterLoad : function(instance, current) {

    current.$image.mouseover(function (e) {    
      $(this).attr("src", $(this).attr("src").replace("/id/1", "/id/2"));
    }).mouseout(function (e) {
      $(this).attr("src", $(this).attr("src").replace("/id/2", "/id/1"));
    });

  }
});

演示 - https://jsfiddle.net/1t5wpzqc/

在 fancybox 画廊内鼠标悬停时交换图像？

Swap image on mouseover inside fancybox gallery?

jquery

css

hover

fancybox

mouseover