problems getting javascript and to degrade gracefully - image scroller

Question

I'm trying to create a javscript scroller following the example at: http://www.deadmarshes.com/Blog/jQuery+Slideshow+with+Crossfade.html

Unfortunately this version doesn't show anything when javascript is disabled but I'd like it to at least show the first image and caption and then just not move.

I stuck together a fiddle which, although the images loaded up before I added the JS it doesn't seem to work at the moment. All the code's there though and I am a bit stupid so I'm probably missing something simple.

http://jsfiddle.net/Lew7H/2/

Does anyone know how to make the initial transition not happen and just have the first 'slide' there?

Also I adapted this slightly to show 4 slides instead of 3. I changed 3 to 4 in two places in the JS (where it's keeping tally) and that seemed to work alright but now in FF when you click on a few of the numbers to change slides a few times then let it go back to normal running, the indicator which is meant to show which slide you're on starts appearing all over the place.

I assume that's to do with the way it's being counted in the JS but I haven't a clue what it's doing to be honest.

Any help would be appreciated.

Edit: Just looking at the second issue there about the indicators screwing up after clicking on a few of them. The timing of the transitions also goes weird. It's like clicking a couple of times means the transitions and the pointers are going a couple of times. IE there's more than one bit of JS moving the slides and pointers, resulting in strangly timed transitions and more than one pointer. Could that be possible?

Answer 1

I fixed few calling part where you lose the scope. Read https://stackoverflow.com/a/2335175/297641 to learn more about it.

Fixed fiddle: http://jsfiddle.net/Lew7H/12/

Take a look at the code and let me know if something is missing.

Answer 2

now Working See demo

you forgot select Framework