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.

 

My biggest 3 jAlbum problems

I am using the jAlbum software already 15 years for publishing the photos and routes of my walkings on my website.

It is an excellent program to do that, but in all those years I encountered a number of problems, which I did report in the jAlbum forum in the Features requests thread, but most of these requests were not implemented, because Jeff Tucker did not agree. In fact he did remove some of my requests and blocked my access to the forum. Therefore I will report the 3 most important problems which could have saved me a lot of times in this blog.

Jalbum uses absolute links instead of relative links.

I use at home a desktop computer to process my photos, but in my holidays I use a laptop computer to do that. To prevent that I have to copy files to my desktop and/or laptop after/before each trip I use a 2TB Samsung T7 SSD as external disk, which I connect via a fast USB-C port to my Laptop or Desktop.

If I connect the disk to my Desktop. It gets drive letter K: and the jAlbum Genral settings window shows:

The original RAW format photos are imported in K:\Users\Andre\Afbeeldingen\LightRoom_photos\ and after processing exported to K:\Users\Andre\Afbeeldingen\jALBUM\

With these settings I can make and upload an album op my desktop without problems, see my published album.

However if I connect the SSD to the laptop, it gets drive letter I: and the image directory field shows:

I:\Users\Andre\Afbeeldingen\jALBUM\Oostvaarderplassen\FancyBox

while the output directory still shows:

K:\Users\Andre\Documents\Mijn websites\andrewolff.nl\FotoSerie\Wandelingen\Oostvaarderplassen

Now jAlbum can't find the original images and the album can't be made. I can repair the images links, but if I do that, the album can no longer be made on my desktop.

It is no problem for LightRoom, without changing anything I can export my images to the \Users\Andre\Afbeeldingen\jALBUM\ directory, both on the Desktop and on the Laptop, because LightRoom uses relative links instead of absolute links.

My original Feature request for this problem has been deleted, see here.

I did request to use relative links, so that General setting window would show:

If the output directory is on another disk, you should see a drive letter in the Output directory field.

Problems with the Cache

If you change a simple thing like an icon or a color in an existing album and you preview the result in an external browser like Google Chrome, many times you do not see the new icon or color, but you still see the old icon and/or color.

Sometimes it took me a long time before I discovere the source of this problem:

It is caused by the Browser Cache, which still contains images of the old album. So to see all your changes correctly in the Preview, you have to empty the Cache before each preview.

Currently, if I see that the preview is incorrect, I copy the album path,  select the Incognito mode and drop the album path in the address field. In that case I always see the icon or color changes I made with the new settings.

So I did request to add a field in jAlbum to use a special browser or command switch for the preview.

ThisFeature request has not (yet?) been deleted. The owner and developer of jAlbum, David Ekholm, did find it initially a good idea, but later Jeff Tucker did not like this request, so it has not been implemented.

Prevent that the output folder contains an index.htm and an index.html file

I have seen many times that after the upload of an album, you see another display as showed locally in the preview. Many times it took me hours to discover the source of this problem: In the Advance tab was Page extension '.htm' used, but the output folder did contain an old 'index.html' file. The 'index.html' file apparently gets a priority over an 'index.htm' file, so that is why you see a different album. So I did this simple Feature request: Delete automatically an 'index.html' file if the album contains an 'index.htm' file and delete automatically an 'index.htm' file if the album contains an 'index.html' file. But again this simple request has not been implemented. I have no longer access to the forum, so you will no longer see my new feature requests or Bug reports on the forum.