simplyScroll - a jQuery plugin

This is an archive of the original blog post for this plugin, it should be considered out of date, but is here for prosperity

Announcing my new animation plugin for jQuery: simplyScroll

simplyScroll is a jQuery plugin that can animate (scroll) a set of elements either automatically or manually, horizontally or vertically. It can also accept dynamic image input via a Flickr feed (note not API) or a local JSON source. This plugin can be performance intensive, so speed and framerate are fully configureable to accomodate lower spec systems.

This plugin was inspired by Jan Sorgalla’s brilliant jCarousel, but I needed a simpler, more “Flash” like scroller for a client’s image gallery - and I absolutely didn’t want to have to actually use Flash! It features a cool infinite scroll mode, is fully skinnable and would be able to easily integrate into overlay/image gallery plugins such as Thickbox.

As noted in the intro above, this plugin can be quite performance intensive. However with increased computer power and new browsers like Google Chrome designed from the ground up for faster javascript performance, this kind thing of has (hopefully!) become possible. Netscape 4 users on a 486 need not bother testing this example! More examples are available on the plugin’s page and I will be doing new ones soon.

Hope this is useful, please let me know of any issues/bugs etc at will@logicbox.net or via twitter @logicbox

PS. Apologies for the quickly hacked together wordpress template - will improve soon. Honest!

UPDATE 19/02: I’ve added a new example based on custom HTML code.

Tags: javascript, jQuery, simplyscroll

This entry was posted on Wednesday, February 18th, 2009 at 17:15

21 Responses to “simplyScroll - a jQuery plugin”

Adhamox says:

18/02/2009 at 20:57

Hi Will,
thanks a lot for the awesome piece of work..

just tried working with it and have a quick question.

i am trying to change the dimensions of the images in the clip.

currently you have it set to be 290px.. i need the width of the image to be dynamic and not a static width. i have tried to manipulate the css parameters but the clip was not continuous after that.. it had some gap at the end of the show before the next round.

can you help me please?

thanks
Adham
Schalk Neethling says:

18/02/2009 at 21:55

Awesome plugin. Added an announcement here: http://www.opensourcereleasefeed.com/release/show/simplyscroll-jquery-plugin-released

I would strongly encourage you to sign-up for your free account on opensourcereleasefeed.com and submit future release notices there.

All the best!
Schalk Neethling
Will Kelly says:

18/02/2009 at 22:09

@Schalk great thanks and will do!

@Adham, thanks glad you like it. The plugin needs the element widths (when horizontally scrolling) and heights (when vertically scrolling) to be static so end points and loop (infinite) scrolling mode can be correctly worked out.

However it could be got around by adding up all the widths of your elements and dividing it by the total. Your first element would have to be that exact width to scroll correctly (tip: keep everything even to make it easier!).

Note this wouldn’t fix gap at the end if the last few items are shorter than average so I’ve added an extra option in a new release (1.0.1) called ‘loopOverload’, where you can specify how many extra elements to copy to achieve the seamless effect. Hope that helps!
```
$(function() {
	$("#scroller").simplyScroll({
		autoMode: 'loop',
		loopOverload: 1
	});
});
```
Note: 05/11/10 - The option loopOverload was removed from the plugin in a later release
Adhamox says:

18/02/2009 at 22:36

Thanks will, for getting back to me.
the implementation i am trying to achieve is integrating your script in a php script where thumbnails are generated by the script.. they all have the same height but variable widths.
this is why i needed to remove the width restriction.

hope you can fix it in future releases.
Thanks again for your great efforts.. i love the plugin anyways

regards
Adham
Will Kelly says:

18/02/2009 at 22:56

That will probably not happen for seamless scroll, would be far too difficult. Consider making your thumbnails fixed width!
mikeytown2 says:

20/02/2009 at 09:03

Couldn’t you set jsonImgWidth with the image object?
http://www.w3schools.com/htmldom/dom_obj_image.asp
Will Kelly says:

20/02/2009 at 18:03

Currently as there’s no preloading of images from a JSON source, that is not possible. However will look to implement this in the near future!
Kurt says:

23/02/2009 at 11:42

Hi,

I was looking for a very simple automatic scroller and did one myself. Now I need a manual scroller and I see that this one fits quite well. But how the scroll can be controlled from a jQuery slider instead of buttons? Would be nice to be able to set the scroller position from slider events, but I just began to use jQuery the other day and I am still learning its basics.

The question is: is there an easy way to extend this plug-in so that it will allow control from a jQuery slider?

Regards,
Kurt.-
Will Kelly says:

23/02/2009 at 17:14

This is not planned as it outside the scope of the plugin. I’ve emailed you in response to your follow-up. Thanks for your interest though.
mikeytown2 says:

26/02/2009 at 01:49

just an idea, having this override the non standard html marquee element
http://www.quackit.com/html/codes/html_marquee_code.cfm
http://www.quackit.com/html/codes/stop_marquee.cfm
Will Kelly says:

26/02/2009 at 10:34

Wouldn’t want to encourage the use of that horrible tag! Even better: $(’marqee’).remove();
shashi arya says:

13/03/2009 at 06:50

I was looking vertical scroll for JQuery and it perfectly fits to my needs. To add some fancy to this can i use SmoothScroll js to this. Thanks for the wonderful plugin
Drew says:

23/03/2009 at 10:30

Hi, this is a great plugin and very handy. But I am having some problems using it safari. I can get it to work in firefox, flock and ie but it doesn’t seem to load in safari or opera. Do you have any suggestions?

Cheers
Drew says:

23/03/2009 at 11:06

Also is there a way of making the vertical scroll, scrollable using a mousewheel? Thanks
Eric P says:

24/03/2009 at 01:01

A kick butt jquery plugin! Easy to adapt to a scrolling news feed, or a scrolling headline feed, or a scrolling RSS feed! Saved me much agony Thanks!!!
Sam B says:

30/03/2009 at 08:38

thanks for the sweet plugin! took me some time to implement but it’s working great now, 1 minor thingy which you ‘could’ add is that it calculates the offsetLeft or offsetTop on the itemMax width, so it is possible to have a small margin between the objects and still have the slider working without glitches

but again, thanks!
Will Kelly says:

30/03/2009 at 10:33

Thanks for all the nice comments!

@Sam will take a look at that, thanks.
Matt says:

31/03/2009 at 16:19

Is there a way to have a fixed width on the entire div so that the ul items flow onto more than one line?
Structed says:

10/04/2009 at 13:51

It was soooo easy to get it running thanks so much for your awesome work!

@Matt: What about starting a second scroller? Just an idea: If you want to draw the same pics, change the order in which they appear so you can (somewhat) mimic the effect of a resuming second line:

example drawing:

scroller one: | 1stPic | | 2ndPic | | 3rdPic |
scroller two: | 4thPic | | 1stPic | | 2ndPic |
Adrian says:

11/04/2009 at 14:02

Internet Explorer 6 doesn’t work with this plugin ?
Will Kelly says:

11/04/2009 at 15:04

Thanks Structed!

Adrian, it should work (jQuery supports IE6), it’s just not fully tested.

UPDATE 14/04: IE6 IS working. See the basic example.

Logicbox

simplyScroll - a jQuery plugin

21 Responses to “simplyScroll - a jQuery plugin”