Включить полноэкранный режим в галерее Blueimp для bootstrap 3

как включить «полноэкранный режим» галереи Blueimp для bootstrap3, сейчас он работает, но только в «оконном режиме», и я хотел бы использовать его в полноэкранном режиме, чтобы изображения использовали всю ширину и высоту на рабочем столе / планшет / экран телефона.

Вот о чем я говорю:

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


twitter-bootstrap-3 fullscreen gallery blueimp
person DanishDeveloper    schedule 04.05.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вам нужно установить fullScreen в true в хеш-параметре галереи. Обратите внимание, что это чувствительно к регистру. Если вы используете скрипт с сайта, измените строку:

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

По крайней мере, у меня это сработало. Когда я решил использовать версию подключаемого модуля jQuery и добавил полноэкранный режим в качестве тега данных, я столкнулся с другой проблемой: Rails преобразовал тег fullScreen в нижний регистр, а затем он не стал распознается плагином. Мне пришлось добавить строку javascript, которая устанавливала параметр вручную:

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

Теперь это работает для меня. :)

person Matthias    schedule 24.11.2014

arrow_upward
1
arrow_downward

используйте этот код

$('#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>
person beshan    schedule 26.10.2014

arrow_upward
-4
arrow_downward

Вам нужно включить его здесь:

var fullscreenOptions = {
    fullScreen: false
};

Из README из галереи Blueimp

person Shawn Taylor    schedule 20.05.2014