Before / After Script

Placeholder Picture
Placeholder Picture

About this theme.

This before/after effect is ideal for showing some kind of development, like historic images compared to new ones, before and after landscaping, the same person in two stages of life, or any other kind of change.

This 'theme' consists of the actual RFF file (which can also be opened in RSD) plus an external css file and two js files. There are also some scripts that can be found under Settings.

It is not really a 'theme' as such, my thought is that it can be made into a component. To do that, it is important to save it as a theme first, otherwise those external files and the scripts will be lost. From the saved theme the 2nd row can be selected and made into a component. The external files can be obtained by exporting this file first and picking them up from the exported folder.

The images are from my garden. To use your own images, the dimensions have to be set in RFF/RSD on the container (container-1), and it is also a good idea so create the images in the same dimensions as needed. In order not having to edit the external css file again and again after every new save, export and upload, it would be an idea to export the source file (this one), edit the dimensions in the css file, and then re-add it to the Resources.

If you want to have more than one instance of the before/after images on one and the same site, you need to give each instance a unique ID.