Home Javascript Panorama
Main Menu
Most Read
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

If you like the products on these pages, your support is highly appreciated. Thank you very much!

Amount: 

Latest Items
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
Warning: 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(): 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
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
- corrected bug when using doctype-declaration
20080830

Browser-compatibility:

The JavaScript is till now tested as follows:

Windows Mac OSX Linux FreeBSD
MSIE Internet Explorer
6
MSIE Internet Explorer 7.0 J
MSIE Internet Explorer 8
FireFox Firefox
2.0.0.16 J
FireFox Firefox
3.0.1 J
Opera Opera
9.25 J
Safari Safari
3.11 J

Demo (shown inside an inline-frame):

License:

Free to use as long as the copyright-notice in the sources stays intact.
Provided as is, no warranty, no liability!

Showcase:

20081116:
Consistent with Christmas season, John Brenner modified the Panorama - script to fit his needs. Instead of scrolling left to right it now scrolls top down and produces charming snowflakes over his winter landscape.

To be found at: John Brenners Snowfall-Script

Thanks for showing John
Andreas Berger

 

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.

If you have questions or suggestions about this JavaScript, please use the comment-function. Records about the behavior of this script with further browsers/operating systems would be appreciated.

The ZIP-archive contains a demo-page, all configurable parameters are commented inside the script.

Downloads:
FileLast Modified
Download this file (panorama.20081005.de.zip) panorama.20081005.de.zip1970-01-01
Download this file (panorama.20081005.en.zip) panorama.20081005.en.zip1970-01-01
Last Updated on Saturday, 14 February 2009 09:46
 
Comments (3)
Hilfe! Habe versucht die Pfeile durch zwei Bilder zu ersetzen. Auf Mac läuft es, auf PC nicht. Hilfe ... :-)
3 Wednesday, 08 June 2011 08:59
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
Wednesday, 08 June 2011 20:49
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 Friday, 03 June 2011 00:25
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
Monday, 06 June 2011 19:56
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 Thursday, 02 June 2011 13:36
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
Thursday, 02 June 2011 21:05
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

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

bretteleben.de

Add to circles

Who's Online
We have 67 guests online