Fatal编程技术网

Twitter bootstrap 3 在Blueimp gallery中为引导3启用全屏

twitter-bootstrap-3

Twitter bootstrap 3 在Blueimp gallery中为引导3启用全屏,twitter-bootstrap-3,gallery,fullscreen,blueimp,Twitter Bootstrap 3,Gallery,Fullscreen,Blueimp,如何为bootstrap3启用Blueimp gallery的“全屏模式”，它现在正在工作，但仅在“窗口模式”下工作，我希望在全屏模式下使用它，以便图像使用桌面/平板电脑/手机屏幕上的全宽和全高 这就是我所说的： 您需要在此处启用它： var fullscreenOptions = { fullScreen: false }; 从中使用此代码 $('#blueimp-gallery').data('fullScreen', 'true'); 完整示例 <html><

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

这就是我所说的：

您需要在此处启用它：

var fullscreenOptions = {
    fullScreen: false
};
从

中使用此代码

$('#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>


‹
›
×
$（'blueimp gallery'）。数据（'fullScreen'，'true'）；
您需要在gallery的选项哈希中将
全屏
设置为
true
。请注意，它区分大小写。如果使用网站中的脚本，请更改行：

<script>
    ...
    options = {index: link, event: event, fullScreen: true},
    ...
</script>
现在，它正在为我工作。：）

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