Challenge Overview
Welcome to $300 Hercules New MyMedia Reskinning UI Prototype - Asset Information & Slideshow Modal (HTML/CSS/JS)
In this F2F, we need your help update existing prototype based on new storyboard design.
There are some detail things need captured. Read more details information below.
Final Submission Guidelines
IMPORTANT
This F2F is subjective - so the first solution that the client likes and fulfills the required updates will win. We will consider all submissions until a the winner is declared.
Attachment Files
storyboard-reskinning.zip.zip - New Storyboard Design
my-media-prototype-v2.zip - UI Prototype as base updates
Web Browsers Requirements
- IE10
- Firefox latest version
- Safari latest version
- Chrome latest version
Code Requirements:
- HTML
- CSS
- Javascript
F2F Tasks
For this F2F you just need submit required task explained below:
1. Asset Information
Screenshot: 06b_Asset-Info-(Update-metadata).png
Page to update: ForYou.html
- Click the “i” button on thumbnails bar should load the modal window
- Make sure click all “i” button on every thumbnails will bring up the modal window
Left side
- Photo information displayed in the left side of modal
- Click title name will show pencil icon to let user edit the title (06b_Asset-Info-(Update-metadata).png)
- Create inline editable function for title
- Tags & Shared with line should can removed when click “x” button and remove related tag
- Match information for each photo information
- Show hover state for buttons in the bottom. (06b_Asset-Info-(Update-metadata).png)
Right side
- “X” button should close the modal
- Photo and slideshow function in the right side
- User should can navigate previous and next slide
- Play button will auto play the slideshow.
- When slideshow being auto play, play button should updated into pause button
- You can re-use existing slideshow functions or suggest new one that support new requirements
- Make sure slideshow works on every required browsers
2. Full Size Image Slideshow
Screenshot: 06c_Asset-Info-(Fullscreen).png
Page to update: ForYou.html
- Click the “play” button on thumbnails bar should load the full size slideshow in modal window
- Create some slideshow sample to make sure slideshow works.
- User should can navigate previous and next slide
- Play button will auto play the slideshow.
- When slideshow being auto play, play button should updated into pause button
- “X” button should close the modal
- You can re-use existing slideshow functions or suggest new one that support new requirements
- Make sure slideshow works on every required browsers
F2F GUIDELINES
We will review submissions as they are submitted
We will review ALL submissions until we declare a winner based on
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted
Let us know if you have any questions.
Thank you