一段时间后，fancybox3 标题隐藏答案

【问题标题】：fancybox3 caption hide after some time一段时间后，fancybox3 标题隐藏
【发布时间】：2017-07-13 05:14:12
【问题描述】：

为什么字幕会在一段时间后消失？目前，如果用户不做任何事情，窗口标题会在一段时间后消失。

如何阻止字幕始终可见？

任何想法我都是新来的 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>

【问题讨论】：

标签： caption fancybox-3

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在 CSS 中可以，只需添加

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

【讨论】：

【解决方案3】：

您还可以使用数据选项控制<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>

【讨论】：

【解决方案4】：

如果有人遇到这个问题，那么有一种方法可以直接处理字幕，您需要更改花哨的盒子 JS 库。我只是从 JS lib 中删除 fancybox-caption 类并全部修复。 :) 找到 fancybox-caption 类并将其从 removeClass 函数中删除。

或添加

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

【讨论】：