Click to send mail
I like to take panorama shots of everywhere I go when I'm on vacation. The problem arose that there's no real good way to show a 9000+ pixel long photo on the web, without alot of side scrolling, and I hate side scrolling. Of course if it's a 360° panorama, you could connect the ends and make a flash/quicktime 3D viewer, but the software needed to do that costs alot of money. To fix that problem, I wrote PanoScroll, a jQuery plugin that will scroll the background of a div for you.
Download the code View DemoFirst download the code, and include it in you're page:
<link type="text/css" rel="stylesheet" href="panoScroll.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.panoScroll.js"></script>
To save http calls, you can copy the CSS into you're main CSS file if you want.
#demo1 { background:url(http://steve.deadlycomputer.com/img/lodgeCrop.jpg) repeat-x top left; height:120px; }
In your CSS file you must declare the background image and you must repeat it. Anything else you want to add to the style of the div is up to you, but those two are required for right now.
After you have in included, just call it on the div whose background you want to scroll. It's important that currently you must use an ID, and you must also add the name of the ID in the options like so:
$(document).ready(function() {
$('#demo1').panoScroll({name: "demo1"});
});
Because of the way I originally coded this, that's how the direction controls work, I hope to have this fixed in future releases though.
The above code will add left, right, and pause controls to the div demo1. You can then control the direction of scrolling by pressing the buttons.
You can control a few other aspects of the scrolling by using the other options
$('#demo2').panoScroll({name: "demo2", direction: "up", scrollSpeed: "3s", originalPos: 150, numPX: 25});
You can set it to automatically start scrolling on page load with the following code:
$('#demo3').panoScroll({name: "demo3", direction: "right", auto: true});
These are the options that you can call. The only required one is the name
| Option | Required | Type | Default | Value | Description |
|---|---|---|---|---|---|
| name: | yes | string | null | name of id attached to | This is the name of the id used. |
| direction: | no | string | left | left, right, up, down | Used to say which direction the background image will scroll |
| scrollSpeed: | no | int/string | 60ms | any integer | Controlls the speed at which the background image will scroll. You can use the following suffexes:
|
| originalPos: | no | int | 0 | any integer | Controlls the starting position of the background image |
| numPx: | no | int | 1 | any integer | Controlls the number of pixles to move the background at a time. |
| auto: | no | boolean | false | true/false | If set to true, it will automatically scroll the background of the given div, with the given options |
PanoScroll is licensed under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or higher.http://www.gnu.org/licenses/