jQuery - Left2RightBounce : JQuery Image Scrolling

30
Sep

Image Scrolling

The concept of this plugin was to create an image scroller that can move to the right and then back to the left. The ones that were out there were a bit buggy when the items were travelling slow and went outside the contaniners. This is pretty much a direct replacement for liScroll.js which I've seen used a fair share of sites.

How to implement

Source File

HTML Required

Basically you need a ul or ol list with a class or id to define it. Example source (taken from my website on the Portfolio Page):

<ul id="featured-images">
<li>
<a href="/gallery-image/37/image-37/" title="Image 37">
<img src="/uploads/images/thumb_rta2086.jpg" alt="Image 37" />
</a>
</li>
<li>
<a href="/gallery-image/69/halo-3-compilation/" title="Halo 3 compilation - decided to test the use of styled brushes to create the image. Then threw in the Halo 3 pictures I had at the time.">
<img src="/uploads/images/thumb_1250163154halo3_bg_diffuse.jpg" alt="Halo 3 compilation" />
</a>
</li>
<li>
<a href="/gallery-image/112/pdp-drum-kit/" title="PDP drum kit - above shot. With a bounce flash.">
<img src="/uploads/images/thumb_drums-above-shot.jpg" alt="PDP drum kit" />
</a>
</li>
<li>
<a href="/gallery-image/157/duck-flapping-it\s-wings/" title="Duck flapping it's wings">
<img src="/uploads/images/thumb_pinjara166.jpg" alt="Duck flapping it's wings" />
</a>
</li>
<li>
<a href="/gallery-image/87/sword-pic-2/" title="Sword pic 2">
<img src="/uploads/images/thumb_sword_pitchup0002.jpg" alt="Sword pic 2" />
</a>
</li>
<li>
<a href="/gallery-image/72/cartoonised-rob/" title="Cartoonised Rob - experimented with shapes and path drawing.">
<img src="/uploads/images/thumb_rob_cartoon_v1.jpg" alt="Cartoonised Rob" />
</a>
</li>
</ul>

CSS

The main styling is to float the li tags and to hide the overflow of the containers. Example styling (from website again):

#featured-images {list-style: none; height:140px; width:1050px; overflow:hidden; margin:35px;}
#featured-images li{position:relative; height: 160px; _width:100px; min-width:100px; margin:0 5px; float:left;}
#featured-images img{border:2px solid #fff;}

/* Generated classes by the Left2RightBounce plugin */
.scrollcontainer {width:982px; overflow:hidden; height:145px; clear:both; display:block;}
.scrollcontainer .mask{position:relative; overflow:hidden; height:145px; width:982px;}
ul.scrolltext{position:relative; display:inline-block;}
ul.scrolltext li{position:relative; float:left;}

Javascript

It has been tested to run with jQuery v1.3.2. So include the jQuery source and the plugin as well as initialise the plugin to the correct list.

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.Left2RightBounce.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
//set the featured images scroller
$("ul#featured-images").Left2RightBounce();
});
</script>
Other Settings

You can specify the speed. The default value 0.04. Example of setting the speed is:

$("ul#featured-images").Left2RightBounce({travelocity: 0.05});

More settings will be on its way soon if I get time and effort.

Features

  • When the mouse hovers over any listing item it will stop the scrolling.
  • After the mouse moves away from the listing item it will resume scrolling but in the opposite direction to what it was doing.

Browser Compatibility

PC

Works

  • Firefox 3 -> 3.5
  • IE 8
  • Safari 4 - a little buggy, sometimes doesn't render properly on the first go without refreshing the page...
  • Google Chrome - Fixed recently!
  • FireFox 2 - Fixed recently

Options

OptionDescription
travelocity:default is 0.04.
Sets how fast the elements move.
switch_direction_on_hover:(true/false) default is true.
This just defines whether to switch direction of the scroll after hovering over any of the elements in the specified container.

Change Log

Version 1:

  • As is

Version 1.01:

  • Added new setting to control which direction the slides will continue after hover.
    • switch_direction_on_hover: (true/false) default is true