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.

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.

How to show Route Maps in Plain Albums

 

Introduction

With my Windows program MakeMap, you can make a map of all photo locations in an album made with most current jAlbum skins.

First you should download and install this program from my website.

I did not buy a Microsoft security certification, so during the installation you will see messages like 'Setup.exe is not downloaded frequently and can be dangerous' and 'Your PC is protected'. Ignore these messages and choose actions like 'More information' and/or 'Nevertheless, do the installation'.

You can make two types of maps: a Google Earth Map and an OpenStreeMap as has been described in the help-file.

The most simple way is to use an OpenStreetMap, because this does not require an API-key.

If the album shows pictures of a walking or cycle tour and you made a gpx-track of the tour with a GPS-device or a navigation app like Wikiloc, you can also add this track to the map. The easiest way to do that is to use my Windows program ConvertTrack, You can download and install this program from my website.

This note describes how you can make such a map for an album made with the new Plain skin.

A simple OpenStreet Map

You can only make a map if your images contain a GPS location.

First make and upload the album and don't forget to select the setting 'Show location on map' on the Plain Lightbox tab.

Next open program MakeMap  and select the following settings:

Use the button 'Select Root directory' to select the root directory of your websile and enter the corresponding URL of your web-site in the text-box after 'External URL:'. The structure of the output folders on the PC must match the folder structure on the server.

If you follow the stupid jAlbum recommendation to use as output folder a sub-folder 'album' of the project folder, you have to fill in these fields for each album you make: Put the absolute address of the album folder in field 'Local root folder' and the corresponding URL of that album in the 'External URL' field.

Note: You should not use ' or " characters in folder names or in URLs.

You should select check-mark 'Show location on map' on the Plain Lightbox settings tab and make and upload your album.

If you open the first combo-box in the MakeMap program you see the skins which are supported by program MakeMap. Select here the Plain skin.

For the Plain skin, you should clear check-mark 'Enable links', because with the current version of the Plain skin, it is not possible to open the light-box for a way-point showed on a map. Later I will extend this note with a description how you can open the light-box with special code in include files.

Next browse with the 'Select a slide image' button to the slides output folder and select an image in that folder.

Next click on the button 'Make Map'. This will create two files in the output folder: a web-page OSM_Map.html and a file waypoints.js which contains the photo locations.

To see the result, click on the 'Show Waypoints in Map web-page'.

If you do not see all locations on the map, lower the 'Zoom level' and click again on the 'Make Map' button. If you like to see more details, raise the zoom level.

Next you should make a link to the generated map. The simplest way is to do that with a link in the album description via the HTML editor:

See here an example of such a link.

Another way is to make a weblocation of the map. To do that open the uploaded album and replace the text 'index .html' in the browser address field by 'OSM_Map.html' and click on the return button. The map page opens and you see now the URL of the map page. Drag and drop that URL to your album or make a weblocation by clicking with the right mouse button in the explorer window and select weblocation, where you can also enter that URL.

Finally make and upload the album again. You will see an album like this example album.

Add a track to the OpenStreetMap

Open my program ConvertTrack and browse to the gpx-file via the 'Open' button:

Next click on the 'Save as...' (on the Dutch screen shot above showed as 'Sla op als...') button and save the file as trackl.js in the output folder of the album.

Finally upload the album again.

A simple Google Map

Follow the same procedure as has been described above for the OpenStreetMap, but select next settings after you opened Program MakeMap:

Notice that you have to enter your Google maps API key in the 'Google API key' field, this is the same key as you use in the Plain Ligthbox 'API key' text-box.

After you selected an image in the slides folder and next clicked the 'Make Map' button, two files are created in the output folder: the web-page 'GoogleMap.html' and the file 'map.kml' which contains the photo locations.

After you made the map you can see the result by clicking on the button 'Show Waypoints in Google-Earth' if you installed the Google Earth program on your PC.

To use the other button 'Show waypoints in a web-page', you have first to upload the album with the new files.

Finally make the link to the GoogleMap.html' web-page and make and upload the album.

Add a track to the Google Map

You can do this only if you installed the Google Earth program on your PC.

Open my program ConvertTrack and browse to the gpx-file via the 'Open' button.

Next click on the 'Save as...' (on the Dutch screen shot above showed as 'Sla op als...') button and save the file as track.kml on your PC, for example in the output folder of the album. Open first your file map.kml and next file track.kml with program Google Earth:

Click with the right mouse button on 'Temporarily places' and next on

'Save location as...' and select file map.kml in the output directory. Overwrite file 'map.kml'.

Next upload the album again.

Open the Plain Lightbox via the thumbnail in the Map

If you click on a waypoint in a generated map, a thumbnail will be showed like this:

If you click on the thumbnail, the lightbox with the correponding slide will be opened in most supported skins, see for example this PhotoSwipe skin album.

To use this with the Plain skin, you have to check check-box 'Enable links' in program MakeMap and you have to use at least one include file (user-code.js), see this note. See the result in this sample album. If you use this with the Plain skin, you should un-check the 'Lightbox triggers fullscreen mode' check-mark on the Lightbox settings tab, otherwise the ligthbox will not be opened. A change in the Plain skin code is required to solve this, as is done in my PhotoSwipe skin.

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.

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.