I’m working now a couple of weeks on a new slideshow options, which is based on pure Javascript, so it’s possible to view them as well on a iPad/iPhone and other mobile devices. I estimated that it will take just a couple of hours, but I ran into various challenges. I would like to share some of my problems :
First of all I looked for all the great jQuery Plugins on the market, here you find IMHO the best ones. I thought that I just need to grab one of these slideshow plugins and add this to my code, but I came across a couple of problems to replace the existing flash solution. A flash slideshow solves three issues :
- Any theme related style sheet didn’t affected the flash layout
- It load images step by step
- It can resize mixed image formats ( portrait / landscape )
NextGEN Gallery is a plugin which should nearly handle all kind of themes / layout / formats, if you look into the samples above you find a lot of great designed slideshow, but they will not fit to every theme layout. So I need to pickup a solution which requires a minimum of styling, the rest should be pat of the theme author.
Another point : The most jQuery Slideshow plugins are not designed for loading speed, they parse a hidden div/ul list which contain the images. This is ok for 5-10 images, but not for a gallery which can contain 100+ images. A page load will blow up. So I need to add a AJAX based loading for the images. I study a couple of plugins and decided to use jQuery Cycle, it contains a lot of functions and can handle a AJAX loading of images.
In the second step I’m looking for a reliable solution to resize a image to the wanted size and keep the ratio, also jQuery Cycle has here some problems. WordPress.com introduce a slideshow feature and while I study the solution I recognize that they resize the images on server side, no need to handle this later in the script code. Very good for bandwidth, but I need to cache resized images in this case , otherwise your web hoster and your server cpu usage will blow up.
Currently I load the full images step by step and setup then the wanted container height, I’m still working on a solution to center images. You can watch a first result here :
http://nextgen-gallery.com/playground/jquery-cycle/
Any hints / comments for a better solution are welcome