Improved gallery and competition result

Introduction to my new gallery script. Also: Mario5 wins the CodeProject competition in both fields.

The CodeProject competition for June 2012 is over and therefore it is now official: Thanks to your votes I was able to win the overall competition for the first time. The Mario5 article looks now über-cool having those two badges:

Mario Competition

The next (and last) article of the Mario5 game is still on its way. I will probably release it on the 1st of August.

I made some changes to my homepage. The first (and probably easiest to recognize) change is in the one-page behavior of the website. Instead of a dimmed transition I am now using a fogged one. This might seem useless, but since I also changed the position (from fullscreen to content only), the transition looks now much smoother and requires less CPU power. All in all the browsing experience should be improved by that.

The next and more complicated changes have been made in the gallery script. Two former gallery had a code which executed the following statements:

  1. Load all images
  2. Show first image and set mode to play
  3. If the user interacts with the gallery by next / back or fullscreen, the mode is set to pause

The user was not able to move to the next (or previous) picture being in fullscreen mode. Also the waiting time for all pictures to be loaded could be quite high (e.g. 10 pictures with about 2 MB each results in 20 MB to be loaded at the beginning). This resulted in too much traffic for cellular phones and a waiting period that seemed to take forever.

Now must of those features have been added. First the obvious (design) changes:

New gallery

Here the improved back / next button (they will now always appear when one expects them) with the improved transition is the most remarkable enhancement. The new top bar with the quick jump links is a useful addition that will pay for itself. The play / pause button has been redesigned to look a little bit more fancy. So what happened under the hood?

Comparison of old and new way

The new script tries always to load the next image. This should give the user a smooth transition. If an image is not ready the script distinguishes between the two states of playing automatically and being in interactive / user mode.

The fullscreen mode has now two buttons (back and next) and is dimmed a bit more. This will reduce distraction for the user. All in all the new smoother loading is a traffic and performance friendly way, which reduces wait time and is more in the way of on-demand-content.

Created .

References

Sharing is caring!