PrettyPhoto - 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.

PrettyPhoto Tutorial

PrettyPhoto is a jQuery based lightbox clone and can be easily added to your WebPlus website. It can be used to seamlessly display photos, videos, flash and external web content.

Developed by Stéphane Caron, files and more detailed information can be found at www.no-margin-for-errors.com. This script is free to use on all web sites including commercial ones. But remember, if you find this useful, it’s always nice to donate to the author, a lot of time has gone in to creating this script and keeping it updated. Hit the donate button on Stéphane’s website.

1. Download the complete zipped bundle.

2. Using an ftp program such as filezilla add the complete ‘prettyphoto’ file to the root of your server, this contains all the javascript files, css and images needed for PrettyPhoto to work. The example WebPlus file in the download has all the files embedded using WebPlus’ built in File Manager, you can do the same if you’d prefer to not use an FTP program, but be warned the file locations must be perfectly placed.

3. Include the following script in the head of the master page or the page you wish to have the use of PrettyPhoto.

Copy and paste > Insert > Web Object > HTML > Paste to Head.

4. Press ‘Alt’ and ‘S’ to bring up your sites HTML, scroll down to the bottom, then paste the following code before the closing tag of your body (</body>) either in the section marked  OR  depending whether you want prettyphoto to work on either the one page (Page Body End) or all pages (Master Page Body End)

5. Now all that’s needed is to include hyperlinks that will launch PrettyPhoto with your image gallery, flash or web page in your WebPlus website.

Details and how-to’s can be found on the Demo page

The download comes pre-packed with all the different themes available with PrettyPhoto. To utilise a theme you’ll need to replace this section of code in the code inserted before the closing tag: ‘pp_default’ for the name of the theme you want.

Theme choices are:

light_rounded

dark_rounded

light_square

dark_square

facebook

Attention: If you’re using WebPlus X4 you will need to use this workaround to allow this add-on to display correctly in Internet Explorer