diff --git a/assets/touchTouch/arrows.png b/assets/touchTouch/arrows.png index 73fc67f..fad21a3 100644 Binary files a/assets/touchTouch/arrows.png and b/assets/touchTouch/arrows.png differ diff --git a/assets/touchTouch/touchTouch.css b/assets/touchTouch/touchTouch.css index 314919e..efe4cda 100644 --- a/assets/touchTouch/touchTouch.css +++ b/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; +} diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index 16498e6..1c07c50 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -15,6 +15,7 @@ slider = $('
'), prevArrow = $(''), nextArrow = $(''), + closeButton = $(''), // 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. diff --git a/index.html b/index.html index 1e73798..ba44995 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,10 @@ + + + +