Left2RightBounce : JQuery Image Scrolling
- Posted: 30th September 2009
- Created by: Robert
- Found in: jQuery
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
- Download the source file with comments and easy to read format. jquery.Left2RightBounce.js
- Download the minified source file. jquery.Left2RightBounce.min.js
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
Option | Description |
---|---|
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