Project Description:
We made flash project, now we would like to convert to javascript
When someone buy a painting, he can buy also a frame : http://wahooart.com/A55A04/w.nsf/FrameIt?OpenForm&RA=BRUE-7YZN6F and preview background
We want exactly the same thing but in javascript
It is simpliest than art.com , we do not have mat, glass, or cropping, only frame selection and interior selection
We have a list of frames
We have a list of interior photo background
when mouse over on a interior thumbnail, the description should be displayed as popup
when mouse over on frame thumbnail, the description and price should be displayed as popup
the user can change the painting/frame size, he can move it , the handle is displayed around the frame when mouse over
the mouse wheel can zoom the complete image (interior+painting), it is possible to move the complete image when the zoom is in effect by draging it
there is an interiors list array (small and large image, description)
there is an frame list array (small and large image, price, size, height, description)
the painting image will be displayed into the frame (I do not have displayed it below but should be displayed)
When the artwork size and a frame is selected, the Artwork size is displayed in inches and CM and the price of the artwork and the frame will be displayed
The javascript will be inside a DIV and should resize width automaticcaly to fit 100% of the DIV (the div will be from 600px to 1800px width)
The DIV height can be set by the javascript to keep a ratio height/width
When openeing , loading only the default frame and default interior then displaying and loading all others images in background
Possibility to resize the artwork down to 10x10 inchs
When swapping interior image, make a cross fade in/fade out for 1 or 2 seconds if possible
The frame is an image , we provide the X and Y to build CSS3 background CLASS
The price is a formula based on frame selected and painting height width in inch
Currently the flash read XML files : http://wahooart.com/A55A04/w.nsf/FrameIt-Interiors.xml and http://wahooart.com/A55A04/w.nsf/FrameIt-Frames.xml but theses data could be stored in the JS file
The XML data give list of interiors images and list of frames and also coordinates X and Y of starting and ending point
there is parameters inside the HTML sent to JS :
image of the painting
MyFlashSWF.addVariable( "PaintingURL" , "http://wahooart.com/A55A04/w.nsf/OPRA/BRUE-7YZN6F/$File/Hans%20Holbein%20the%20Younger%20-%20Adam%20and%20Eve%20.JPG?Open" );
MyFlashSWF.addVariable( "PaintingWidth" , "250" );
MyFlashSWF.addVariable( "PaintingHeight" , "213" );
name of the default frame to display
MyFlashSWF.addVariable( "defaultFrame" , "Gallery-Wrap" );
name of the default background interior image to display
MyFlashSWF.addVariable( "defaultInterior" , "/A55A04/w.nsf/FrameIt-interior-image000.jpg" );
link when double clicking the painting to buy
MyFlashSWF.addVariable( "buyUrl" , "/A55A04/w.nsf/Buy%3FOpen%26RA=BRUE-7YZN6F%26FromFrameIt%26" );
popup text (@A @B @F @T @C are replaced by numbers)
MyFlashSWF.addVariable( "buyText" , "Double cliquez ici pour acheter cette oeuvre pour @A%2B@F=@T @C" );
this is parameter of the currency (From USD to "EUR" )
MyFlashSWF.addVariable( "CoefCurrency" , "0.69939" );
MyFlashSWF.addVariable( "CURRENCY" , "EUR" );
This is parameters inside the JS , this is fixed coefficient used to compute the pricing (i will give you the princing formula later)
MyFlashSWF.addVariable( "CP" , "0.65" );
MyFlashSWF.addVariable( "PriceReprC" , "11" );
MyFlashSWF.addVariable( "PriceReprB" , "95" );
