Google Code-in

Recent work completed by Google Code-in students greatly improved support for sending photos in our web-based chat, but the UX still needs some work.

Currently, when a user clicks on a thumbnail they leave our site to view the photo on the current browser tab. While it would be trivial to make this open in a separate browser tab, ideally the photo should open as an overlay of the current page with support to zoom, pan, save, and a button to close the photo. The photo should fade-out the surrounding site while viewing the photo.

Detect photo links by elements including photo mime-types. When detected, replace what is currently displayed with a clickable thumbnail and the contents.

Keep changes to css and html limited to javascript in the init function so that this can be more easily deployed on other websites.