Which jAlbum skin?

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. We’d like to encourage you to try out other skins; hence this blog post.


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 every 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 very popular Fotoplayer skin. But Flash no longer works in any current browser, so we’ve removed all of 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 (API’s) 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 either choose to rewrite the skin from the ground up, or to bring out 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 important, you can choose a “minimalistic skin”, like Minimal or Atom. Athough 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.

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 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
Number of styles 7 15 26 12 11 10
Deep (collapsible) navigation menu    
Search within album      
Tag cloud (keywords)      
Thumbnail layout Masonry Grid, Masonry Grid Vertical, Grid, Masonry Grid, Masonry Masonry
(alternating size)
Background music    
Full screen
Slideshow  
Theme image support
Displays "New" tag    
Custom web pages    
Web locations
Plays video files
Audio files    
Other file types (e.g. PDF)    
Animated GIF's      
Swipe support
Displays map    
Panorama support    
360° panorama    
Displays metadata    
Face tags      
Shopping cart      
Feedback / Kiosk      
Social sharing    
 
 

Lightbox-first skins

  Animatics Comet Lucid Projector
Sample album
Created 2019 2018 2019 2018
Styles 7 1 9 27
Transition effect(s) Ken Burns, Cross-fade,
Zoom, Stack
Cross-fade Slider carousel Zoom, Ken Burns,
Stack, Slide, Swap,
Flip, Book, Cube
Slideshow
Swipe support  
Background music  
Search      
Tag cloud      
Displays metadata  
Displays map
Displays videos  
Social sharing  
Custom pages  

Special skins

 

Responsive is the only one which can create a whole album inside a web page on-the-fly by utilizing Javascript. This is useful when you just want to display a handful of pictures in an already-made web page.

 
 

Mercury is special because it is capable of displaying lengthy text around images, not just below.

 
 

Story is the first skin capable of playing with thumbnail sizes (thumbnail / wide / full), in order to create an intriguing blog-like experience. This skin was also the first that allowed embedding custom pages (or any custom content) into the index page, which strenghtens 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 in other pages

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

The only user-friendly way is to run the album in its own 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 component, 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.

Comments are welcome,
Laza

Sign in to post
Add your comment
Post comment
Laca Molnar

Laca Molnar 13 days ago

@Lucien:
Skin-specific questions are better asked in the skin's forum, it's just a blog post that compares skins.
- Currently, you can't reduce hero height below 50%. This is how this skin was designed. A 20% bar at the top is not a "hero". :)
- I couldn't understand the question regarding "fade-out".
- In Photoblogger the number of folder thumbnails are controlled by Settings / Photoblogger / Main content / Folders / Columns.

LucienWuyts

LucienWuyts 14 days ago

Hi Lica,

For the 90250pictures sorted in 9 folders with 130 subfolders and each subfolder 3 or more sub-sub-folders I've tryed the Photoblogger skin.
Perfect to use. Good result
Q: how can i reduce all folder icon dimentions? The now used dimentions are 50% to much

sincere gratitude
Lucien Wuyts

LucienWuyts

LucienWuyts 14 days ago

Hi Laca, Thank you for the gooid feed beack. I've tryed the zoom option in the Story skin. Very good voor my photo's.
Q: How can I reduce the Max. Hero height to 20%; Now 50% is the lowest setting possible.
Q: How cab I switch of the fade out-fade in of eacgt picturen. This will increase.

sincere gratitude
Lucien Wuyts (Belgium)

Lothar Wiesweg

Lothar Wiesweg 15 days ago

Sorry for my default, dear LACA!

Lothar Wiesweg

Lothar Wiesweg 15 days ago

Thank you, Laza, for your information. I will have to be patient for a while - and wait for new versions. I wish you continued success.

Laca Molnar

Laca Molnar 15 days ago

@Lothar:
WebP format is still not supported universally (on iOS only Big Sur supports it), and also Java, the framework jAlbum is using, still has no WebP saving possibility. We've been experimenting with various 3rd party imaging libraries, still, all have some drawbacks. For the upcoming jAlbum version, however, we will add WebP format and multiple output-size options, and once it's available at jAlbum-level, the skins can utilize it too.
Regarding modern standards, we have to maintain a balance, as they limit the browser support at the same time.

Lothar Wiesweg

Lothar Wiesweg 16 days ago

Hello,
very interesting to read Laza's blogpost. I would like to see some "modern standards" in jAlbum and its newer skins, like automatically converting JPGs into WebP format (css-tag: 'picture' and 'source type') or automatically adapting image sizes to the respective screen sizes - why only one image size (in the slides folder) for smartphones, tablets, laptops, desktops? Is that so difficult to realise in jAlbum?
Any way, many thanks to all developpers.
Lothar Wiesweg

Laca Molnar

Laca Molnar 16 days ago

@LucienWuyts

Have you tried Photoblogger or Story skin with the new "Zoom slider" option? That zooms into the original image (if used = "Settings / Pages / Link to originals via scaled images").

/Laza

LucienWuyts

LucienWuyts 17 days ago

Hello Laza.

I've a website with 90250pictures sorted in 9 folders with 130 subfolders and each subfolder 3 or more sub-sub-folders.
Each picture is a official A4 document presented op an 21" screen Max hight.
But I'm still looking for a techniwue to zoom on each picture so the samm txt and handwritten details could be read. Mignifiying to 200-300 % is a must.
Could you help me to find a technoque to solve this problem. Zoomify is not a solution. Eacht html page must be edited. (90250 html files)

Many thanks
Lucien Wuyts ( Belgium)

Philippe CHARLES

Philippe CHARLES 18 days ago

Hello Laza,
Thanks for this very good overview.
In can confirm the benefit of updating an old skin : I switch from Turtle to Projector ... and I will never go back ;-)!
As mentioned above, Projector is really a right balance of functionalities, giving the possibility to display your pictures in a lean and nice environment.

Laca Molnar

Laca Molnar 19 days ago

@Andre: I see, you are using "Justified" for the horizontal masonry, while "Masonry" for the vertical tiling. To keep things comparable, I'd suggest using "Grid, Masonry (horizontal and vertical)" in the table.

Regarding the "tag cloud": I thought of a clickable collection of keywords or other tags, without the need of an external search engine.

Laca Molnar

Laca Molnar 19 days ago

@Rog: Thanks, I've changed the speed to twice as low.

Rog

Rog 19 days ago

Nice summary. But, need to slow down the comparisons - too fast to follow.

AndreWolff

AndreWolff 20 days ago

Hi Laca thanks for your quick answer.

To see the difference between Justified Gallery and Masonry Gallery, open the FancyBox sample album.

FancyBox supports also keywords, for instance generated by TAGTHATPHOTO. Via an external search engine freefind you kan search for persons in a set of albums.

Laca Molnar

Laca Molnar 20 days ago

@AndreWolff:

"Tag cloud" is the clickable collection of tags (typically keywords) from the whole album.

1. What's the difference between "Justified-Gallery" and "Masonry Gallery"?

Thanks for the feedback, we will adjust the blog post.