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.

Hover Zoom Image Gallery

This is a fancy pants image gallery for your WebPlus website. Hover over an image and it zooms out to reveal it in it’s full glory. Can be used as an interesting way of showing off your portfolio.

Original download and tutorial comes courtesy of Marcin Dziewulski at mobily.pl

1. Download the zipped file - Includes the JavaScript files, images and a single paged WebPlus file in X4 and X5 file format so you can see how the code is incorporated in to a WebPlus website. Replace the images with your own images with dimensions of 400 X 400.

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

You can also add the files via the built in FTP uploader - 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 Image gallery 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 Image gallery.

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

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

Have the Images Spin In!

Instead of the images simply zooming out, they can also spin View the Demo. To do this, change the following section of code that’s added to the head of the site from this:

 rimg.hover(function(event) {

     this.animate({

   scale: 2,

   rotation : 0

Include ‘360’ so it looks like this:

 rimg.hover(function(event) {

     this.animate({

   scale: 2,

   rotation : 360

Any issues or questions please post in the Support Forum.

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.