2

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.

Ry-
  • 218,210
  • 55
  • 464
  • 476
Dan
  • 5,836
  • 22
  • 86
  • 140

2 Answers2

2

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.

Community
  • 1
  • 1
Art
  • 1,023
  • 1
  • 7
  • 15
  • That's great, thanks Art. Number (1) was just what I was looking for. Is it possible to hijack the close-full-screen button so that it unloads fotorama? I basically have some text links on a page which opens fotorama full screen (fotorama isn't visible anywhere on the page - only when the user clicks a link and it loads full screen). What I'd like to be able to do is remove fotorama when the full screen mode is exited so that the user just returns to the web page and can click other links to launch different fotorama full-screen links. Many thanks. – Dan Sep 28 '13 at 13:40
1

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.

Community
  • 1
  • 1
tr_
  • 33
  • 4