Learning by doing

Goodbye Flash ?

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 :

Ahh I spotted that on your site as its just what we need for simple non flash slideshow….. loving NextGen Gallery thanks…. Any idea when this Jquery Cycle version might be ready as if not in next few days I better look at something else as client waiting 😦 eek 🙂

i use prophoto blog theme for my photography blog, and its great because it has a simple gallery creator that is flash on a regular computer but a (javascript?) lightbox gallery when viewed on a iphone.

it works really well.

however my other site uses a theme that doesnt have a slideshow included, so i like to use nextgen.

you might want to check out prophoto blog by netrivet to see how they do it.

There’s a ton of stuff out there. I would look to a plugin that:
1) Comes close to what you have with the jwplayer in functionality
2) Has plenty of support and has had active development over an extended period of time
3) Easily configurable

This is very exciting news! Most of my clients don’t want to use Flash anymore, because mobile devices don’t display it, and it’s tougher to find a flash developer in general. This will truly make NextGen the ultimate gallery plugin for WP.

In the meantime, I’m going to mess around with GalleryView, or implement my own template that uses Coda 2.0 jQuery plugin.

For the first reason, I am not going to even answer. You gotta be joking.

Second. As opposed to what? Loading it ALL in? You can find a perfect jQuery to suit your needs.

Third. Same thing, you can find/build a jquery to suit your needs. a 400×400 image is always a 400×400 image, using a flash to resize or having it done with jQuery/HTML doesnt mean it makes it different.

@Anon
Please read the post again, I think you missed the point.. complete ! I never said that flash is the best solution, I said the existing flash slideshow has the mentioned issues already solved.

“You can find a perfect jQuery to suit your needs.” Really ??? Why do you not contribute this easy piece of code ???

As you can see I create a first solution with the cycle plugin, Please send me a sample where I can center all images, independend which theme I use and where I place the slideshow (sidebar, footer, header) . As you know not many people have the ability to change the CSS… and of course cross browser compatible 🙂

I think the image format problem can be solved quite simply – cycle works on the image container – and anything can be in the container, including text. So if you style the image within the container (for instance using max-width and max-height), or centre it for instance, this should work because the “slide” that cycle works on is the container and not the image itself.

I’m looking forward to seeing the next version – NextGen keeps on getting better !

I’m using the jquery GalleryView plugin. How do I change the size of the transparent strip overlay? I can’t seem to find the code line that controls it. I would like to make it thinner (change the height). I’ve tried changing various numbers in css but none of them seem to affect the transparent overlay.

Also, is it possible to make the thumbnail bar wider? I made my main gallery pics smaller (200×250) because my pics are people portraits, but this causes only 1 1/2 thumbnails appear at the bottom of the main pics. I would like the thumbnail bar to contain at least 3 or 4 pics.

I don’t if that’s still a question, but resizing (filling) of image to container as well as centering it inside (both vertically or horizontally) is feasible with jQuery. Currently my code reads divs, that is if there is no JS, all images are shown. But previously I had a version which read paths and download images in background. Let me know if I can help.