Call fotorama gallery in full screen mode via API

StackOverflow https://stackoverflow.com/questions/19014907

  •  29-06-2022
  •  | 
  •  

Frage

I'm launching the fotorama jquery gallery plug-in from a standard HTML link. It works nicely but I'd like to launch in full-screen mode right away, rather than having to click the link within fotorama to change it to full screen after it's launched.

The code I have is this:

<div id="fotorama" class="fotorama"
   data-width="100%"
   data-height="100%"
   data-nav="thumbs"
   data-allowfullscreen="true"
   data-transition="crossfade"
   data-auto="false">
</div>

<p class="something">Something</p>

<script>
  $(function(){
    $('.something').click(function(){

      var $gallery = $('#fotorama').fotorama();
      var fotorama = $gallery.data('fotorama');

      // Overwirte all the photos
      fotorama.load([
        {img: '0027.jpg'},
        {img: '1759.jpg'}
      ]);

    });
  });
</script>

Since I can't find the API documentation (perhaps it's not complete just yet?) I was wondering if anyone knows how to do this?

Many thanks.

War es hilfreich?

Lösung

1. requestFullScreen()

Use Fotorama API call with prevented auto-initialization:

<script>
  $(function () {
    var fotorama = $('.fotorama')
      .fotorama({allowfullscreen: true})
      .data('fotorama');

    fotorama.requestFullScreen();
  });
</script>

<div class="fotorama"
     data-auto="false"
     data-height="100%">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

But there will be a fullscreen-exit icon at the top-right, and users will be able to leave fullscreen. And even if you make the icon invisible, it will possible to close fullscreen by pressing esc button. So...


2. data-width="100%" data-height="100%"

I believe that it’s better to imitate fullscreen with this snippet:

<body style="margin: 0;">

  <div class="fotorama"
       data-width="100%"
       data-height="100%">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>

</body>

Example: http://fotorama.io/examples/full-window.html.

Andere Tipps

I've wasted a lot of time trying to hide Fotorama block. Try to add class “fotorama--hidden”.

<div class="fotorama fotorama--hidden">
  <!-- images -->
</div>

This will hide the block but all functions from Art's answer #1 will work normally. And when you exit fullscreen Fotorama will just hide.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top