Question

如何为Bootstrap3启用Blueimp gallery的“全屏模式”，它现在正在工作，但仅在“窗口模式”下，我想在全屏使用它，以便图像使用全宽和桌面/平板电脑/手机屏幕上的高度。

这就是我所说的：

http://blueimp.github.io/Bootstrap-Image-Gallery/

Answer 1

您需要在图库的选项哈希中将fullScreen设置为true。请注意它区分大小写。如果您使用网站上的脚本，请更改以下行：

<script>
    ...
    options = {index: link, event: event, fullScreen: true},
    ...
</script>

至少那对我有用。当我决定使用插件的 jQuery 版本并将全屏选项添加为数据标记时，我遇到了另一个问题：Rails将标记fullScreen转换为小写，并且然后它没有被插件识别。我必须添加一行javascript手动设置选项：

$('#blueimp-gallery').data( 'fullScreen', 'true' );

现在，它对我有用。：）

Answer 2

使用此代码

$('#blueimp-gallery').data('fullScreen', 'true');

完整示例

<html><head>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
    <link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
</head><body>

<div id="links" data-slideshow="100" class="modal-fullscreen">
    <a href="111.jpg" data-gallery="#blueimp-gallery-fullscreen">111</a>
    <a href="222.jpg" data-gallery="#blueimp-gallery-fullscreen">222</a>
</div>

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>    
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>

<script>
    $('#blueimp-gallery').data('fullScreen', 'true');
</script>

</body> 
</html>

Answer 3

您需要在此处启用它：

var fullscreenOptions = {
    fullScreen: false
};

来自Blueimp Gallery README

在Blueimp gallery中为bootstrap 3启用全屏

3 个答案: