I'm using the galleria image gallery ( http://galleria.io/ ) with the classic theme on my web page. I wanted to add a button that takes the user to a fullscreen mode. So, I took a look at the API and it seemed simple: I tried a couple of times and finally got it to work. The thing is: it works perfectly the first time I open the html document but, when I close the fullscreen mode (by pressing esc or clicking the cross) and I try to open it again (by clicking the link I linked it to) it doesn't work. It looks like it tries to open but something stops it: because it shows it for like one second. I have no idea why this happens, can someone help me out here?
My html:
<style>
.content{width:700px;height:800px;margin:20px auto;}
#galleria{height:700px}
</style>
<!-- load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<!-- load Galleria -->
<script src="../../galleria-1.2.8.min.js"></script>
</head>
<body>
<div class="content">
<!-- the link for fullscreen mode -->
<a id="fullscreen" href="#"> fullscreen </a>
<div id="galleria">
<!-- and then all the images just like they were when opening the classic theme demo html -->
</body>
And my javascript:
<script>
Galleria.ready(function() {
var gallery = this;
gallery.attachKeyboard({
left: gallery.prev,
right: gallery.next,
});
$("#fullscreen").click(function() {
gallery.enterFullscreen();
});
});
// Initialize Galleria
Galleria.run("#galleria")
// Load the classic theme
Galleria.loadTheme('galleria.classic.min.js');
</script>
Just in case someone actually has the same odd problem as I did, I found the answer to it: The fullscreen wasn't working in chrome because the default settings were somehow conflicting with it.. (being that I attached the fullscreen function to an tag).
So basically what did it for me was to add an event.preventDefault() right before the enterfullscreen().
The working code:
// Load the classic theme
Galleria.loadTheme('galleria.classic.min.js');
// Initialize Galleria
Galleria.run("#galleria", {
extend:function() {
var gallery = this;
gallery.attachKeyboard({
left: gallery.prev,
right: gallery.next,
});
$("#fullscreen").click(function() {
event.preventDefault();
gallery.enterFullscreen();
});
}