Image cycler not clycling – any ideas?

[EamonnMac]

Hi guys,

I’m still at the cut-and-paste stage of using javascript or JQuery, but I’m trying to place a image roator on a site I’m building using a JQuery script I came accross at http://malsup.com/jquery/.

I already have JQuery included for a scrollTo feature, and I have the cycle plugin included also, along with the snippet to fire it off within my head section. It just won’t budge though. It seems to be half working – it’s applying opacity classes to the images according to Firebug – just no movement.

I do have a ‘initial-settings’ script which I am using to fire off the scrollTo and an accordian script, would that have anything to do with it? I tried removing the hard-coded snippet from my HTML and placing it there, but it still won’t work and seems to stop my scrollTo in its tracks (no pun intended!)

Any illumination here would be greatly appreciated. Here’s the skinny:

URL: (removed-no longer in use)

CSS FOR IMAGES:

Code:

html, body { height: 100%; float: left;
font-family: “Helvetica Neue”,Helvetica,Arial,
“Lucida Grande”,”Lucida Sans”,Verdana,sans-serif;
background: url(images/back.png) top left no-repeat #fff; }

#full-wrap { /*min-height: 100%; height: auto !important;
height: 100%;*/ height: 100%; }

.home-segment { margin: 80px 0 0 0; float: left; width: 1150px;
height: 555px; border: 1px solid red; }

.wrapper { margin: 0 0 0 187px; width: 851px; float: left; z-index: 1;
height: 555px; }

#home-slides { width: 851px; height: 200px; overflow: hidden;
padding: 0; margin: 0; }

#home-slides img { width: 831px; height: 180px; background: #eee;
padding: 10px; top: 0; left: 0; }

The html sequence follows basically as: body/full-wrap/home-segment/wrapper/home-slides/img

The snippet that (Ithink) I’m supposed to include in the head is:

Code:

Thanks in advance! :)

[apostrophe]

Well I can’t actually see why it’s not working, but here’s a couple of things you might try.
First do you really need the full plugin if you are just fading transitions? I’ve used the jQuery cycle lite plugin a few times and never had a problem http://malsup.com/jquery/cycle/lite/.

It’s a good idea to always use the latest version of jQuery, and personally I always use the google hosted version, just put this line in your document head:

Code:

If it’s still not working then try disabling the other plugins and see if that makes a difference.

EDIT
I had a bit more time this evening so I had another look. The firebug javascript debugger is giving the error message "$cont.innerHeight is not a function". Done a quick search and it seems a few people have solved this problem just by updating to the latest jQuery so that’s obviously the best place to start. Either download it from http://jquery.com/ and upload to your server or link to the google hosted version as above.

[EamonnMac]

Sounds good to me…I’ll try that now. Thanks (again) Apostrophe :) . You’ve used this plugin before – so I’ll just confirm that snippet has to go in my html head section? I can’t place it off the markup, for example in the initial-settings script?

EDIT – I am undecided as to whether to use the fade transition or the scrollLeft, so I’m using the full script… For the benefit of others, the cycle plugin requires JQuery version 1.2.6 or later to work.

[apostrophe]

You can put it in the html head if you want. I generally create a file called functions.js and put all my snippets in there. So then, from the html head (or the bottom of the page just before the closing body tag), you would call jQuery, whatever plugins you are using and functions.js, in that order.

For the record, jQuery version 1.2.6 is pretty old now and we are up to version 1.3.2. Always try and go with the latest version.

[EamonnMac]

I only had version 1.2.3! God knows where I got it, prob off an old demo…

So I could take out that snippet and put it in my initial-settings script to fire off with the scrollTo, the easing, and the accordian scripts? I had tried that, but thought maybe that was why it wasn’t working so put it back in the markup.

Ok. So I’ve now tried it offline with jQuery 1.3.2.minified and still no luck. For the purposes of debugging, I’ve updated the live version now to include just the new library and the cycle plugin, and I’ve removed the scrollTo, the easing, and the initial-settings scripts. If you (or anyone else!) have the time to take another gander, I’d be grateful…

Thx again!

URL: http://www.oldkitbag.com/sonta

[EamonnMac]

IT WORKS! Do not ask me what I did – I have no idea. Probably missed a semi-colon somewhere.

Listen, thanks a mil anyway Apostrophe, sorry for wasting your time – I really do appreciate your help! :oops: :D

[davesgonebananas]

"EamonnMac" wrote:

IT WORKS! Do not ask me what I did – I have no idea. Probably missed a semi-colon somewhere.

Listen, thanks a mil anyway Apostrophe, sorry for wasting your time – I really do appreciate your help! :oops: :D

Those damn pesky punctuation marks. Pffft!

[Author]

Posts