Add support for full-screen on gecko and webkit.

web/css/000-controls.css

@@ -77,6 +77,17 @@ a:hover {
 #next {
 	right: 0.1em;
 }
+#fullscreen {
+	display: none;
+	position: absolute;
+	opacity: 0.50;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	filter: alpha(opacity=50);
+	margin-top: -0.25em;
+	margin-left: -1em;
+	font-size: 2em;
+	cursor: pointer;
+}
 #photo {
 	border: 0;
 	left: 0;

web/index.html

@@ -24,6 +24,7 @@
 	
 	<a id="back">&lsaquo;</a>
 	<a id="next">&rsaquo;</a>
+	<a id="fullscreen">&#x2922;</a>
 </div>
 <div id="album-view">
 	<div id="thumbs">

web/js/004-fullscreen.js

@@ -0,0 +1,144 @@
+/**
+ * @name		jQuery FullScreen Plugin
+ * @author		Martin Angelov
+ * @version 	1.0
+ * @url			http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
+ * @license		MIT License
+ */
+
+(function($){
+	
+	// Adding a new test to the jQuery support object
+	$.support.fullscreen = supportFullScreen();
+	
+	// Creating the plugin
+	$.fn.fullScreen = function(props){
+		
+		if(!$.support.fullscreen || this.length != 1){
+			
+			// The plugin can be called only
+			// on one element at a time
+			
+			return this;
+		}
+		
+		if(fullScreenStatus()){
+			// if we are already in fullscreen, exit
+			cancelFullScreen();
+			return this;
+		}
+		
+		// You can potentially pas two arguments a color
+		// for the background and a callback function
+		
+		var options = $.extend({
+			'background' : '#111',
+			'callback'	 : function(){}
+		}, props);
+		
+		// This temporary div is the element that is
+		// actually going to be enlarged in full screen
+		
+		var fs = $('<div>',{
+			'css' : {
+				'background' : options.background,
+				'width'		 : '100%',
+				'height'	 : '100%'
+			}
+		});
+
+		var elem = this;
+
+		// You can use the .fullScreen class to
+		// apply styling to your element
+		elem.addClass('fullScreen');
+		
+		// Inserting our element in the temporary
+		// div, after which we zoom it in fullscreen
+		fs.insertBefore(elem);
+		fs.append(elem);
+		requestFullScreen(fs.get(0));
+		
+		fs.click(function(e){
+			if(e.target == this){
+				// If the black bar was clicked
+				cancelFullScreen();
+			}
+		});
+		
+		elem.cancel = function(){
+			cancelFullScreen();
+			return elem;
+		};
+		
+		onFullScreenEvent(function(fullScreen){
+			
+			if(!fullScreen){
+				
+				// We have exited full screen.
+				// Remove the class and destroy
+				// the temporary div
+				
+				elem.removeClass('fullScreen').insertBefore(fs);
+				fs.remove();
+			}
+			
+			// Calling the user supplied callback
+			options.callback(fullScreen);
+		});
+		
+		return elem;
+	};
+	
+	
+	// These helper functions available only to our plugin scope.
+
+
+	function supportFullScreen(){
+		var doc = document.documentElement;
+		
+		return	('requestFullscreen' in doc) ||
+				('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
+				('webkitRequestFullScreen' in doc);
+	}
+
+	function requestFullScreen(elem){
+
+		if (elem.requestFullscreen) {
+		    elem.requestFullscreen();
+		}
+		else if (elem.mozRequestFullScreen) {
+		    elem.mozRequestFullScreen();
+		}
+		else if (elem.webkitRequestFullScreen) {
+		    elem.webkitRequestFullScreen();
+		}
+	}
+
+	function fullScreenStatus(){
+		return	document.fullscreen ||
+				document.mozFullScreen ||
+				document.webkitIsFullScreen;
+	}
+	
+	function cancelFullScreen(){
+		if (document.exitFullscreen) {
+		    document.exitFullscreen();
+		}
+		else if (document.mozCancelFullScreen) {
+		    document.mozCancelFullScreen();
+		}
+		else if (document.webkitCancelFullScreen) {
+		    document.webkitCancelFullScreen();
+		}
+	}
+
+	function onFullScreenEvent(callback){
+		$(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){
+			// The full screen status is automatically
+			// passed to our callback as an argument.
+			callback(fullScreenStatus());
+		});
+	}
+
+})(jQuery);

web/js/011-display.js

@@ -153,7 +153,7 @@ $(document).ready(function() {
 	}
 	function showPhoto() {
 		var maxSize, width, height, photoSrc, previousPhoto, nextPhoto, nextLink, text;
-		maxSize = 800;
+		maxSize = 1024;
 		width = currentPhoto.size[0];
 		height = currentPhoto.size[1];
 		if (width > height) {
@@ -288,12 +288,19 @@ $(document).ready(function() {
 	$("#photo-box").mouseleave(function() {
 		$("#photo-links").stop().fadeOut("slow");
 	});
-	$("#next, #back").mouseenter(function() {
+	$("#next, #back, #fullscreen").mouseenter(function() {
 		$(this).fadeTo("slow", 1);
 	});
 	$("#next, #back").mouseleave(function() {
 		$(this).fadeTo("slow", 0.35);
 	});
+	if ($.support.fullscreen) {
+		$("#fullscreen").show().click(function() {
+			$("#photo").fullScreen();
+		}).mouseleave(function() {
+			$(this).fadeTo("slow", 0.50);
+		});
+	}
 	$("#metadata-link").click(function() {
 		if (!$("#metadata").is(":visible"))
 			$("#metadata").stop()