The folks over at Logicbox have written a nifty little jQuery plugin called “simplyScroll” that allows you to easily and seamlessly scroll through a collection of images with little effort.  This is a great way to avoid making a Flash animation to accomplish the same task and… it works on the iPhone. We needed to use it to make a looped, seamless scrolling header for a site on the quick.

One caveat, however, it doesn’t have an easy built-in way to scroll in the opposite direction of the default (ie. “Backwards”) which is what our client wanted (at the last minute). We emailed the author and were told that it would take “quite a lot” of changes to make this happen.  The client was breathing down our necks on the tight deadline and we were running out of time, so I jumped in with both feet to hack the thing.

Now I realize this isn’t the “right” way to do it. This is an admitted hack because I didn’t have time to go back and do it correctly. Maybe the original plugin’s author will add the correct functionality or maybe I’ll have time to do it “right” and send it to them. But for now, this will absolutely work.

First, change the default function called when you use the “auto” functionality (line 152):

152

this.moveForward();

- becomes -

152

this.moveBack();

Now tell the position reset functionality that the default position is the sum of the width of all of your elements (line 219):

219

this.$clip[0].scrollLeft = 0;

- becomes -

219

this.$clip[0].scrollLeft = 5904;

The number “5904″ is just the added up width of every element we ended up having in the animation.

It’s that easy!