No close button on the overlay

[dashnak]

Just thinking that the overlay should probably contain something to hide it the same way touching the background does. Given that the first impulse of a user is to press the "back" button, kicking him out of the gallery. It could actually be seen as a usability issue. Anyway, just my 2 cents, thanks for your work.

[ghost]

Wanted to also comment on this. If the image takes up the entire screen or leaves very small area of the overlay to click you can't close the gallery.

A close button or maybe clicking the image itself would close the gallery is needed.

[DJWassink]

I was also looking for a solution for this. But I couldn't find one so I made something myself you can find it in the comments of the touchTouch article.

http://tutorialzine.com/2012/04/mobile-touch-gallery/#comment-41494

I am pretty new to js/jquery so maybe its a bit sloppy but it works like a charm.

[starkraving]

I made a fork of this project with a new config option.

$('#thumbnails a').touchTouch({imgCloser: true});

This will add a close button to the top-right corner of each image.

Hope this helps other people. If it's worthwhile I'm happy for the changes to be folded back into the original project here :)

Mike
www.handzon.com

[starkraving]

Oops, I should mention the Git project:

https://github.com/starkraving/touchTouch

Mike
www.handzon.com

[ssnaikr]

Hey starkraving I wanted to use your close button. I updated my code and css to the one you modified. But nothing is showing. Since I dont have any close icons Im guessing I have to add the path of the closing button to the touchtouch.js file or does it go somewhere in the css file?
All i did was download the new css and js files. Is there also something that needs to be added to the script file so it knows I want to use the close button?

[starkraving]

Hey there, my code adds an optional config to the touchTouch call. To use:
$('#gallery a').touchTouch({imgCloser:true});

The option imgCloser defaults to false so that it appears the same as the original. Just add the options object with the value of imgCloser set to true to enable the close buttons. The close button is pure CSS, no image needed.

HTH!

Mike
www.handzon.com

[mikerogne]

@starkraving I just used your code instead. There needs to be a pull request to get this integrated into main codebase... that is, after the CSS for mobile is fixed. It's too far off the screen.