For my current project I need help with developing a Jquery javacsript that can do the following below.
First, some background.
I have a games product catalog that have boxshots (cover image) and optional 0-4 screenshots. From a different system we receive updated images. I am trying to develop a webpage that will allow the user to map/connect new images to existing products.
So we have two kinds of images,
1. Box Shots ,
2. 2 Screenshots
And they should not be mixed.
One product on the left can have (0 or 1) boxshot and (0-4) screenshots.
The system should allow the user to do the following:
1. Drag & Drop screenshots images from the right columns to any product on the left side.
Only dropping on the left side where the number of screenshots for a given product is
less than four..
2. Drag & Drop boxshot images from the right columns to any product on the left side.
(where there are not existing boxshot).
3. When clicking on any of the images on the left or right side, the image should expand
as shown in the attached ExampleImage2.jpg. When clicked again the image should reduce
back to normal size.
After a drag/drop the dropped image should be added to the left column , perhaps with a border around it showing that it is a change/newly dropped image.
When I press a “Save” button a list of “drag&dropped” images can be sent back to the server together with the product-numbers.
No deleting of image can be done in this app to keep it simple. Screenshot Images can also not be replaced, only “added”.
A sample page screenshot is attached with this project. A real HTML page with sample images will be provided to the winner.
Your task is the following:
1. Develop the jquery script necessary to handle the drag/drop + image zoom. (perhaps using some Jquery plugin.). When doing the drag/drop the image should not zoom.
2. Add a “Save” Button to the image and create a script that when I press the save button it should send a list of dragged/dropped images back to the server for processing.
The Server side part I will handle myself.