Panorama

Andreas Berger Aug 6, 2008

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/

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://www.javascriptsource.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>

Leave a Response

(4 comments)

That's the purpose of the panorama. You would need to adapt the script to do what you want.

Lee Oct 31, 2008

You might check on the author's site.

Lee Oct 31, 2008

Hello,[br /][br /]Is it possible to stop the scrolling at the end of the picture? I do not always make a panorama that is 360 degrees.[br /][br /]I will be glad to hear from you.[br /][br /]Greetings,[br /][br /]Ruud

Ruud Aug 27, 2008

I'm new to JS and am interested not so much in the panorama effect itself, as in the effect of the darkened window in which the image appears. Is this effect covered in tutorials? Thanks for any help.

steve curtis Aug 16, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details