如何仅在图像悬停时显示fancybox标题 [英] How to display fancybox title only on image hover

问题描述

我正在将 Fancybox插件用于图片库，并且我只想显示图片标题当用户将鼠标悬停在图像上时.我无法弄清楚为了完成此操作而需要修改的代码部分.

I'm using the Fancybox plugin for an image gallery, and I want to display the image titles only when the user hovers over the image. I cannot figure out what part of the code to modify in order to accomplish this.

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

I've tried editing the CSS by adding a :hover state to the following:

.fancybox-title-over-wrap {
}

，我什至尝试在此处使用CSS可见性设置:

and I've even tried playing with the CSS visibility settings here:

.fancybox-opened .fancybox-title {
}

但是，我没有运气.

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

Must I change something within the actual JS file? Any help would be tremendously appreciated!

推荐答案

您无需弄乱原始的js或css文件.您只需要创建自己的自定义脚本，然后在其中应用一些fancybox API选项和方法即可实现这一目标.

You don't need to mess with the original js or css files. You just need to create your own custom script and apply there some fancybox API options and methods to achieve that.

例如，拥有此html

For example, having this html

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

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

you would need a custom script to fire fancybox like:

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

现在，在上面的脚本中，为所需的title效果尝试以下选项:

now, within the script above, try the following options for the title effect you want:

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

您甚至可以添加一些精美的动画来显示title之类的

You could even add some nice animation to show the title like

<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

NOTE: this is fancybox v2.x

这篇关于如何仅在图像悬停时显示fancybox标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！