jQuery Forum

1. Copy the files

Copy the files you have found in the RAR file to the root of your website ( usually htdocs/ ).

2. Edit your document

After copying the files, open the website you wish to edit and add the following lines right before the closing body tag ( </body> ):

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/bumpbox.js"></script>

If you intent to view FLV and SWF files, add the following line:

<script type="text/javascript" src="js/flowplayer.min.js"></script>

3. Choosing a class name

Now choose and apply a class name to all links that should trigger bumpbox. In the end, your links should look like this, here we use "bump" as the class name:

<a href="http://www.artviper.de" class="bump">SEO</a>

Note: Grouping can be achieved by using the same class name for those elements that should be grouped.

4. Define a size for bumpbox

Each link can have a different size, matching the object size you wish to show. For that, we take the already used link from #3 and add the rel tag, which is used to determine the bumpbox size:

<a href="http://www.artviper.de" class="bump" rel="800-600">SEO</a>

As you can see, we added rel="800-600", so the resulting bumpbox will be 800 x 600 pixels wide.

Note: If you add a title to your <a> tag, it will be displayed right below the main content bumpbox.

5. Activating Bumpbox

To activate bumpbox, we need to add (at least) the following script call:

<script type="text/javascript"> doBump('.bump'); </script>

This enables bumpbox, and you are now ready to use it for the first time. Yet, there are a lot more options you can define to adjust the appearance of bumpbox to your liking.

Continued on the right side...

6. Setting up options

Options available

Using a fully customized bumpbox:

doBump( '.bump',750, 500, '111', '900', '0.8', 5, 1 ,'333', 15,'000', 4,
                 Fx.Transitions.Bounce.EaseOut,
                 Fx.Transitions.Bounce.EaseOut,
                 'images/demo_bg_bumpbox.png',
                 'top left',
                 'repeat-x' );

Does it work not yet.

I must be thick but I followed the instructions but I must be putting the code in the wrong place has anyone have any Ideas let me know 

Thanks

Sanj