Before and After - Serif WebPlus Tutorials - Addons, Plugins, Tutorials and Resources

Premium Templates

Image Galleries

Image Effects

Video Players

Audio Player

Other Effects

Animated Portfolio New

Website crafted using the Serif Software Suite

If you’ve found these tutorials useful please help the world's poorest communities by making a small donation to WaterAid - Even if it’s just a one-off gift of £2 it would be massively appreciated.

Before and After Image Effect

This tutorial was kindly sent to me by Mick from Serif-IRC Support, easily the most helpful and patient Serif software user who donates his time helping people having troubles with any aspect of WebPlus. If you haven’t already go check out his site: Serif-IRC Support

If you’re looking to display an image in its before and after state, this script is perfect for you. The user can simply swipe their curser over the image to reveal a before and after, without the picture taking up too much valuable space.

1. Download the zipped file - Includes the a WebPlus file and the 2 images used in example. Open the WebPlus file to see how the code is added to an active site.

2. In a new site click on Tools in the WebPlus workspace > Site Manager > File Manager > Add File > and add the 2 images.

3. Include the following script in the head of the master page or the page you wish to display the image effect.

Copy to clipboard > Insert > Web Object > HTML > Paste to Head.

This is a big chunk of code and contains the JavaScript, CSS and link to jQuery.

4. Next you will need to add the following HTML code to the body of the page - Remember to edit the image dimensions to match your own images.

Copy to clipboard > Insert > Web Object > HTML > Paste to Body

Placement of the before and after image will depend on the placement of the HTML Code Fragment.

You have most likely added your own images, so now you’ll have to make some changes to the CSS to change the size of the container that holds everything.

In the code added to the head of your HTML you will find the following section, edit the code to match your new image dimensions

    		#container {width:593px; margin:0 auto;}		
    		/* width and height for the block */
    		.beforeafter {width:593px; height:693px;}

If you have any problems setting up this script in your own website you can post your query in the Serif Addons Forum

<div id="container">
    
            <div class="beforeafter">
                <img src="scripts/b4-after/1.jpg" alt="Before" width="593" height="693"/>
                <img src="scripts/b4-after/2.jpg" alt="After" width="593" height="693"/>
            </div>
        
            <p id="debug"></p>
            <p id="debug2"></p>
            <p id="debug3"></p>
        
        </div>