Is there a way to make a full-screen photo gallery in D7? i.e., click a button, the photo gallery takes up the entire screen, click ESC to exit full-screen mode.

Comments

kroimon’s picture

Such a feature is included in Galleria, but there currently is no easy way to use it via the D7 module.

But you can accomplish it by editing your Galleria theme. My example assumes you use and edit the "classic" theme:

Open the galleria/themes/classic/galleria.classic.js file and find these lines (it's the last code block of the init function):

        this.bind('loadfinish', function(e) {
            this.$('loader').fadeOut(200);
        });

Now, add the following right after that block:

		this.bind('image', function(e) {
			var g = this;
			$(e.imageTarget).css({
				cursor: 'pointer'
			}).bind('mouseup', function() {
				g.toggleFullscreen();
			});
		});

You can now toggle between fullscreen and normal mode by clicking on the image.

Mark_L6n’s picture

Awesome! Thanks for the quick and excellent response!

kroimon’s picture

Status: Active » Fixed

You're welcome ;-)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

klavs’s picture

Version: 7.x-1.x-dev » 7.x-1.0-beta3

I was ripping my hair out here.. I've added that js snippet to my theme's js file - and it doesn't work for me :(

until I found out, that it's the galleria.classic.min.js it was loading.. so that's the one that need to be changed (or replaced by the none minified version :)

astutonet’s picture

Status: Closed (fixed) » Active

I'm testing this module. Their resources are very good and it is an excellent solution.

The only difficulty I'm finding is for a display in full screen mode. There is not much information about it and a small tutorial would be appreciated, since the module still does not support this natively (I think the full screen display is the main attraction of this type of module).

In addition to the information in #1, someone can tell what changes were necessary or if there is currently another way to do this??

Regards.

astutonet’s picture

Status: Active » Closed (fixed)

My solution:

Rename the file galleria.classic.min.js to galleria.classic.min.txt.

Edit the file galleria.classic.js and add the new features in #1

Clear the cache

Ready!