| 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 |
/***************************************************************************************
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 20081005
***************************************************************************************/
//erforderliche parameter
divid="panorama"; //die id des div containers der das panorama enthalten soll
impad='punkt1.jpg'; //pfad zum bild
impad1='pfeil_links.gif'; //pfad zum bild
impad2='pfeil_rechts.gif'; //pfad zum bild
imwid=2847; //breite des bildes in pixel
imhei=341; //höhe des bildes in pixel
panwid=850; //breite des anzeigebereichs in pixel
panhei=341; //höhe des anzeigebereichs in pixel
//weicht die anzeigehöhe von der höhe des bildes ab, dann wird dieses entsprechend proportional skaliert
speed=50; //timeout zwischen den einzelnen bewegungen, je kleiner der wert desto schneller das scrollen
move=5; // schrittweite je bewegung in pixel
//das wars auch schon, viel spass :)
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;panhei+=30;contop=(imh*1)+(10*1);
conlefa=panwid/2-conwid;conlefb=panwid/2
[code]
Hallo Tobias!
Die hier verwendete Kommentarkomponente ist für das Posten von Quelltext nicht wirklich geeignet weil er teilweise ausgeführt wird, aber wenn Du einen Link zur Seite mit dem Panorama postest, dann schau ich mir das gerne an.
Gruß
Andreas
Andreas, thank you for the suggestion. I have that working. Now, what would be super is if there was a way to autoscroll to right side of the image, stop, and then automatically change direction and repeat. This may require some autodetection at the edge of the image. This is most useful for non-360 degree images.
Sorry, buy my German is not good so I can't respond in English.
All the best from the US!
Marlon
Hi Marlon!
Yes I know, but up till now this functionality is not part of the script. Anyway, as long as the copyright notice stays intact you are of course invited to modify it to fit your needs. It would be highly appreciated if you could share your modified version.
Best regards
Andreas
THanks for the wonderful script. Is there a way to do an auto start on pageload? I'd like to the image to start scrolling when the user lands on the page.
thanks,
marlon
Hi Marlon!
You can modify the script panorama.js.
Comment out lines 49 and 50 by inserting "//" at the start of the lines.
Add "noscroll=false; sr();" or "noscroll=false; sl();" at the end of line 43 before!!!! the closing curly bracket "}".
Best regards
Andreas
Hallo,
bin gerade auf dieses Skirpt gestossen und ich persönlich finde es sehr gut. Das mit dem Autosrolling funktioniert auch nur würde ich mir wünschen, dass es, wenn es rechts ankommt wieder nach links geht.
Ist es eigentlich möglich den Startpunkt zu wählen? also zum beispiel ganz links des Bildes? Bei mir startet das Skript immer in der Mitte.
Vielen Dank für Ideen und Hilfen
mfg
Sascha
Hallo Sascha!
Es tut mir leid, aber bislang ist Beides nicht möglich.
Gruß
Andreas
Hallo Andreas
Vielen Dank für das Script. Klein, aber fein.
Aber wie bekomme ich das ganze zentriert? Die Erweiterung mit : div "align="center"
funktiniert leider nicht?
Donatien
Hallo Andreas
Ich habs mit margin-left geregelt, funktioniert einwandfrei :-)
Hallo Donatien!
Das lässt sich pauschal nicht beantworten, denn wie Du den DIV-Container, der das Panorama enthält, positionierst ist vom Layout Deiner Seite abhängig. Wenn Du einen Link zur Seite postest, dann schaue ich mir das gerne an.
Zu Deinem align="center", wenn das aus dem Quelltext kopiert ist, dann ist das einleitende Anführungszeichen irgendwie zu viel.
Gruß
Andreas
Hallo Andreas,
vielen Dank für das hervorragende Panorama-Javascript!
In der panorama.js muss man den Pfad zum Bild angeben:
impad='panorama.jpg'; //pfad zum bild
Gibt es eine Möglichkeit, auf elegante Weise auch zwei oder mehrere Panoramen in eine Website einzubauen? (Momentan kann ich nur 1 einziges Jpg über die panorama.js einfügen.)
Vielen lieben Dank
Thomas
Hallo Thomas!
Bislang nicht, aber das ist eine gute Anregung. Danke.
Gruß
Andreas
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