Update a javascript displaying a framed artwork

Job ID: 37442415

Budget: $30 – $250 USD

Project Summary:
The Client seeks to update the frame selection feature on their current artwork display page. This includes the integration of new frame images, updating the script to embed JSON data, and enhancing UI interactivity with mouseover descriptions.
https://en.artsdot.com/ADC/Art.nsf/Buy-OilPainting?Open&RA=8XYC2C

Artwork and Frame Data Integration
The Developer will receive an Excel list containing 30 new artworks and related metadata.
The Developer will be provided with images for 30 new frames, including separate images for the corners and bars which must be assembled to create a full frame representation (FRM-L-<CODEHERE>.jpg).
The Developer will also receive images for 30 new frame thumbnails to be displayed in a scrollable list on the artwork page (FRM-S-<CODEHERE>.jpg).

JavaScript and JSON Update
The Developer will download the current dynframe.js script and associated JSON files from the Client’s website. https://en.artsdot.com/ADC/Art.nsf/Buy-OilPainting?Open&RA=8XYC2C
The Developer will integrate the JSON data into the dynframe.js script as constants, eliminating external JSON file loading.
Note : All images must be at the same path as the JS and the HTML

Shadow Effect Implementation
The Developer will update the website's styling to apply an inner inset shadow to artwork images when a frame is selected.
If no frame is selected, a standard shadow will be applied to the artwork images.

Mouseover Enhancement for Frame Selection
The Developer will implement an interactive feature where hovering over a frame thumbnail in the scrollable list will display the frame's description as provided in the Excel sheet.

Testing and Quality Assurance
The Developer will conduct thorough testing to ensure that all new features work correctly across various browsers and devices.
Any bugs or issues identified during testing will be resolved before the final deployment.

Delivery and Deployment
The completed dynframe.js script and all new frame images will be delivered to the Client.
The Developer will assist in the deployment of the updated script and images on the Client’s live website.

Deliverables:
Updated dynframe.js script with embedded JSON data.
30 assembled full-frame images.
30 frame thumbnail images.
Documentation inside the code detailing any changes made to the script and instructions for future updates.

Timeline:
Delay is 2 weeks
Related categories: JavaScript CSS HTML5 HTML jQuery / Prototype