Image Effects : Panorama / The JavaScript Source

General

This script provides a panorama view of an image, without using Flash or Java. Scrolls to the left and to the right. Easy to implement.

Panorama Demonstration

Notes

Created by: Andreas Berger
Web Site: http://www.bretteleben.de/
Posted: August 6, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: panorama.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Andreas Berger | http://www.bretteleben.de/ */

/***************************************************************************************
Copyright (C) 2008 Andreas Berger
This script is made by and copyrighted to Andreas Berger - andreas_berger@bretteleben.de
It may be used for free as long as this msg is intact!
****************************************************************************************
Version 20080501
***************************************************************************************/

//*****parameters to set*****

impad='pic.jpg'; //the path to your panorama-pic
imwid=1020; //the width of your pic
imhei=100; //the height of your pic
poslef=25; //the left position of the panorama on your page
postop=25; //the top position of the panorama on your page
panwid=400; //the width of the shown area
panhei=100; //the height of the shown area
//if it differs from the image-height, the image gets scaled in length and height
speed=40; //timeout between moves; set it lower to increase speed
move=5; // movement at one step in pixel

//*****nothing more to do, have fun :)

tim=0;noscroll=true;
imw=imwid*panhei/imhei;imh=panhei;imstart=panwid/2-imw*1.5;
jumpa=panwid/2-imw*2.5;jumpwida=imw-move;
jumpb=panwid/2-imw/2;jumpwidb=imw+move;
conwid=15;contop=postop+(imh*1)+(10*1);
conlefa=poslef+(panwid/2)-conwid;conlefb=poslef+(panwid/2);

function sr(){
	if(!noscroll){
	now=parseFloat(document.getElementById("pano").style.left);
  if (now<=jumpa){now+=jumpwida;} else{now-=move;}
  document.getElementById("pano").style.left=now;
	tim=setTimeout("sr()",speed);}}

function sl(){
	if(!noscroll){
	now=parseFloat(document.getElementById("pano").style.left);
  if (now>=jumpb){now-=jumpwidb;} else{now+=move;}
  document.getElementById("pano").style.left=now;
	tim=setTimeout("sl()",speed);}}

function stop(){clearTimeout(tim); noscroll=true}
document.write("<div id='panorama'>");
document.write("<div id='pano' style='position:absolute; left:"+imstart+"px; top:0px; width:"+imw*3+"px; height:"+imh+"px; z-index:2; visibility:visible;'>");
document.write("<table><tr><td nowrap><img src='"+impad+"' width="+imw+"px height="+imh+"px><img src='"+impad+"' width="+imw+"px height="+imh+"px><img src='"+impad+"' width="+imw+"px height="+imh+"px></td></tr></table>");
document.write("</div></div>");
document.write("<div id='left'><a href='javascript://' onmouseover='noscroll=false; sl()' onmouseout='stop()'><</a></div>");
document.write("<div id='right'><a href='javascript://' onmouseover='noscroll=false; sr()' onmouseout='stop()'>></a></div>");
document.write("<style>");
document.write("body { margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;width:100%;height:100%;overflow:hidden;}");
document.write("#panorama {position:absolute; left:"+poslef+"px; top:"+postop+"px; width:"+panwid+"px; height:"+panhei+"px; z-index:1; clip:rect(0px,"+panwid+"px,"+panhei+"px,0px); overflow:hidden;}");
document.write("#left {position:absolute; left:"+conlefa+"px; top:"+contop+"px; width:"+conwid+"px; z-index:1; text-align:right;}");
document.write("#right {position:absolute; left:"+conlefb+"px; top:"+contop+"px; width:"+conwid+"px; z-index:1; text-align:left;}");
document.write("#right a, #left a {text-decoration:none;}");
document.write("</style>");

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="panorama.js"></script>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

User Comments

3. From: Ruud
08/27/2008 18:11:38

4. From: Lee (Admin)
10/31/2008 15:15:34

1. From: steve curtis
viewing window for panorama effect
08/16/2008 08:58:50

2. From: Lee (Admin)
10/31/2008 15:09:37

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

User Comments

3. From: Ruud08/27/2008 18:11:38

4. From: Lee (Admin)10/31/2008 15:15:34

1. From: steve curtisviewing window for panorama effect08/16/2008 08:58:50

2. From: Lee (Admin)10/31/2008 15:09:37

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

3. From: Ruud
08/27/2008 18:11:38

4. From: Lee (Admin)
10/31/2008 15:15:34

1. From: steve curtis
viewing window for panorama effect
08/16/2008 08:58:50

2. From: Lee (Admin)
10/31/2008 15:09:37