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.
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.
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.
