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.

Jquery Image Slider Tutorial

This tutorial shows how to add a jquery image slider with image description, name and button navigation to your WebPlus site.

Perfect for that large banner on your home page that can contain loads of enticing images!

The original tutorial and coding comes from the guys at DreamCSS

As usual I’ve pieced together this tutorial to benefit the novice and professional Serif WebPlus user.

Have fun!

1. Download the zipped file - Includes javascript, css, images and a single paged WebPlus file so you can see how it all fits together.

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

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

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

4. Copy the following code and paste it in to the body of your web page.

Copy and paste > Insert > Web Object > HTML > Paste to Body

Placement of the image slider will depend on the placement of the HTML fragment.

    

    

    

    
    
    
    
    
    
    
    

    
post: 
    

    

    
    
    
    

5. 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>) where it says <!--Page Body End-->

Notice this piece of code contains the image names and descriptions. Make changes here to give the images new descriptions etc.

You now have everything on the page and ready to go, upload the page to your server and check out your cool image slider.

Remember -The numbers on the buttons will use the hyperlink colours used in your sites properties.