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 display a location map on the Contact page of my jAlbum skins

The contact page of my FancyBox skin, my PhotoSwipe skin, my Lightgallery skin and my SlideShow 4 skin have been improved:

• Four new user definable links have been added.
• The width of the contact page image can be defined in px or %'.
• You can now add text and / or code to the contact page, for example to add a location map.

To add a location map, use the following procedure:

• Open the Google Maps web-page.
• Enter your address in the upper left search box or add a marker to the map by clicking in the map on the location you like to show.
• Next click on the 'Share' button.
• Select the 'Embed a map' tab.
• Click on the 'Copy HTML' link to copy the code to the clipboard.
• Open the Contact page in jAlbum and enter the code in the large lower text block via the keyboard combination ctrl+V or by clicking with the right mouse button in the text block and selecting 'Paste' in the menu.

You see now a text like this: 

<iframe src="https://www.google.com/maps/embed?pb=!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Change the width "600" into "90%" to avoid problems on small smartA-phone screens .

You may add some text above the map by entering before the <iframe text a string like <h3>Location</h3>

To see the result open this example album and click on the 'Contact jAlbum' menu button.

It uses these Contact page settings:

You see here a width of  20% for the Contact image, so this image is adapted to the window width.

You see here also the 4 new link fields.

Instead of the embedded map page you can also use a link to open the location in a new window. Select in that case in the Google Maps page, after you clicked the 'Share' button, the 'Send a link' tab and next click the 'COPY LINK' link. Enter this link in one of the new link fields on the Contact page via the ctrl+V key combination and add a text like 'Location' in the corresponding text field.

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.

New skin versions

My jAlbum skins have been updated:

FancyBox version 4.5.1.

PhotoSwipe version 5.7.2

LightGallery version 1.5.1

Slide Show 4 version 5.4.1

Survey of the changes:

• If a description is given in a folder tile, a possible link is removed, because a link in a link will not work.

• The description in a tile uses now also the 'Thumbnails text font-size', see this example album.

• The Map.htt template file is changed so that the close button is better visible, see this example.

• If a route map is shown with the OSM_Map.html web page made with my program MakeMap and the lightbox has been opened via a click in the thumbnail, you can now use the lightbox close button to return to the map, see this example. The latest version of MakeMap makes it also possible to disable opening the lightbox.

• PhotoSwipe library version 5.4.2 is now used in res\photoswipe folder of the PhotoSwipe skin.

• Style Blue has been added to the Slide Show 4 skin.

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.

.

 

How to use a video or slide-show instead of a theme image with jAlbum

With the latest version 5.7.1 of my PhotoSwipe skin, the latest version 4.5.0 of my FancyBox skin and with the latest version 1.5.0 of my LightGallery skin it is possible to replace the theme image by a video or slide-show if you make a jAlbum web-album.

In both cases, you have first to remove the theme image:

1. Open the Explorer, click with the right mouse button in the Theme image in the lower right corner and select Remove.

2. Open the skin Index page / Theme image tab and clear field 'Theme image'.

3. Finally clear check-box 'If this field is blank or …'

Next open the Index page / Footer tab and check the new check-mark 'After the theme image'.

The other requred actions depends on the type of Theme image replacement.

Use a video instead of a theme image

Enter the next code in the html code text-box Index page / Footer tab:

<div class="iframe-container iframe-container-Video">   

<iframe class="frame" src="https://www.youtube.com/embed/YN5avcf43OE?autoplay=1&mute=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Next enter this CSS code in the CSS code text-box on the Custom code tab:

.iframe-container { position: relative; height: 0; }

.iframe-container-Video { padding-bottom:40% }

.iframe-container iframe { border: none; position: absolute; top:0; left: 0; width: 100%; height: 100%; }

Play with the padding-bottom % to get the desired display.

The youtube src string depends on the video you like to show.

To get this string, click on the 'Share' button below your selected video and next on the 'Embed video' button.

Finally make and upload the album,

For an example of an album with a video instead of a theme image, open my Drenthe album.

Use a slide-show instead of a theme image

First you should make the slide-show you like to use as a replacement of the theme image. You can use all my 3 skins to do that, but I recommend to use my LightGallery skin, because that skins has a large selection of slide-show transitions.

Select for the slide-show images with a large width / height ratio and use a large width x height images bounds:

If you like, you can make the ratio the same for all images with a fixed shape filter:

filter1

class=FixedShapeFilter all prescale

Enter this string in the Advanced / User Variables tab:

Control the cropping, click with the right mouse button in the image and select 'Set crop focus...' and select option 'thumbnails bounds' (for for me unknown reasons, there is no 'image bounds' option).

On the skin 'General settings tab select check-marks 'Skip thumbnails pages' and 'Disable Viewer settngs' and select a 100% transparent color for the 'Page background color'.

On the skin Slide page / Layout page', clear the next check-marks: 'Prevent that the description overlaps the image' and clear all check-marks in the 'Show as description in the caption bar or side panel'.

On the skin Slide page / Options, select the slide show parameters and set / clear the next check-marks:

Next make the slide-show as you see in this example.

Now open the project file of the album where you like to use the slide-show instead of the theme image.

Enter the next code in the html code text-box Index page / Footer tab:

<div class="iframe-container iframe-container-slideShow">

    <iframe scrolling="no" src="https://www.andrewolff.nl/FotoSerie/AlgarveSlideShow_LG/"></iframe>

</div>

Enter here the URL of the slide-show you made above,

Next enter this CSS code in the CSS code text-box on the Custom code tab:

.iframe-container { position: relative; height: 0; }

.iframe-container-slideShow { padding-bottom:25% }

.iframe-container iframe { border: none; position: absolute; top:0; left: 0; width: 100%; height: 100%; }

Play with the padding-bottom % to get the desired display.

Finally make and upload the album and you see something like my Algarve album.

Faster coding with the help of OpenAI ChatGPT

 

In the previous versions of my LightGallery, my FancyBox and my PhotoSwipe jAlbum skin, the menu did disappear if you scorll-up a thumbnails page.

I wanted to fix the menu a the top of the page if you scroll-up.

It is really amazing how fast you can do that with the help of the new AI ChatGPT  tool.

To see it open my ChatGPT conversation.

See the result in my France album.

I used ChatGPT too in my Plain-LG exercise to convert Groovy JAVA code to javascript code for use in the js-shell used by Laza.

That goes without problems as long as you know that you should replace the *Let* and *Const* statements in the ChatGPT code.

Here are two other examples for converting code:

Convert JAVA to JS.

Convert jQuery code into plain vanille javascript code

I posed next question to ChatGPT:

"Does there exists a browser for my windows 10 64 bits system where the cache is not used?".

This was the answer:

Here are a few browsers that offer options to control caching:

Epic Privacy Browser: This browser is designed with privacy in mind and offers a built-in option to disable caching. It's based on Chromium and is available for Windows 10.

Brave Browser: Another privacy-focused browser based on Chromium. While it doesn't provide an explicit option to disable caching, it has a Private Browsing mode that reduces data retention, and it blocks trackers by default.

Firefox: Although Firefox doesn't provide a straightforward way to disable caching completely, you can customize the caching behavior using about:config settings. Search for "browser.cache" in the configuration settings and adjust the values to control caching behavior.

Tor Browser: If privacy is your primary concern, the Tor Browser is an excellent option. It's based on Firefox but routes your traffic through the Tor network, offering a high level of anonymity. It limits caching and takes other measures to enhance privacy.

Comodo Dragon: This browser is based on Chromium and offers various privacy and security features. While it might not have an explicit caching toggle, it does provide options to clear browsing data automatically upon exit.Browser

I installed the *Epic Privacy Browser* and it seems to work fine to preview an album after a Make, but for daily use this browser is for me not suited: No Search possibility, no remembered passwords etc.