Dealing with digital photo albums on the web you’ll see two basically different models. The “traditional” – one image per HTML page – and the “dynamic”, which changes the images on the same HTML page upon user interaction, utilizing Javascript. Sounds like a subtle technical detail but it has far reaching consequences. Although this applies to any skin, I will talk specifically about the Turtle skin now, which has been enabled to generate traditional (separate slides) albums since version 4, just a few weeks ago. I’ve seen a lot of confusion regarding these modes, so I decided to put up this blog post.
Here is the magic switch that decides between these modes in jAlbum, called “Make slide pages“:
Turn it on for the “Separate slide pages” mode – the default is still the dynamic mode.
Comparison
In the traditional – separate slide pages – mode, the HTML page loads all the page components and all the widgets (like Facebook, Google +1, etc.) every time an image is loaded. Every page has a separate URL address, so you can bookmark or share images separately and can use external widgets which rely on the page address, for example Facebook commenting. The downside is inherent in the web technology which doesn’t allow transitions between web pages, nothing can remain from a previous page (like background music), and need to build every page from ground, loading and rendering everything on a page again and again. This is why Turtle skin was originally made dynamic. A dynamic album is capable of making smooth transitions between the images, loading only the necessary components, an rendering a full folder only once.
Dynamic mode |
Separate slides mode |
|
|---|---|---|
 |
vs. |  |
You might ask why did then Turtle introduce the traditional mode at all. It’s because there are several scenarios when the separate slides mode is still beneficial, e.g. achieving better search results, being able to comment images through Facebook separately, using several hundreds of images in the same folder, to name a few. It’s a fundamental change in the structure, every part of the code had to be rewritten to work in both modes. I tried to find the best match between the two modes, still there are tons of differences. See the table below.
| Dynamic mode | Separate slides | |
|---|---|---|
| Number of HTML pages | One per folder | Number of images + 1 |
| URL format | index.html#image.jpg | slides/image.html |
| Can bookmark? (and send) |
Yes using hash, see below |
Yes |
| Search bots can find individual images | Less probably and they’ll link to the gallery |
Yes |
| Smooth transitions | Yes | No |
| Continuous background music | Yes in the same folder |
No |
| Thumbnails strip above the image |
All thumbnails |
Only max. 15 5 previous – 10 next |
| Maximum number of images in a folder | < 600 to avoid memory leak in poorly written browsers |
~ 1000-2000 the number of page elements (thumbnails) is still limited |
| Like, Comment, +1, PinIt, Share complete folders | Yes | Yes |
| Like, Comment, +1, PinIt, Share individual images | No | Yes |
| Tweet, Tumblr, Email individual images | Yes | Yes |
| Google Maps | Yes | Yes |
| Google Maps show all placemarks | Yes | max 15 |
| Can skip index page and auto-start slideshow | Yes | No |
| Can retain full screen mode | Yes | No in most browsers it falls back to windowed mode with every page change |
| Image-sensitive jAlbum widgets | Partial Commenting widget works, the others ignore it |
Yes |
| Traffic browsing through an album | ~ 120 kB per image |
~ 180 kB per image |
| Server requests | the least possible | cca. 10x the amount as in dynamic mode |
| Page load time | Only index page images are loaded as fast as can |
Every image is rendered on a separate html page |
| Google Analytics | Per folder | Per image |
Tracking the actual image in dynamic mode
To be able to follow the actual image the skin is using a technique (using internal links), which adds the image name after the URL the following way: http://somesite.com/album/index.html#thisimage.jpg. This makes it possible to bookmark, share individual images in dynamic albums, and also allows the browser’s back and forward buttons to work within the album. A smart javascript function is monitoring the hash code in the URL, and instructs the album to load the appropriate image upon change. These anchors are not allowed by major social sites, unfortunately. I have no insider info on this matter, but I guess they don’t want to allow dynamic pages to be shared, because they afraid of manipulation. They can’t check out the contents upfront. Think of sharing a funny cat video to millions then showing offending content after a while. They are trying to maintain “link quality” on their sites, and I agree this is a necessary precaution.
Conclusion
Both modes have its ups and downs – which is better boils down to what you are using the album. If you want to showcase a small number of images in a smooth (even full screen) presentation with optional background music then go for the Single page mode. If the possibility to individually Like or Comment images is paramount, would like to showcase a huge number of images in the same folder, or prefer to have individual search results for the photos the separate slide pages mode might fit you better.