fancybox3 标题在一段时间后隐藏

Question

为什么字幕过一段时间就消失了？目前，如果用户在 window 中没有做任何事情，标题会在一段时间后消失。

如何阻止字幕始终可见？

不知道我是 fancybox3 的新手。

<!doctype html>
<html>
<head>
 <title>fancyBox - touch enabled, responsive and fully customizable lightbox script</title>

 <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
 <meta content="text/html;charset=utf-8" http-equiv="Content-Type">

 <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,700" rel="stylesheet" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css">
 <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>

<body>
 <div class="hidden">
        <a data-fancybox="cl-group" data-caption="zaid 1" data-thumb="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg"><img src="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="zaid 2" data-thumb="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" href="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_b.jpg"><img src="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="zaid 3" data-thumb="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" href="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_b.jpg"><img src="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="zaid 3" data-thumb="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_m.jpg" href="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_b.jpg"><img src="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="zaid 4" data-thumb="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" href="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg"><img src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="zaid 5" data-thumb="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" href="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg"><img src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="zaid 6" data-thumb="http://farm8.staticflickr.com/7353/8998818196_ec7c900bf6_m.jpg" href="http://farm8.staticflickr.com/7353/8998818196_ec7c900bf6_b.jpg"><img src="http://farm8.staticflickr.com/7353/8998818196_ec7c900bf6_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption=" (dSavin)" data-thumb="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_m.jpg" href="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_b.jpg"><img src="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="The Trail (Msjunior-Check out my galleries)" data-thumb="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg"><img src="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="First light (Jan Linskens)" data-thumb="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_m.jpg" href="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_b.jpg"><img src="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="Color of Autumn (fukui_norisuke)" data-thumb="http://farm9.staticflickr.com/8067/8219961599_be412f62dd_m.jpg" href="http://farm9.staticflickr.com/8067/8219961599_be412f62dd_b.jpg"><img src="http://farm9.staticflickr.com/8067/8219961599_be412f62dd_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="Assunção - Santo Tirso...a New Dimension... (Alex Matos)" data-thumb="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" href="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_b.jpg"><img src="http://farm8.staticflickr.com/7100/6917703112_d18e3e1b95_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="Cummeengeera Settlement/Rabachs Glen. (alancronin02)" data-thumb="http://farm8.staticflickr.com/7065/7058141285_064170310e_m.jpg" href="http://farm8.staticflickr.com/7065/7058141285_064170310e_b.jpg"><img src="http://farm8.staticflickr.com/7065/7058141285_064170310e_m.jpg" alt=""></a>
        <a data-fancybox="cl-group" data-caption="1968 Dodge Charger R/T - Solaris (1968 Dodge Charger R/T)" data-thumb="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_m.jpg" href="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_b.jpg"><img src="http://farm6.staticflickr.com/5333/7061356373_1af921fd78_m.jpg" alt=""></a>
    </div>
<script>
 
</script>
</body>
</html>

Answer 1

如果有人遇到这个问题，那么有一种方法可以直接处理标题，您需要更改花式框 JS 库。我只是从 JS 库中删除 fancybox-caption class 和所有修复。 :) 查找 fancybox-caption class 并将其从 removeClass 函数中删除。

或添加

$('.fancybox').fancybox({
    idleTime: false
});

Answer 2

默认情况下，字幕会在 4 秒后消失。要禁用此行为，请将 idleTime 选项设置为 false:

$('.fancybox').fancybox({
    idleTime: false
});

Answer 3

在CSS中可以，只需添加

   .fancybox-caption{
        visibility: visible;
        direction: ltr;
        opacity: 1;
        position: absolute;
        z-index: 99997;
      }

Answer 4

您还可以使用数据选项控制 <a> 标签的行为。

在上面的示例中，它将是：

<a data-fancybox="cl-group" data-options='{"idleTime" : "false"}' data-caption="zaid 1" data-thumb="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" href="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_b.jpg"><img src="http://farm9.staticflickr.com/8665/15613375844_99dc1e5dc0_m.jpg" alt=""></a>

fancybox3 标题在一段时间后隐藏

fancybox3 caption hide after some time

caption

fancybox-3