Question

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

我尝试通过将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

Answer 2

从他们的网站：

确保它位于主页顶部：

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>

<!-- Optionaly add button and/or thumbnail helpers -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script>

然后将此类语法添加到要执行此操作的图像中。

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

最后，使用一点点jScript使其全部运行。

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

如果您仍遇到问题，请参阅此处：http://docs.jquery.com/Tutorials:How_jQuery_Works

要按照您的要求显示说明，可以在javascript中尝试：

$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

这是您的图像语法：

<a class="fancybox" rel="gallery1" href="http://path-to-image.com/images/photo.jpg" title="Some Description Here.">
    <img src="http://path-to-image.com/images/photo.jpg" alt="" />
</a>

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

2 个答案: