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:
- 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.
- Thumbnails caption bug in Plain 1.0.4 repaired.
- If the API-key field is empty, a Leaflet OpenStreet map will be used to display the location.
- In the HEAD section code can be added via a file page-header_0.inc in the image directory.
- 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.
.
