Copyleft Games

Open photos in overlay

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.

Task tags

  • xmpp
  • javascript
  • chat
  • css
  • html5

Students who completed this task


Task type

  • code Code
  • web Design
  • assessment Outreach / Research
  • done_all Quality Assurance