| Javascript: panorama |
| Written by Andreas Berger | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Saturday, 19 April 2008 07:48 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Updated 20081005!The JavaScript "panorama" provides an alternative for those, who - for whatever reason - want to avoid using Flash, Java or a movie player for the presentation of panoramic images. Display:The Javascript shows inside a div-container an adjustable section of the panoramic-image. Beyond this section 2 arrows are shown. They allow to scroll the image to the left or to the right on mouseover. On pageload the contents of the given div-container gets overwritten. This behaviour gives you the possibility to display a static image or an advice like - for example - "the panorama needs javascript" for visitors with javascript disabled. Functionality:The script works thinkable easy. From a surrounding div-container only a certain section is shown. This is done by using "clip:rect". Within the div-container the panoramic-image - three of a kind side by side - is scrolled. As soon as a certain deflectain is exceeded, the next step displaces the the three images one step-width in the direction currently scrolled to and one complete image-width into the other direction. That's all. Installation:Create a div-container on your page an define an id (id="favored name"). This name tell the script as the target for your panorama. The container may be formatted as you want using CSS. All parameters are adjustable within the script. Current Version:20081005 Browser-compatibility:The JavaScript is till now tested as follows:
Demo (shown inside an inline-frame):
License:Free to use as long as the copyright-notice in the sources stays intact. Showcase:20081116:
Miscellaneous: I am happy about everybody who gives me a link back to www.bretteleben.de on his website, this way helping me to popularize the script. The JavaScript "panorama" is till now listed in different JavaScript - resources, including the largest - as far as i know - JavaScript resource: HotScripts. The ZIP-archive contains a demo-page, all configurable parameters are commented inside the script.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Last Updated on Saturday, 14 February 2009 09:46 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Internet Explorer 
Firefox
Opera
Safari
Hollo und guten Morgen,
an dieser stelle herzlichen dank an Andreas Berger für seine schnelle und kompetente Hilfe und Unterstützung.
mfg Dietmar Claus
Hallo in die unde,
als absoluter neuling in html, java usw. habe ich noch eine menge fragen.
die bsp. sind verständlich und selbst ich habe sie mit viel probieren bei mir zu laufen gebracht.
kann iman das panorama automatisch starten, d.h. ohne immer af die zu zielen ?
wenn ja, was muß ich wo ändern ???
ich habe einiges hin u. her probiert, aber auf meinem rechner ruckt das panorama ständig
gibt es dazu eine optimale einstellung ??
danke im vorfeld für die hilfe
Dietmar Claus
Hallo Dietmar!
Um das Panorama automatisch starten zu lassen könntest Du die Datei panorama.js wie folgt abändern:
vorher:
function shownow() {
document.getElementById(divid).style.height=panhei+"px";
document.getElementById(divid).innerHTML=tp;
}
nachher:
function shownow() {
document.getElementById(divid).style.height=panhei+"px";
document.getElementById(divid).innerHTML=tp;
noscroll=false;
sr(); //Anmerkung: oder sl(); für die andere Richtung
}
Um zusätzlich die Pfeile auszublenden sollten die Zeilen Nummer 52 und 53 mit jeweils zwei Schrägstrichen am Beginn der Zeile auskommentiert werden:
//tp=tp+" div id='left' a href='javascript://'
//tp=tp+"div id='right' a href='javascript://'
Was das Ruckeln angeht - da hilft nur probieren. Die optimale Einstellung ist abhängig von der Kombination aus Schrittweite, Geschwindigkeit und nicht zuletzt der Größe des Bildes.
Gruß
Andreas
Please download the script from this page. It comes with a working sample.
You don't have to change anything in your stylesheet. What you have to do in your page is to insert one line in the head (the link to the script) and to set the identity of the div-container you want to hold the script.
As said - please check the sample.
If you have problems with it, please provide a link to your page and I will have a look at it. I'm sure we will get this up and running for you.
Best regards
Andreas
When I originally saw this script on http://javascript.internet.com/image-effects/panorama.html I first tried this
#pano {
position:absolute;
left:359px;
top:0px;
width:641px;
height:308px;
z-index:2;
visibility:visible;
'>");
}
But I couldn't get the pic in the div.
Then I tried this:
#panorama #pano {
position:absolute;
left:359px;
top:0px;
width:641px;
height:308px;
z-index:2;
visibility:visible;
'>");
}
Now the pic is in the div, but I lost the ability to scroll.
I would really appreciate some help with this updated script. I know my problem is in the css.
I´m currently working on an optional perspective view for my own script, but I have to concede without and grudge that your´s is - especially in terms of math - far more progressive than mine ever will be. Excellent!
Thanks for showing.
Andreas
I've built a pure JS panorama viewer as well, which incorporates perspective morphing as well. It's much slower than your image scroller, but it looks far more realistic. Check out my site!
http://code.google.com/p/jspanoviewer
Best,
Bart
I am affraid to send it, because I am not very far in the process of making it..It is very kind, maybe I do it when I have tried some more for my self :) This is funny but very time consuming!! Good Weekend to you! :)
Best, Linda
Is the panorama centered now? If not, you may still pack your page in a zip, attach it to a mail and send it to me.
About the arrows, they are created at line 49 and 50 of the panorama.js. To show images, replace "& lt;" and "& gt;" with the image-tags. Be careful when setting quotation marks.
Kind Regards
Andreas
In your panorama, can I change the two blue arrows under the picture? I've tryed to use; img src='xx'; , but it dosn't work.. Is it possible anyway?
Best, Linda :)