Skip to content

Instantly share code, notes, and snippets.

@milkbread

milkbread/index.html

Created July 15, 2014 17:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save milkbread/3ae5c94e96dad2344f9c to your computer and use it in GitHub Desktop.
Save milkbread/3ae5c94e96dad2344f9c to your computer and use it in GitHub Desktop.
Download ZIP
FotoramaFullscreen
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- jQuery, -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Fotorama -->
<link href="http://fotorama.s3.amazonaws.com/4.5.2/fotorama.css" rel="stylesheet">
<script src="http://fotorama.s3.amazonaws.com/4.5.2/fotorama.js"></script>
<!-- Just don’t want to repeat this prefix in every img[src] -->
<base href="http://s.fotorama.io/okonechnikov/">
<style type="text/css">
.fotorama__fullscreen-icon {
visibility: hidden;
}
</style>
</head>
<a href="http://fotorama.io/customize/fullscreen/">source</a>
<a href="http://stackoverflow.com/questions/19014907/call-fotorama-gallery-in-full-screen-mode-via-api">good help</a>
<body>
<!-- Fotorama -->
<div class="fotorama">
<a href="9-lo.jpg"></a>
<a href="23-lo.jpg"></a>
<a href="14-lo.jpg"></a>
<a href="15-lo.jpg"></a>
<a href="16-lo.jpg"></a>
</div>
<script type="text/javascript">
var fotorama = $('.fotorama')
.fotorama({
fit: 'contain',
allowfullscreen: true,
nav: false,
arrows: false,
autoplay: 1000,
transition: 'dissolve',
loop: true
})
.data('fotorama');
fotorama.requestFullScreen();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment