Javascript Image Slideshow
Please see the attached image before bidding. Please note that there is a large image in the center of the page, and to the right of the image is a block of text.
Also note that at the bottom of the page, there are 4 smaller images. We will call these images A, B, C, and D.
Here is what we need to do: Each small image (A, B, C, and D) will have 3 LARGE images associated with it (A1, A2, A3, B1, B2, B3, etc…), and a block of text associated with each large image (The block of text that you see to the right of the large image in the attached file).
On initial page load, the large picture will rotate in a fade-in/fade-out fashion in the following order: A1, B1, C1, D1, A2, B2, C2, D2, A3, B3, C3, D3, A4, B4, C4, D4, A1, B1, etc….When the large picture changes, so will the block of text to the right of it.
Now, if the user mouses over one of the four images along the bottom of the page, the slideshow will change. For example, if the user mouses over image C, then the slideshow will begin to rotate C1, C2, C3, C1, C2, C3, etc… When the user mouses out, the slideshow will go back to normal rotation, from where it left off (IE, if the user mouses out when the slideshow is on C3, then the slideshow will resume with D1, D2, D3, A1, A2, etc…)
It is important that the transitions on mouseovers are done smoothly and that the slideshow effect includes a fade-in/out pattern.
I need this done TODAY. If you are not able to do it today, please do not bid. We also need the PSD sliced and coded, so please include that in your bid (Needs to be XHTML/CSS and tableless coding)
If you have any questions, please get back to me ASAP.