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

Question

我正在使用Fancybox插件作为图片库,我只想在用户将鼠标悬停在图片上时显示图片标题.我无法弄清楚要修改的代码部分是为了实现这一点.

我已经尝试通过向a :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>

你甚至可以添加一些漂亮的动画来展示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").stop(true,true).slideDown(200);
    }, function() {
     $(".fancybox-title").stop(true,true).slideUp(200);
   });
  }
 });
}); // ready
</script>

注意:这是fancybox v2.x