jAlbum

jAlbum skins, tools and tutorials collected here. jAlbum skins are extensions to the popular web album creator, jAlbum. I’ve made 8 of them, and I’m proud they are used by millions of albums around the web.

Turtle skin was made to fill in the browser window, therefore the user experience is often degraded when you try to stuff the album into a small window on another web page. With a little providence though, you can make Turtle albums usable, even embedded.

Version 3.2.3 November 19, 2014

Fixed

Turtle 5 comes with dozens of new features, like the improved shopping experience with bulk ordering and coupon codes, or the new feedback tool, still many of them is behind the scenes, like the substantially reworked touch event handling, which brings a much smoother mobile experience.

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)

Yesusing hash, see below

Yes

Search bots can find individual images

Less probablyand they’ll link to the gallery

Yes

Smooth transitions

Yes

No

Continuous background music

Yesin the same folder

No

Thumbnails stripabove the image

Allthumbnails

Only max. 155 previous – 10 next

Maximum number of images in a folder

< 600to avoid memory leak in poorly written browsers

~ 1000-2000the 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

Noin most browsers it falls back to windowed mode with every page change

Image-sensitive jAlbum widgets

PartialCommenting widget works, the others ignore it

Yes

Traffic browsing through an album

~ 120 kBper image

~ 180 kBper image

Server requests

the least possible

cca. 10x the amount as in dynamic mode

Page load time

Only index pageimages 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.

Skin version: 3.4.6

Turtle skin has such an extensive feature set – I guess even the most experienced of you can find something new. To get into Turtle skin settings either click the little skin icon next to the skin chooser in jAlbum or press F4.

Site

Show top navigation

Select to display a multi-level, site-wide top navigation menu at the top of the index page.

Exclude folders

You can exclude the folders and display only the custom pages.

Logo

Include a logo at the top left corner of the navigation bar, linked to the top level album page. The max size is 180x40px. Suggested format: 8bit transparent PNG.

Link from the top level page

Adds a link which takes you one level up from the top level page. You can use any absolute or relative URL, not just the one level up (../).

Use breadcrumb path

Breadcrumb path is the clickable path of upper-level folders.

Use search box

Add an album-wide search box to your albums. Can search in the Title, Comment, Keywords and Face tag fields.

Skip thumbnail page

Visitors will taken straight to the first image in the album. However if there are sub-albums, you can’t skip the thumbnail page.

Offer download for…

Nothing = to turn off this feature

Scaled-down images = allow visitors to download the screen resolution images in the current folder packed as ZIP file

Originals = allow visitors to download the original images as ZIP file, even if you did not include them normally in the album

The whole album = visitors can download the whole album packed as ZIP file

Please note, albums using extended (accented) characters in file or folder names cannot be properly unzipped on Windows, because Windows decodes these characters mapping to the viewer PC’s default character set, while Java encodes always with UTF-8 encoding (which is capable of representing any character in any language). The files can be restored properly on every other OS though.

Turtle skin received quite a few new features recently, still I think it’s not too hard to pinpoint which will be the most popular: Facebook commenting. Yes, even though you can create sophisticated albums with jAlbum & Turtle, Facebook is the place your friends, family or clients (you name it) hang around. With this new tool your friends not only get notified of your fine new album, but they can comment on it instantly, and you’ll get notified of their comments right off. They can also choose to share their comments on their Facebook wall. This will make it possible to reach 100’s of people in no time. This little tutorial will show you how to add Facebook commenting to your albums.

Every album is different. Why should you use the same typeface for all? With version 3.3.0 came the improved font stacks to Turtle, and with 3.3.1 you can even choose a unique headline font for page titles. I will explain how these fonts work in your albums.

Web browsers for long time could only use the fonts found on the visitor’s PC. Therefore web designers were limited to some 10 fonts that were common on the different OS’s – you possibly seen them zillion times – like Arial, Verdana, Times, and such. Then came CSS3 with its custom font import possibilities. CSS3 is unfortunately not supported by all browsers on the market today – guess which – IE7 and 8. They require their own special font format. There is a solution exists to fix these bad guys, but I did not want to bother with supporting old browsers, and adding heavy javascript libraries to Turtle. In these browsers the headline fonts will simply fall back to the default base font.

Building panoramic galleries is not fully supported by most of the web album tools today. You need to have some panning tool to be able to conveniently handle these extreme-wide photos. In Turtle 3.2.0 I have introduced some new techniques to support this.

The swipe control has been extended to let users pan panoramic images horizontally and trigger the switch for next (previous) photo only when the right edge gets below the 90% of the window width. The left and right arrows on the keyboard can also be used to pan left and right until you reach the far end, when it falls back to the original previous (next) picture functionality. But a working example is worth a thousand words according to the ancient Chinese wisdom. Click the image below to test it “in vivo”.

Use the Left and Right arrow buttons to pan through, or move the image with the mouse, or simply swipe left and right on touch devices.