Custom HTML5 Slideshow

Our company builds gallery websites for professional photographers. Currently our home pages and gallery pages include Flash slideshows, but we want to get rid of those in favor of a custom-programmed HTML5 slideshow that will work consistently on all browsers and devices (iPad, iPhone, etc). This should be a custom programmed lightweight slideshow - not an out-of-the-box bloated application. The priorities for the slideshow are: lightweight and fast loading, clean and simple design without all the extra features that most packaged slideshows include, and smooth and glitch-free functioning on all devices. Here is a list of the specific features that will be necessary for the slideshow: • Variable inputs: each slideshow instance can be inserted into a PHP page with the following settings determined by input variables: - array of photo .jpg filenames to display, for example "[login to view URL], [login to view URL], [login to view URL], [login to view URL]" etc. - associated array of (or multi dimension array including) URL links and keywords for each photo (each photo can be clicked to go to that photo's page on the website). - path to those image files, for example "[login to view URL]" - maximum height and width pixel dimensions of the slideshow - alignment of photos (centered, or left justified) - delay in seconds between slides - option to display images in order, or randomly • Photos must load in one at a time. The first image should load and display immediately, the second image will display once it loads in, etc. The remaining photos load in the background while the slideshow continues to run. In other words, we don't want the slideshow to have to load all the images before displaying. • Slideshow repeats after it has looped through all the photos. • Images that are larger than the maximum slideshow dimensions will scale down proportionally to fit inside. • We don't need or want any visible navigation or information inputs (arrow buttons, thumbnails, etc). However, we would like to have keypress navigation (forward, back, pause). • Clicking on a photo takes you to that photo's page on the website. • Photos fade smoothly from one to the next. We don't want any fancy animations, just a simple, smooth fade. The previous image should fade out while the next one fades in - so that photos that are different dimensions while still fade smoothly when they don't overlap perfectly. No blinking on/off of photos. • Ideally, the images should have a class tag ( <img class="imgLarge"> ) that can be used with CSS to give them customized borders and drop shadows. The borders and drop shadows should also fade smoothly with the photos (this is important when the photos are different dimensions, like a vertical image fading to a horizontal image). If the photos are scaled down to fit into the slideshow, the borders and drop shadows must remain consistent and non-scaled, in other words, the borders and drop shadows must always remain the same size, even when the image itself has been scaled down. • Slideshow background should be transparent. • Slideshow must work consistently on all major browsers and on all major platforms including portable devices.