Premium Templates

 WebPlus Templates

Image Galleries

 PrettyPhoto

 Hover Zoom

Image Effects

 Nivo Slider

 Circle Navigation

 Piecemaker 2

 EasySlider

 Image Slider

 Slide Thumbs

 Sliding Boxes

 Featured List

 Before and After

Video Players

 NonverBlaster:hover

 Flowplayer Video

Audio Player

 Mp3 NonverBlaster

Other Effects

 Animated Portfolio New

 Jquery Fade In/Out

 Accordion

 Smooth scrolling

 Unique scrollbar

 Page Peel

 News Ticker

Copyright © Flying Cow Labs All Rights Reserved.

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.

Piecemaker 2 Image Rotator

The Piecemaker is a massively popular flash image rotator, versatile enough to be able to include unlimited transitions, SWF and Video support, tooltip navigation and animated shadow.

As used in the Classic Dark and Light templates available at Serf Templates.

1. Download the zipped file - Includes the JavaScript files, CSS, XML, SWF, images and a single paged WebPlus file so you can see how the code is incorporated in to a WebPlus website.

2. Using an ftp program such as FileZilla add the complete ‘Piecemaker’ file to the root of your server, this contains everything needed for the Piecemaker to work.

Alternatively, click on Tools in the WebPlus workspace > Site Manager > File Manager > and replicate the file tree in the image below by creating new folders and adding files to the correlating folders.

4. Finally you will need to add the following HTML code to the body of the page.

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

Placement of the Piecemaker will depend on the placement of the HTML Code Fragment.

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

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

    

     
You will require flash to view this gallery
     
    

If you’ve embedded the files via the File Manager you can now preview the site in your browser to see the active Piecemaker, if you’ve uploaded the files via an ftp client you’ll need to upload the site to see it in action!

Adjusting the Slider Size, Adding Images and Captions

Firstly, you will need to size all your images to the same dimensions in photo editing software, it’s important to use same size images.

Add your images to the ‘contents’ file found within the ‘piecemaker’ file, naming them ‘01.jpg’ etc will save you having to change the image names in the ‘piecemaker.XML’ file.

Open the ‘piecemaker.XML’ file in a text editor such as notepad and edit the dimensions in the ‘Settings’ section to resize the Piecemaker:

ImageWidth="960" ImageHeight="340"

If you change the overall dimensions of the slider you will also have to re-position the ‘start/stop’ button and the navigation bullets, for more details on this you should view the documentation that is available from the Piecemaker website: http://www.modularweb.net/content/en/piecemaker/documentation.pdf

In the XML file you can also change the image captions that show up when the navigation bullets are hovered over, simply edit the title attribute in the code:

Any issues please post in the Forum.