Which jAlbum skin?

Mar 9, 2021

—

While jAlbum comes with 8 preinstalled skins, you can find dozens more in our skins section. As shown on the chart below, most users simply stick with the default skin, or whatever the default was when they first installed jAlbum. Turtle still holds second place, even though we retired it years ago and released Tiger to replace it. And then there’s Chameleon, which was deprecated over 10 years ago – an eon in web design – but still sits peculiarly in 4th place. With this blog post, we’d like to encourage you to try out other skins.

What’s wrong with old skins?

I know it’s a pain changing the skin when you are building a large gallery and want to add new albums now and then. It looks odd when the older albums use a different skin. However, times are changing, new devices appear with different screens and different capabilities, there are new standards, new browsers emerge, and those old albums become almost unusable on these new devices. The single most important change of the past decade in web design is the rapid spread of mobile devices. Today more than 50 percent of site visitors use a mobile device. These not only have smaller screens but also don’t have a pointing device (i.e., a mouse), which might render old albums a pain to navigate. That’s why all new skins are based on responsive web design, which allows the album to adapt to the visitor’s device. This is what sets Turtle apart from Tiger, for example.

Using a modern skin is not only important for the visitors’ sake, but Google and other search engines give a higher rank to web pages that embrace modern standards.

Historically, there were also some Flash-based skins in our skin repository, like the once-popular Fotoplayer skin. But Flash no longer works in any current browser, so we’ve removed all the Flash skins.

Naturally, if you don’t care about mobile visitors, there’s nothing wrong with old skins. But even on desktops and laptops, you might have problems with integrations. PayPal, Google Maps, and Facebook might no longer work; these external services retire their old interfaces (APIs) regularly. This happened with Google Maps in 2017, for example, and with Facebook sharing after the 2016 US election.

Desktop

Mobile

Once a skin gets to the point where its underlying technology gets hopelessly dated, we can choose from rewriting the skin from the ground up or creating a new skin that mimics the old one. Tiger inherited most of the features, styles, and layout from Turtle. Development of the hugely popular Chameleon skin was halted a decade ago with no descendant. I know this disappointed quite a few users. The good news is that we are planning on renewing Chameleon this year.

Which skin is good for me?

It boils down to what type of content you usually create. For complex, multi-level albums it’s wise to choose a robust skin with strong navigation support and search. For single events, it might be better to choose a lightbox-first skin that’s built around the slideshow, although not as useful for navigating deeper folder structures.

If you’re after the simplest presentation, and the extra features are not as important, you can choose a “minimalistic skin”, like Minimal or Atom. Although they look similar, Atom features a fully responsive layout and has more options. These skins are also the easiest to tweak, or to use as a base for creating a new skin.

Minimal vs. Atom

In the middle ground stands the Projector skin. It appears in the second table here because it’s a “lightbox first” skin, but it uses a database, which allows functions like Search and Tag Cloud to work. So, it also works well for large albums.

Index page first skins

	Fancybox	Mars	Tiger	Photoblogger	Pluto	Story
Sample album
Created	2018	2019	2017	2014	2018	2020
Styles	7	15	26	12	11	10
Deep navigation menu	✓		✓	✓		✓
Search within album			✓	✓		✓
Tag cloud (keywords)			✓	✓		✓
Thumbnail layout	Masonry	Grid, Masonry	Grid	Vertical, Grid, Masonry	Grid, Masonry	Masonry (alternating size)
Background music	✓		✓	✓		✓
Fullscreen mode	✓	✓	✓	✓	✓	✓
Slideshow	✓		✓	✓	✓	✓
Theme image support	✓	✓	✓	✓	✓	✓
Displays “New” tag			✓	✓	✓	✓
Custom web pages	✓		✓	✓		✓
Web locations	✓	✓	✓	✓	✓	✓
Plays video files	✓	✓	✓	✓	✓	✓
Audio files	✓		✓	✓		✓
Other file types (e.g. PDF)	✓		✓	✓		✓
Animated GIFs		✓			✓	✓
Swipe support	✓	✓	✓	✓	✓	✓
Displays map	✓		✓	✓		✓
Panorama support	✓		✓	✓		✓
360° panorama	✓		✓	✓		✓
Displays metadata	✓		✓	✓		✓
Face tags			✓	✓		✓
Shopping cart			✓	✓		✓
Feedback / Kiosk			✓	✓		✓
Social sharing	✓		✓	✓		✓

Lightbox-first skins

Special skins

Responsive is the only one that can create a whole album inside a web page on the fly by using Javascript. This is useful when you’d like to display a handful of pictures on an already-made web page.

Mercury is special because it can display lengthy text around images, not just below.

Story is the first skin capable of playing with thumbnail sizes (thumbnail/wide/full), to create an intriguing blog-like experience. This skin was also the first that allows embedding custom pages (or any custom content) into the index page, which strengthens the blog-like experience even further.

Zigzag is another example of an unusual layout. It alternates the left/right positions of the pictures and their captions.

Embedding albums into other pages

Unfortunately, on mobile devices, you can easily end up with an unusable album using the traditional “IFRAME” method. As the IFRAME element has to have a fixed pixel size, the album area often stretches beyond smaller screens, effectively making it impossible to scroll through the page or reach navigation elements. The “responsive embed code” – utilized by a few skins – still can only match the screen width. This way, the album still can stretch beyond the screen when the mobile is held horizontally.

The only user-friendly way is to run the album in its tab or window, i.e., linking to the album from your site instead of embedding it. I know this way your site’s menu or header is not included, but it’s still better than showing a broken page. Our skins are usually easy to tweak to match your site’s theme, and many provide ways to include custom elements (e.g. header, footer) in the album.

The other possibility for WordPress users is to use our jAlbum bridge plugin, which pulls images from an uploaded album and displays them in a “projector” box within the post.

Finally, the Responsive skin – mentioned above – is also capable of creating a little album inside another web page by utilizing only Javascript. This skin generates a call code you have to insert in your page.

General advice using skins

If you’d like to experiment with different skins don’t do this on your production project! The skin settings usually do not survive switching back and forth between skins. Create a small sample album, and experiment on that. You can also create a duplicate of a project by choosing File → Duplicate project.

Before you run a skin update make sure to save the current project. It is rare for jAlbum to lose the settings during a skin update, but you might end up with zeroed settings (first option, false, empty, black color). If this happens, do not save the project! Simply close the project without saving it, then reopen it. You might lose the latest changes, but at least not all. It is safest to install a skin update without an open project.

To discover more skins follow this link to our Skins section. jAlbum’s skin chooser box also has a link at the bottom of the list; read “Download more skins…”, where you can find skins by features too.