Add optional close button; minor cleanups

assets/touchTouch/touchTouch.css

@@ -106,7 +106,7 @@
 
 /* Arrows */
 
-#prevArrow,#nextArrow{
+#prevArrow,#nextArrow,#closeButton{
 	border:none;
 	text-decoration:none;
 	background:url('arrows.png') no-repeat;
@@ -124,7 +124,7 @@
 	transition:opacity 0.2s ease;
 }
 
-#prevArrow:hover, #nextArrow:hover{
+#prevArrow:hover, #nextArrow:hover, #closeButton:hover{
 	opacity:1;
 }
 
@@ -137,3 +137,12 @@
 	background-position:right top;
 	right:40px;
 }
+
+/* Enable the close button by overriding #closeButton{top:NNNpx;} in your css. Try
+ * 100px as a first guess if you're not sure where to position the close button.
+ */
+#closeButton{
+	background-position:-43px 0px;
+	top:-1000px;
+	right:43px;
+}

assets/touchTouch/touchTouch.jquery.js

@@ -15,6 +15,7 @@
 		slider = $('<div id="gallerySlider">'),
 		prevArrow = $('<a id="prevArrow"></a>'),
 		nextArrow = $('<a id="nextArrow"></a>'),
+		closeButton = $('<a id="closeButton"></a>'), // optional, enable in CSS.
 		overlayVisible = false;
 
 
@@ -120,9 +121,9 @@
 				//Filter to check if item has an ancestory with data-gallery attribute
 				items = items.filter(function(){
 
-           			return $(this).parent().closest('[data-gallery]').length;
+					return $(this).parent().closest('[data-gallery]').length;
 
-           		});
+				});
 
 			}
 
@@ -154,6 +155,12 @@
 				e.preventDefault();
 				showNext();
 			});
+
+			overlay.append(closeButton);
+			closeButton.click(function(e){
+				e.preventDefault();
+				hideOverlay();
+			});
 		}
 
 		// Listen for arrow keys
@@ -196,6 +203,7 @@
 
 			// Raise the visible flag
 			overlayVisible = true;
+			return true;
 		}
 
 		function hideOverlay(){
@@ -214,6 +222,7 @@
 
 			//Reset possibly filtered items
 			items = allitems;
+			return true;
 		}
 
 		function offsetSlider(index){
@@ -242,6 +251,7 @@
 			loadImage(items.eq(index).attr('href'), function(){
 				placeholders.eq(index).html(this);
 			});
+			return true;
 		}
 
 		// Load the image and execute a callback function.

index.html

@@ -11,6 +11,10 @@
         <link rel="stylesheet" href="assets/css/styles.css" />
         <link rel="stylesheet" href="assets/touchTouch/touchTouch.css" />
 
+        <!-- Uncomment the next line to enable a close button, or add this to -->
+        <!-- a style sheet that you include after including touchTouch.css -->
+        <!-- <style>#closeButton {top:100px;}</style> -->
+
         <!-- Google Fonts -->
         <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dancing+Script" />