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.