| Javascript: Panorama |
| Geschrieben von: Andreas Berger | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Samstag, den 19. April 2008 um 07:48 Uhr | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
Updated 20081005!Das PanoramaScript bietet auf Basis von JavaScript eine Alternative für all jene, die aus welchen Gründen auch immer, Flash, Java oder einen Videoplayer für ihre Panoramabilder nicht einsetzen möchten. Darstellung:Das Script stellt in einem DIV-Container einen beliebig großen Ausschnitt eines Panoramabildes dar. Unterhalb des Ausschnittes werden zwei Pfeile angezeigt, mit denen beim Mouseover das Panorama nach links oder rechts gescrollt werden kann. Beim Laden der Seite wird der Inhalt des ausgewählten DIV-Containers mit dem Panorama überschrieben. Das bietet die Möglichkeit, einen Ausschnitt des Paoramas als Bild statisch einzubinden und damit einen Fallback für Besucher mit deaktiviertem Javascript anzubieten. Auch ein Hinweistext wie z.B. "Das Panorama erfordert Javascript" ist vorstellbar. Funktionsweise:Die Funktionsweise des Scripts ist denkbar einfach. Von einem umgebenden DIV-Container wird über "clip:rect" nur ein Ausschnitt angezeigt. Dahinter wird das eigentliche Panoramabild - um die Übergänge von einem Bild zum anderen zu verbergen 3x nebeneinander - vorbeigezogen. Wird eine bestimmte Auslenkung nach links oder rechts erreicht, dann werden die drei Bilder mit dem nächsten Schritt um eine Schrittweite in Scrollrichtung und gleichzeitig um eine ganze Bildbreite entgegengesetzt der Scrollrichtung versetzt. Mehr ist nicht dahinter. Einrichtung:Erstellen Sie in Ihrer Seite einen DIV-Container, benennen Sie ihn (id="gewünschter Name") und geben Sie diesen Namen im Script als Ziel des Panoramas an. Der Container kann über ein Stylesheet beliebig formatiert werden. Alle weiteren Parameter sind über das Script einstellbar. Aktuelle Version:20081005 Browserkompatibilität:Das Javascript ist bislang wie folgt getestet:
Beispiel (in einem Inline-Frame angezeigt):
Lizenz:Kostenlos, solange die Copyrighthinweise im Quelltext an Ort und Stelle verbleiben. Showcase:20081116: Sonstiges:Wenn jemand Gelegenheit findet, auf seiner Webseite einen Link auf www.bretteleben.de zu setzen, dann freut mich das natürlich, weil es mithilft, das Script bekannter zu machen. Bislang ist das Javascript "panorama" in verschiedenen JavaScript - Resourcen verlinkt, darunter auch dem größten mir bekannten JavaScript - Archiv: HotScripts. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||
Internet Explorer 
Firefox
Opera
Safari| Datei | Zuletzt bearbeitet |
|---|---|
 panorama.20081005.de.zip | 2008-10-05 |
| panorama.20081005.en.zip | 2008-10-05 |
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 :)