jQuery please help

Hello and thank you for looking at my post. 

I am very new to html but I do understand it and think that I could now write it without assistance the problem is I have no idea how java works so please don't rage at me for trying to learn something new.

A friend started a business and wanted a website, she had no money so I said I would have a go at building something for her.

She had this CSS template she liked and wanted me to use it so I made a basic site for her (http://www.funfitbrighton.co.uk) by filling in the blanks. She liked the template because it came with a jQuery banner that rotates when you click it.

There is however, an option to have it auto rotate and I discovered this while we were talking, having implemented what I believe are the correct options it doesn't auto rotate. 

Secondly she wanted each image in the banner to link to a page with a larger image. I thought this would be simple as it was html, however, if I add the html to the images in the banner the whole thing implodes.

Its driving me insane trying to figure it out and the further in I go the less I seem to understand. 

The banner can be seen at:


The jQuery files attached to the project are:

So far I have edited the last file listed (setup.js) and I added these options:
autoPlay: true,
autoPlay: 1000,
carouselSpeed: 1000,
pauseOnHover: true
The effect of adding these options was astounding, in that, nothing happened. I have tried different variations of these edits and whilst I think the documentation regarding the implementation was vague (http://www.bkosborne.com/jquery-waterwheel-carousel/options) for a newbie I think this is the correct thing to do other that the autoPlay: true, option which I saw on another forum where someone had a similar problem. 
I am completely baffled and have no idea what to try next. 
Regarding the second issue, here is a snippet of the html for the images in the banner:

<div id="waterwheelCarousel">
<img src="images/waterwheelCarousel/a.gif" alt="" />
<img src="images/waterwheelCarousel/bb.gif" alt="" />
<img src="images/waterwheelCarousel/c.gif" alt="" />
<img src="images/waterwheelCarousel/d.gif" alt="" />
<img src="images/waterwheelCarousel/e.gif" alt="" />

I thought adding an href to each of these images would be simple e.g. 

<div id="waterwheelCarousel">
<a href="A.html"><img src="images/waterwheelCarousel/a.gif" alt="" /></a>
<a href="B.html"><img src="images/waterwheelCarousel/bb.gif" alt="" /></a>
<a href="C.html"><img src="images/waterwheelCarousel/c.gif" alt="" /></a>
<a href="D.html"><img src="images/waterwheelCarousel/d.gif" alt="" /></a>
<a href="E.html"><img src="images/waterwheelCarousel/e.gif" alt="" /></a>

and this would mean once an image was clicked the subsequent page would open, however, in practice the banner collapses and the images appear down the length of the page sat one on top of the other. 

If anyone has any idea what I can do to resolve either of these issues please let me know. So you know my understanding, I get html, jQuery makes me dizzy and so if your solution is to parse the flange man with mojo limpets, then a description of exactly how to do that would be great or at least the information on how I find out how to do it. 

As an addendum there is another version of this same script from the same author and it works very well in the demo however, how I use that script instead of the one I have is beyond me. I have tried to implement it but changing the script location to the new one leads to the banner disappearing. That new script and demonstration is in a zip file that I downloaded from the authors site (http://bkosborne.com/sites/default/files/featurecarousel.zip) and the index file has the demonstration of it working. I think the easiest fix would be to replace the banner script I have with this one but I have no idea how do to that so if you can help thank you.


Thanks for reading this whole heap of drivel, I've tried to be thorough so you know where I'm at and what I've tried but if I have left anything vital out please let me know and I will add it very quickly.

Minki San


PS I've posted a similar message on two jQuery forums and to date I have had one response from someone who decided to just stop helping me and another response from myself and I was not helpful at all.



Hey, I just looked at this file "http://www.funfitbrighton.co.uk/scripts/jquery.waterwheelCarousel.setup.js" and it looks like you have two autoPlay in them with one initialized as 1000 and the other as true. Have you tried each separately? I am not an expert myself. I usually get errors like these as well but eventually solve them using trial and error. 

Just try removing the autoPlay: true and see if that makes it autorotate. About your second problem, I don't it should explode. I have to see it exploding myself to help you.