Dynamic vs. Separate slides mode in Turtle skin

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“:

settings_panel
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
dynamic_mode vs. traditional_mode

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.

 

Laza

Sign in to post
Add your comment
Post comment
Laca Molnar

Laca Molnar 4 years ago

You probably need to supply Turtle with the exact upload path (Settings / Turtle / Advanced / Upload path = http://mysite.com/path/to/album/) otherwise Facebook cannot find the path to the thumbnail, because it handles only absolute paths, but not relative paths. By the way, after you have uploaded the album at least once, Turtle can shiff out the URL, so possibly a Make + Upload is enough.

jurerejc

jurerejc 4 years ago

Hi, I am not 100 % if we are talking about my problem with Turtle skin when the album is shared on the Facebook. When the album is copied on my server I go to the uploaded page and use share to Facebook. But no thumbnail image is attached to the shared post. Am I missing something or this function is not implemented? By my opinion sharing without an image is not a sharing at all. Because an image can tell a hundered words....Thank you for the answer!

AndreWolff

AndreWolff 4 years ago

Well on my Facebook page you can see that it works!

Laca Molnar

Laca Molnar 4 years ago

Sorry, no thumbnail appears. That's what I was talking about. I removed this option because sharing a photo with no thumbnail is pointless in my opinion.

AndreWolff

AndreWolff 4 years ago

Yes, Laca, it works. You can try it out with the Slide Show 4 example album. In my implementation, the slide picture is used as thumbnail on the Facebook page.

Laca Molnar

Laca Molnar 4 years ago

Hi Wolff, are you sure it works? I can put it back, but as I experienced none of the Facebook functions work with dynamic content. Maybe the Share is the only exception? Anyway, Facebook will not accept sending the thumbnail image during sharing instead it will pick the one added in the header section as a meta tag, which makes it kind of useless sharing an image with another thumbnail.

AndreWolff

AndreWolff 4 years ago

In your table with the differences between a dynamic album and an album with separated slide pages, you claim that you can't share individual images in a dynamic album. That might be true for the Turtle skin, but not for all dynamic albums. The Slide Show 4 skin which creates also a dynamic album, shows Facebook Share buttons, which can be hidden by the viewer, above each slide and enables the viewer to make a link in Facebook to each individual slide.

Tim Anderson

Tim Anderson 4 years ago

Thanks so much for this article. With the "Make slide pages" option, I am able to generate a sitemap and also allow people to link directly to specific images. Fantastic!

Laca Molnar

Laca Molnar 4 years ago

Hi, if the images open in blank pages that means either the Javascript is turned off or you have a Javascript error, which blocks running the scripts. Please report bugs in Turtle forum - I don't get notified of messages landed here. http://jalbum.net/forum/forum.jspa?forumID=61

zormsk

zormsk 4 years ago

I'm having problems getting the Turtle skin to run the slideshow after exporting to my website.
I can click on a thumbnail on the index page and it will enlarge on a new blank page, but that looks cheesy, I need the slideshow to do this automatically. The slideshow function worked fine while I was making the album, but once I published it, any links created by Jalbum for me to share won't let it work.
Is there something I'm overlooking?