february 2013
sun mon tue wed thu fri sat
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28

« June 2012 | Main | April 2014 »


February 21, 2013
Galleria Classic Fullscreen

To make Galleria Classic theme have a 'fullscreen' toggle in the upper right hand corner of the gallery stage (replace all brackets "[]" with angle brackets "<>":

1. Add this div to your main styles-sites.css (adjust position/top/right as necessary) to style a fullscreen link in the top right of the galleria stage:
#fs {
position: relative;
top: 30px;
right: 20px;
text-align: right;
color: #ccc;
font: italic 11px/1 arial,sans-serif;
z-index: 2;
}
#fs a:hover,a.fs:active {color:#fff; background: none;}

2. Add this to your page before you call the galleria to add a "fullscreen" link in the top right of the galleria stage:

[div id="fs"][a id="fullscreen"]fullscreen[/a][/div]

3. Add this to your galleria.ready function to enable fullscreen toggle:

$('#fullscreen').click(function() {
gallery.toggleFullscreen(); // toggles the fullscreen

4. so your full galleria script will look like:

[script type="text/javascript"]
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.configure({
});
Galleria.run('#galleria');
Galleria.ready(function() {
var gallery = this; // galleria is ready and the gallery is assigned
$('#fullscreen').click(function() {
gallery.toggleFullscreen(); // toggles the fullscreen
});
});
[/script]

crit?: 0