jquery - 如何仅在图像悬停时显示 fancybox 标题

Question

我正在使用Fancybox plugin对于图像库，我想仅当用户将鼠标悬停在图像上时显示图像标题。我不知道要修改代码的哪一部分才能完成此任务。

我尝试通过向以下内容添加 :hover 状态来编辑 CSS:

.fancybox-title-over-wrap {
}

我什至尝试过在这里使用 CSS 可见性设置:

.fancybox-opened .fancybox-title {
}

但是，我没有运气。

我必须更改实际 JS 文件中的某些内容吗？任何帮助将不胜感激!

Answer 1

你不需要搞乱原来的js或css文件。您只需创建自己的自定义脚本并应用一些 fancybox API 选项和方法即可实现此目的。

例如，有这个 html

<a class="fancyLink" href="images/01.jpg" title="lorem ipsum">open image</a>

您需要一个自定义脚本来触发 fancybox，例如:

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox();
}); // ready
</script>

现在，在上面的脚本中，尝试以下选项来实现您想要的 title 效果:

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox({
  helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").show();
    }, function() {
     $(".fancybox-title").hide();
   });
  }
 });
}); // ready
</script>

您甚至可以添加一些漂亮的动画来显示标题，例如

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox({
  helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").stop(true,true).slideDown(200);
    }, function() {
     $(".fancybox-title").stop(true,true).slideUp(200);
   });
  }
 });
}); // ready
</script>

注意:这是 fancybox v2.x