在fancybox画廊内的鼠标悬停上交换图像？答案

【问题标题】：Swap image on mouseover inside fancybox gallery?在fancybox画廊内的鼠标悬停上交换图像？
【发布时间】：2020-01-11 03:35:03
【问题描述】：

当单击缩略图并将图像加载到 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 的真正初学者，所以我可能会遗漏一些非常明显的东西！

【问题讨论】：

那么，您想在鼠标悬停事件中更改href 属性吗？你到底为什么要这么做？为什么你认为你的第一个剪断不起作用，请在 codepen/jsfiddel/whatever 上提供现场演示
我不想更改 URL，它是加载的图像，我想在鼠标悬停时对其进行操作。但是画廊似乎工作的方式是加载并变为全尺寸的图像由该组“a”标签中的图像网址引用。这似乎与“img”标签的响应方式不同，例如当我尝试介绍一个类/ id 时。我无法理解它。已尝试将其全部放入 codepen - codepen.io/owlyone/pen/dybmbzK 因此，一旦您单击拇指，它就会加载图像，这是我希望能够在悬停时更改的图像

标签： jquery css hover fancybox mouseover

【解决方案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/

【讨论】：