Comparing jAlbum Skins

 

Comparing jAlbum Skins

Introduction

To evaluate and compare various jAlbum skins, I created several albums using identical image content. To highlight the differences between skins, I also included a web location pointing to a Wikipedia page, an MP4 video, a YouTube video, a 360° cylindrical panorama photo, and a 360° spherical panorama photo.

This review includes the skins bundled with jAlbum as well as four custom skins I developed. All of these skins can generate single-page web albums, featuring enlarged images displayed in lightboxes with optional full-screen and slideshow functionality.

You can view the comparison via this album of albums web page:

You see there the next jAlbum bundled skins:

Animatics

A full-window, responsive skin from the Tiger/Projector/Photoblogger/Lucid family. Unlike most skins, it begins with the first image in a lightbox rather than a thumbnail overview.

Lizard

A continuation of the Chameleon tradition, starting with a thumbnail view and a feature-rich top bar for navigation.

Lucid

Behaves like Animatics: if there are no folders, the album opens directly in a lightbox.

Photoblogger

A responsive, feature-rich skin offering social media integration, image sliders, a shopping cart, tag cloud, feedback, and maps. It starts with thumbnail view when folders are absent.

Projector

Also full-window and responsive, this skin emphasizes slideshow presentation. It starts with a theme image and a button to launch the slideshow.

Story

A single-page skin designed for a mix of images, videos, and text. You can add custom (HTML) content or dedicated text blocks.

Tiger

jAlbum’s most widely used skin. It inherits many Photoblogger features and presents a responsive layout, starting with a thumbnail overview when no folders exist.

Plain

A minimalistic skin utilizing the PhotoSwipe lightbox (also used by my PhotoSwipe skin). The demo album leverages `.inc` files for custom code insertion, as described in my blogger note,

Next to these bundled skins, I show these images in my 4 skins:

PhotoSwipe

Uses PhotoSwipe 5 lightbox, similar to Plain.

FancyBox

Employs fancybox-3 for sleek image display.

LightGallery

Built around the LightGallery library, supporting over 20 CSS3 slideshow transitions. It includes animated zoom effects on opening/closing the lightbox.

Slide Show 4

A successor to Improved Slide Show 3. All slide content is embedded in the index HTML file—there are no separate slide pages.

The last 4 skins are ideal for showcasing travel and walking tours, offering responsive thumbnail layouts and extra features like the display of Google Maps or OpenStreetMap maps, download GPS tracks, open other albums etc, which are implemented via buttons on the index page.

Feature Comparisons

Full-Screen Support

All skins support full-screen image viewing, but how it's implemented varies. For example:

• Tiger, Photoblogger, Projector: full-screen must be pre-configured; it can’t be toggled by viewers, although Photoblogger and Tiger allow adding a button for this.
• Animatics, Lizard, Lucid, Story: include a full-screen toggle button in the lightbox's top-right corner.
• Slide Show 4, PhotoSwipe, LightGallery, FancyBox: a full-screen toggle button can be be enabled from the lightbox settings window or the viewer may select it in the viewer settings window.

Slideshow Transitions

• Photoblogger, Story, Plain, Lucid: offer just one transition type.  The Story and Photoblogger skins allow the viewer to change the view time.
• Tiger, Lizard: support three types, but no viewer control.
• Animatics: supports four transitions, but the viewer can't change the type of transition or the view and transition time.
• Projector: supports eight transitions, but the viewer can't change the type of transition or the view and transition time.
• PhotoSwipe: doesn’t support transitions, but lets the viewer control viewing time.
• Slide Show 4, FancyBox: six transition types, all viewer-selectable.
• LightGallery: leads with a whopping >20 user-selectable transitions.

Background Music

All skins support background music. The Slide Show 4, PhotoSwipe, LightGallery and FancyBox skins are limited to a single MP3 file.

Web Locations & Videos

• Tiger, Photoblogger, Projector, Lucid, Animatics: web locations appear in separate sections of the index page.
• Lizard, Story, Plain: show them in-line with image thumbnails.
• Slide Show 4, PhotoSwipe, LightGallery, FancyBox: support inline web locations with an integrated “Back” button.

YouTube videos behave like web locations and share their display limitations.

360° Panoramas

• Spherical panorama images are supported in Photoblogger, Story, Tiger, PhotoSwipe, FancyBox, and Slide Show 4.
• Cylindrical panoramas auto-pan in Lizard, Story, Tiger—but not infinitely. The Slide Show 4, PhotoSwipe and FancyBox skins feature smooth, continuous panning both on desktop and mobile.

Maps

• Photoblogger, Story, Tiger: generate maps with all photo locations via built-in skin code.
•  PhotoSwipe, FancyBox, LightGallery and Slide Show 4.: support advanced interactive maps (via my Windows program MakeMap), which include GPS tracks, photo markers, viewer’s location, and Google Earth or OpenStreetMap support.
• These maps can also be made by MakeMap and  added to other skins (e.g., Tiger, Projector, Plain) using custom code as shown in the discussed albums.

Other Unique Features

• Shopping cart: Available in Tiger, Story and Photoblogger.
• Search feature: Found only in Tiger, Lizard, Story, Projector, and Photoblogger.

Smartphone Testing

I tested all skins on an iPhone 13 Pro (in portrait mode: 320×509 logical px). Here’s how they fared:

• Animatics: Issue when tapping the title bar.
• Lizard: Caption size is problematic, and the top bar could be more compact on small screens.
• Lucid: Similar caption issues.
• All other skins: Displayed well on the small screen.

How to view your current position in a Google Map or OpenStreetMap route map in an jAlbum album.

In a Google Maps map

With the latest version of the FancyBox, the PhotoSwipe and the LightGallery skin, it is possible to make a Google Map  route map with the photo locations and a new button to display your current position. As an example open this album  on a mobile device and click on the 2nd button from the left..

If you do this on an Pihone, you see this:

Click next on the location button, the left button in the upper right corner. The system will ask you whether it is allowed to use your current location. Confirm this. 

Next you see the Google map with a blue current location marker centered in  the map like in this example:

To remove the current location, close the map by clicking the close button in the upper right corner.

To implement this in your album, you have to set check-mark 'Show current location in Google Maps on mobile devices'  on the Map settings tab in the skin.

You make the map via program MakeMap:

For more info see the Help in MakeMap or this blognote 

In case you do not use the FancyBox, the PhotoSwipe or the LightGallery skin, it is possible to make a Google Map  route map with the photo locations in a separate file GoogleMap.html with program MakeMap. As an example, you can use this input in case you use the Lizard skin:

In a OpenStreetMap map

With the MakeMap program you can make a OSM_Map.html webpage which displays a leaflet OpenStreetMap map with the photo locations and optionally the current position.

Use the following settings to do that with  program MakeMap:

You should set check-mark 'Show current location on mobile devices', to display the current location in the generated map.

For more info see the Help in Makemap or this blognote 

This works for my 3 skins mentioned above, but also for the Plain skin and all other skin names you see if you expand the skins  combo-box  in the upper left corner.

As an example of an OpenStreetMap with the current position, open on a mobile device this webpage or open this album on a mobile device and click on the 3th button from the left.

If you do this on an iPhone, you see this:

Click next on the location button, the left button in the upper right corner. The system will ask you whether it is allowed to use your current location. Confirm this. 

Next you see in the OpenStreetMap a blue circle which represents your current localization The size of the circles corresponds with the accuracy of the location:

If you are near to the track you see something like this:

After you switched on the current location, the inner circle gets a red color. If you click again on the location button, the current location is removed and the inner circle of te location button ets again he black color.

Enhance the Plain skin via include files

 

Introduction

In version 2 of the Plain skin, most of the modifications discussed in my previous note have been added, except the points 4 and 5

In version 2 of the Plain skin Laza did implement on my request include files, which makes it possible to insert extra code in the skin, so there is no need to change the original skin code.

In this note I will show how you can enhance the Plain skin with new features, starting with making the lightbox background color equal to the index page background color.

Include files in Plain version 2.7

page-header.inc:

With an include file user-head.inc in the project directory, you can insert extra code just before the </head> tag. You could use that to add extra css-files of add css-code via <style> blocks. Code added via this file will be used in the root-album and in the folder albums.

user-style.css:

I used include file user-stylele.css to add extra css-code at the end of the common.css file. Code added via this file will also be used in the root-album and in the folder albums.

To see the code I used, download this file and all other files made in this note here. The extra code in the user-style.css file adds the following features:

• It makes the text and background color of the lightbox equal to the text and background color of the thumbnails page.

• The caption text color is also made equal to the text color of the thumbnails page.

• The caption background color is also made equal to the background color of the thumbnails page, but it is made more transparent (Opaque of 60%). It is of course more flexible to change the Page background color control on the design tab in a color control which allows also the define the transparency or even better to add a new color control with transparency for a caption, but this time I did not want to change the UI.

• copied the css-code used in my PhotoSwipe skin to make the the audio clip control smaller and more transparent.

• Finally I added css-code for the extra buttons discussed below.

To see the result of these changes open this sample album.

user-code.js:

With file user-code.js you can add extra javascript code to be used in the root album and in the folder albums. I use that for maps made with my MakeMap program. To make it possible to open the lightbox directory from a route map for the corresponding image number, via an URL like this: ''https://andrewolff.jalbum.net/Sample_Project_Plain_inc/index.html?M18”, which opens the light-box for the 19th image in the album.

This is also used in this album. You can find the used code in the zip-file and in this note.

With Plain version 3 and MakeMap version 2.8, the light-box can be opened by clicking on a marker or thumbnail in the map, without the use of this include file.

user-options.inc:

The contents in this file is used to add and/or change options of the lightbox. You can find these options in the PhotoSwipe gallerydocumentation.

Code added via this file will be used in the root-album and in the folder albums.

In this sample album it is used to set the bgOpacity to 1, otherwise you see part of the thumbnails page and clicking in the image will start or stop the slideshow.

user-top.inc:

You can use this include file to insert extra html-code after the title of the index page. You have to save such a file in each image directory where you like to show the extra code.

user-top-all.inc:

You can use this include file to insert extra html-code after the title of the index page. You have to save such a file in the root image directory if you like to show the extra code in the root output directory and all other output folders.

In this https://andrewolff.jalbum.net/Sample_Project_Plain_inc/ it is used to add a theme image,

user-code.inc:

You can use this include file to insert extra html-code after the  description of the index page. You have to save such a file in each image directory where you like to show the extra code.

user-code-all.inc:

You can use this include file to insert extra html-code after the description of the index page. You have to save such a file in the root image directory if you like to show the extra codein the root output directory and all other output folders.

In this https://andrewolff.jalbum.net/Sample_Project_Plain_inc/ it is used to add buttons to open the route maps and to download the corresponding gpx-file as described in this note.

The buttons are only added if the corresponding file 'track.gpx', 'GoogleMap.html' or 'OSM_Map.html' is found in the album output directory..

user-footer.inc:

You can use this include file to insert extra html-code at the end of the index page. Code added via this file will be used in the root-album and in the folder albums.

I used this in the sample album to insert a copyright statement under the thumbnails. But because the statement is automatically inserted in all folder albums, you see in the sample album that 3 folder albums show the wrong copyright statement.

Desired changes

Use user-footer.inc for footer code for the current folder and use user-footer-all.inc for footer code for the root folder and all other folders,

Demo albums

All described include files can be downloaded here and you see the effect of the unmodified Plain skin in this sample album, in this Audio-clip demo album.

New versions of program MakeMap

 

In version 2.3.0 the next items are added or changed:

• The close buttons on both map types are now made with embedded buttons.

• The download kml-file has been removed from the Google Earth web page.

• All jAlbum skins do use now the same template file, the skin res directory is no longer used.

• The MakeMap program can now also be used for the jAlbum Plain skin, see this Plain sample album, more info in this note.

• If the new check-box Enable links has been cleared, no light-box with the corresponding slide page will be opened if you click on a way-point in the map and next in the thumbnail.

In version 2.4.0 the next feature has been added

It is now possible to display up to 8 tracks in an OpenStreetMap in different colors:

The following 8 file-names can be used to display tracks in OpenStreetMaps:

• track.js, the default value in program ConvertTrack, wil show a red track.
• trackGreen.js which will display a green track.
• trackMagenta.js which will display a magenta track.
• trackBlue.js which will display a blue track.
• trackBlack.js which will display a black track.
• trackBrown.js which will display a brown track.
• trackYellow.js which will display a yellow track.
• trackOrange.js which will display a orange track.

Example of of multi-track OpenStreetMap:

To see this on-line, open this album and click on the third button from the left (OSM kaart) or open the map directly.

In version 2.5.0 the next features have been added

1. The new Plain and Lizard skins are now supported, see this Plain album and this Lizard album.
2. It is now possible to use thumbnail images instead of fixed marker icons:
   
   
   see also the maps of this album.
3. An OpenStreetView map is now centered around a selectable waypoint
4. The zoom level of an OpenStreetView map is lowered for smaller devices.

In version 2.8.0 the next item is changed:

With version 3 of the Plain skin, the lightbox can be opened by clicking the thumbnail, without the use of an include file, see  this sample album.

In version 2.9.0 the next items are changed:

All track js-files starting with the tekst 'track' are now automatically displayed in an OpenStreetMap made with program MakeMap.

The used track js-files should now contain the track color, program ConvertTrack version 2.1 adds the selected track color to the js-file. Track js-files made with earlier versions can no longer be used, so the corresponding gpx files should again be converted by the newest ConvertTrack program.

If the selected album did contain just one slide with a GPS location, there was a problem which has been repaired in this version. 

New version 2.3 of my program MakeMap

 

Next items have been added or changed in version 2.3:

• The close buttons on both map pages are now made with embedded buttons.

• The download kml-file button has been removed from the Google Earth web page.

• All skins do use now the same template file, the skin res directory is no longer used.

• The MakeMap program can now also be used for the Plain skin, more info on this note.

• If the new check-box 'Enable links' has been cleared, no Light-box with the corresponding slide page will be opened if you click on a waypoint in the map and next in the thumbnail.

You see the new check-box 'Enable links' at the top of the page:

If you clear check-box 'Enable links', no Light-box with the corresponding slide page will be opened if you click on a waypoint in the map and next on the thumbnail like this;:

See here for an example album which do not open the lightbox if you click in on the thumbnail.

You should clear this check-box if a lightbox of the skin can not be opened directly via an URL like this: ''https://andrewolff.jalbum.net/Sample_Project_Plain_inc/index.html?M18”, which opens the light-box for the 19th image in the album. It is recommended to clear this check-mark if you use an unmodified version of the Plain skin, unless you add the next user js-code via an include file 'user-code.js' to enable this:

document.addEventListener("DOMContentLoaded", function()  {

    if ((window.location.search.length) > 0) {

        var str = window.location.search.substring(1);

        if (str.substring(0, 1) == "M") {

            str = str.substring(1);

        }

        if ((str.substring(0, 1) != "f") && (str.substring(0, 1) != "_")) {

            openLightbox(parseInt(str));

}

    }

});

function openLightbox(slideNr) {

    if (slideNr < 0) slideNr = 0;

    const x = document.querySelectorAll(".main .card.image > .thumb,.card.video > .thumb");

    if (x) x[slideNr].click();

}

For an example, open this album.

More information in the Help-file and on the jAlbum forum.

How to enhance the Plain skin

Summary

In this jAlbum forum thread I showed how the Plain skin could show the location in a Leaflet OpenStreet map and in this thread I showed how the PhotoSwipe lightbox could be replaced by the LightGallery lightbox which is also used in my LightGallery skin.

Because my big friend Jeff Tucker blocked my access to the forum and removed all version information and jaskin files, I did publish new versions in the Plain-LG demo album and now I continued the reporting about the exercise here in this blog.

These modifications were done with a Plain skin version which used a  BeanShell GUI, but the current version 1.0.4 uses a compiled GUI, which requires the NetBeans program for changes.

So I investigated now how version 1.0.4 could be modified.

The result is a Plain_M version 1.0.4B which contains the following enhancements:

1. The Thumbnails caption selection box has been copied to the Lightbox tab and can now be used to select a caption below the image in the lightbox.
2. Thumbnails caption bug in Plain 1.0.4 repaired.
3. If the API-key field is empty, a Leaflet OpenStreet map will be used to display the location.
4. In the HEAD section code can be added via a file  page-header_0.inc in the image directory.
5. The lightbox background color is equal to the index page background color.

This example album shows the result and allows you to download the the jaskin file used to make this album.

This album uses the following settings in the modified lightbox tab:

The caption box in the Thumbnails tab is empty.

The implementation 

First you copy the the Plain map from the standard jAlbum skin directory C:\Program Files\jAlbum\skins to a Plain-M folder in the directory used for skins made by volunteers C:\Users\Andre\AppData\Roaming\JAlbum\skins

Next you install NetBeans and JAVA tools as described in the thread Compiling a skin's user interface. Create a new project Plain-M as described in the thread.

Copy file Gui.java from directory C:\Program Files\jAlbum\skins\Plain\src\plain to the NetBeans src directory, in my case D:\Andre\Documents\NetBeansProjects\Plain-M\src.

For this version I copied in Netbeans the code of the caption selection boxes from the Thumbnails panel to the Lightbox panel and renamed the copied controls, for instance I renamed the thumbnailItems control into slideItems control.

I added also a label hintOSMLabel and added the corresponding text in the Plain-M text.properties file:

ui.hintOSM=To use an OpenStreet map, leave the next field empty

Translate this string to other languages via menu Tools / Translator / Update ALL skin translations (auto translate).

After compiling the changed  Gui.java file, you will find the corresponding Plain-M.jar file in folder D:\Andre\Documents\NetBeansProjects\Plain-M\dist. Move file Plain-M.jar to the skin directory C:\Users\Andre\AppData\Roaming\JAlbum\skins\Plain-M\lib and overwrite the existing file.

To see the modified Gui.java file, download the Plain-M.jaskin file and open after the installation folder C:\Users\Andre\AppData\Roaming\JAlbum\skins\Plain-M\src\plain.

Next edit in jAlbum the template files. All my changes are indicated as comments with the letters AW in the skin directory C:\Users\Andre\AppData\Roaming\JAlbum\skins\Plain-M.

Note that these template files uses a js-shell, so you should use javascript code in these files. I use sometimes ChatGPT to convert JAVA code to javascript code.

For the OpenStreet maps implementation I changed files init.js, index.htt and photoswipe-init.js.

The slide captions are added as described in the PhotoSwipe documentation. 

To keep it simple, the slide captions are saved in the alt attributes.

I added a simplified version to file  photoswipe-init.js:

// <AW

   lightbox.on('uiRegister', function() {

    lightbox.pswp.ui.registerElement({

        name: 'custom-caption',

        order: 9,

        isButton: false,

        appendTo: 'root',

        html: 'Caption text',

        onInit: (el, pswp) => {

            lightbox.pswp.on('change', () => {

                const currSlideElement = lightbox.pswp.currSlide.data.element;

                let captionHTML = '';

                if (currSlideElement) {

                        // get caption from alt attribute

                        captionHTML = currSlideElement.querySelector('img').getAttribute('alt');

                }

                if (captionHTML.length > 0) {

     el.style.display = 'block';

     el.innerHTML = captionHTML;

   }

   else  el.style.display = 'none';

            });

        }

    });

});

// AW>

The required CSS code is added to file common.css:

/***< AW ****************************************  Customized lightbox  captios */

 .pswp__bg {

    background-color: ${pageBgColor};

  }

.pswp__custom-caption {

  position: absolute;

  color: ${textColor};

  left: 50%;

  transform: translateX(-50%);

  text-align: center;

  background-color: ${pageBgColor}; 

  padding: 4px 18px;

  border-radius: 4px;

  bottom: 16px;

}

 .pswp__custom-caption a {

    color: ${textColor};

}

/*******************************************  AW> */

To save the slide captions in the alt attribute I had to change file index.htt, but also file util.js in C:\Users\Andre\AppData\Roaming\JAlbum\skins\Plain-M\lib

In that file I used a quick and dirty solution by copying function getCaption which uses control thumbnailItems to a new function getSlideCaption which uses the new control slideItems. I changed also  function getThumbnailElement which processes the alt attribute.

This is a very simple solution to add captions. My PhotoSwipe skin uses the dynamic caption plugin  which offers much more features: captions which do not overlap the image, captions in the sidebar and you can change the caption colors, see some examples in this example album.

Modification of version 2.4

In version 2 of the Plain skin, most of the modifications discussed above have been added, except the points 4 and 5.

To make the lightbox background color equal to the index page background color you can use in version 2.4 include files.

This has been decribed in my note Enhance the Plain skin via include files.

.