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