Fullscreen

Allow fotorama to enter fullscreen using data-allowfullscreen:

<div class="fotorama"
     data-allowfullscreen="true">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

This will show an icon at the top-right that toggles the fullscreen.

Fullscreen example (new window):

Native fullscreen

To use modern Fullscreen API, set data-allowfullscreen to native:

<div class="fotorama"
     data-allowfullscreen="native">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Native fullscreen example (new window):

Large images

You can specify a separate fullscreen image version via the data-full attribute:

<div class="fotorama"
     data-allowfullscreen="native">
  <img src="1.jpg" data-full="1_full.jpg">
  <img src="2.jpg" data-full="2_full.jpg">
</div>

When using image CDNs like Uploadcare, you can use a single image source for both larger and smaller versions. To do this, ingest the large image version to Uploadcare and apply the resize Image Transformation to generate its smaller version on the fly. Here’s an example:

Large image, source:

https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/

Smaller 640px-wide version, generated on the fly:

https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/-/resize/640x/

Refer to Uploadcare Docs to learn more.