Warning: filemtime() [function.filemtime]: open_basedir restriction in effect. File(/home/www/web144/html/attachments/058_panorama.20081005.de.zip) is not within the allowed path(s): (/var/www/clients/client396/web1968/web:/var/www/clients/client396/web1968/tmp:/var/www/web144.cyconf.de/web:/srv/www/web144.cyconf.de/web:/usr/share/php5:/tmp:/usr/share/phpmyadmin:/etc/phpmyadmin:/var/lib/phpmyadmin:/usr/share/php:/home/www/web144/html:/home/www/web144/tmp) in /var/www/clients/client396/web1968/web/components/com_attachments/helper.php on line 477

Warning: filemtime() [function.filemtime]: open_basedir restriction in effect. File(/home/www/web144/html/attachments/058_panorama.20081005.en.zip) is not within the allowed path(s): (/var/www/clients/client396/web1968/web:/var/www/clients/client396/web1968/tmp:/var/www/web144.cyconf.de/web:/srv/www/web144.cyconf.de/web:/usr/share/php5:/tmp:/usr/share/phpmyadmin:/etc/phpmyadmin:/var/lib/phpmyadmin:/usr/share/php:/home/www/web144/html:/home/www/web144/tmp) in /var/www/clients/client396/web1968/web/components/com_attachments/helper.php on line 477
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
- Fehler bei Verwendung einer Doctype-Deklaration behoben
20080830

Browserkompatibilität:

Das Javascript ist bislang wie folgt getestet:

 WindowsMac OSXLinuxFreeBSD
MSIE Internet Explorer
6    
MSIE Internet Explorer 7.0J   
MSIE Internet Explorer 8    
FireFox Firefox
2.0.0.16J   
FireFox Firefox
3.0.1J   
Opera Opera
9.25J   
Safari Safari
3.11J   

Beispiel (in einem Inline-Frame angezeigt):

Lizenz:

Kostenlos, solange die Copyrighthinweise im Quelltext an Ort und Stelle verbleiben.
Keine Haftung, keine Garantie!

Showcase:

20081116:
Passend zur Weihnachtszeit hat John Brenner das Panoramascript für seine Bedürfnisse umgebaut. Es scrollt jetzt nicht mehr von links nach rechts sondern von oben nach unten und zaubert Schneeflocken in seine Aufnahme einer Winterlandschaft.

Zu sehen gibt es das unter: John Brenners Snowfall-Script

Danke fürs zeigen
Andreas Berger

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.


Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung, auch Berichte über Erfahrungen mit anderen Browsern/Betriebsystemen sind immer willkommen.

Das ZIP-Archiv enthält eine Beispielseite, alle konfigurierbaren Parameter sind im Script erklärt.

Downloads:
DateiZuletzt bearbeitet
Diese Datei herunterladen (panorama.20081005.de.zip) panorama.20081005.de.zip1970-01-01
Diese Datei herunterladen (panorama.20081005.en.zip) panorama.20081005.en.zip1970-01-01
Zuletzt aktualisiert am Samstag, den 14. Februar 2009 um 09:46 Uhr
 
Kommentare (3)
Hilfe! Habe versucht die Pfeile durch zwei Bilder zu ersetzen. Auf Mac läuft es, auf PC nicht. Hilfe ... :-)
3 Mittwoch, den 08. Juni 2011 um 08:59 Uhr
Tobias Freitag

/***************************************************************************************
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]

@Tobias Freitag
Mittwoch, den 08. Juni 2011 um 20:49 Uhr
A. Berger

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

Auto change direction
2 Freitag, den 03. Juni 2011 um 00:25 Uhr
Marlon

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

@Marlon
Montag, den 06. Juni 2011 um 19:56 Uhr
A. Berger

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

Auto Start
1 Donnerstag, den 02. Juni 2011 um 13:36 Uhr
Marlon

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

@Marlon
Donnerstag, den 02. Juni 2011 um 21:05 Uhr
A. Berger

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

Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 35 Gäste online