Navigation
Taschenrechner
droid
foto
internet
pc
test
untechnisch
 

Panorama mit jQuery

Publiziert in PCNEWS-129, Seite 19, "Panorama mit jQuery"


Moderne Portale arbeiten nicht mehr mit JavaScript allein. Praktisch jede größere Anwendung nutzt die Portabilität und Universalität von jQuery, einer JavaScript-Erweiterung. Viele Funktionen, die man für ein Panorama braucht, sind in jQuery bereits integriert und vereinfachen somit das Panoramaprogramm.

1 Demonstration

Am Beginn der Datei jquery.panorama.js können folgende Parameter verändert werden:
Parameter Anfangswert Werte Beschreibung
viewport_width 600   Breite des Panoramas
speed 20000   Geschwindigkeit
direction left left right Bewegungsrichtung
control_display auto auto yes Steuerungselemente permanent sichtbar
start_position 0   Bei dieser Bildposition startet das Panorama. 1000 entspricht 1000px
auto_start true true false Automatischer Start
mode_360 true true false Am Ende von vorne beginnen oder Schwenk beenden


3 Frédéric Martini

In einer Modifikation von Frédéric Martini gibt es einen zusätzlichen Parameter loop_180, mit dem man unvollständige Panoramen, die also keinen vollständigen Kreis beschreiben, die Bewegungsrichtung am Bildende automatisch umkehren kann.


Parameter Anfangswert Werte Beschreibung
loop_180   true false Wenn mode_360=false, erfolgt mit loop_180=true eine Umkehr der Bewegungsrichtung

4 PCNEWS-Overlays

Die bisher beschriebenen Panoramen benutzen eine Ansicht mit fester Breite. Für eine Darstellung, die immer automatisch die ganze Breite des Browserfensters ausnutzt, wurde der Parameter banner eingeführt. Weiters war es für die PCNEWS-Anwendungen nützlich, das Banner auch mit Overlays zu versehen in die eine Beschriftung eingefügt wird. Das erfolgt durch die weiteren Parameter. Formatierung und Positionierung der Beschriftungselemente erfolgt über die Style-Sheets.

4.1 Logo

Ein Logo wird als freigestellte png-Datei mit einem Link angezeigt.

4.2 Bildbeschreibung

Die Bildbeschriftung erfolgt durch den Namen der Bilddatei, wobei ein eventueller Pfad zu einem Bilderordner und ebenso eine Dateiendung abgeschnitten werden. Der Dateiname wird nach den Dateinamen-Regeln vorverarbeitet.

4.3 Titel

Der Name der angezeigten Html-Datei kann als Titel dieser Seite in das Panorama eingeblendet werden. Der Dateiname wird nach den Dateinamen-Regeln vorverarbeitet.

4.4 Dateinamen-Regeln

Der Name der Html- und/oder der Bilddatei sollte ein möglichst sprechender Begriff und kann sogar ein ganzer Satz sein, wobei die einzelnen Wörter durch Bindestriche verbunden werden. Groß/Kleinschreibung kann verwendet werden. Bei der Anzeige des Dateinamens als Bild oder als Titel werden die Bindestriche entfernt (außer, die Bindestriche wären durch je ein Blank links und rechts eingeschlossen). Groß/Kleinschreibung bleibt erhalten. Der Dateiname Blick-auf-Wien - Simmering.jpg ergibt die Beschriftung Blick auf Wien - Simmering

4.5 Kapitel

Wenn der Dateiname aus zwei Teilen besteht, die durch einen Punkt getrennt sind, kann der erste Namensteil als Kapitel abgetrennt werden und in einer eigenen Zeile vor den Titel geschrieben werden. Der Dateiname Freizeit.Urlaub-2012.htm ergibt Freizeit Urlaub 2012, wobei der Kapitelname Freizeit kleiner, kursiv und mit Zeilenumbruch danach geschrieben wird.

4.5.1 Dateinamen-Behandlung

Wenn der Dateiname die Form Kapitel.Dateiname.html hat, werden "Kapitel" und "Dateiname" ebenso der Name des Bildes in die rechte obere Ecke und auch ein Logo auf dem Bild als Overlay überlagert. 

Parameter Anfangswert Werte CSS Beschreibung
showbanner false true false   Breite des Panoramabildes = Breite des Browserfensters
showlogo false true false panoramaLogoDiv panoramaLogo Anzeige der Datei img/logo.png
logolink   <Url>   Hyperlink am Logo
showtitle false true false panoramaTitleDiv panoramaTitle Anzeige des Dateinamens
splitchapter false true false   Trennung von Kapitel- und Dateinamen
showcaption false true false panoramaCaptionDiv panoramaCaption Anzeige des Bildnamens

5 Funktionsweise

In die eigene Html-Datei wird das gewünschte Panoramabild wie jedes andere Bild an der gewünschten Stelle eingefügt. Diesem Bild wird als class-Attribut class="panorama" vergeben. width und height sollten angegeben werden. Wenn man width undheight nicht kennt, lässt man beide weg, dann bestimmt das Panorama-Programm diese Größen selbst.

Was also der Benutzer des Programms jQuery-panorama.js einzugeben hat ist folgende Zeile:

1
<img src="img/wien-simmering.jpg" class="panorama" width="1568" height="114" />

Damit sich aber das Bild bewegen kann, wird es bei der Initialisierung der Seite vom Panorama-Programm "gewrapt", d.h. in weitere Html-Tags eingepackt. Im Endeffekt schaut diese Konstruktion so aus:
1
2
3
4
5
<div class='panorama-viewport'>
  <div class='panorama-container'>
    <img src="img/wien-simmering.jpg" class="panorama" width="1568" height="114" />
  </div>
</div>
Das Bild ist im Abschnitt panorama-container verpackt und dieser Abschnitt inklusive dem darin enthaltenen Bild wird vom Panorama-Programm bewegt. Damit der Benutzer aber nur einen definierten Ausschnitt aus dem Gesamtbild sieht, wird der bewegte Abschnitt panorama-container in den eigentlich sichtbaren und fest stehenden Abschnitt panorama-viewport verpackt.

Die Overlay-Elemente werden ebenso programmgesteuert im Anschluss an den Abschnitt panorama-viewport angehängt. Es sind dies die Abschnitte panorama-control (Bildsteuerung), panoramaLogoDiv (enthält das Logo und den zugehörigen Link),panoramaCaptionDiv (enthält die Bildunterschrift), panoramaTitleDiv (enthält den Bildtitel).

6 Bild

Das Bild soll ein 360-Grad-Panoramabild sein, d.h. linker und rechter Bildrand sollten nahtlos aneinander stoßen. In diesem Fall ergibt die Betriebsart mode_360=true einen perfekten Rundumblick.

Wenn das Bild aber nur der Teil einer Rundumsicht ist, kann man sich so helfen:

  • Man setzt mode_360=false, dann bewegt sich das Bild bis zum Ende und bleibt dann stehen. Zusätzlichen kann manloop_180=true setzten, dann wird aus der einmaligen Bewegung eine Pendelbewegung.
  • Man kann das Bild horizontal spiegeln und die Spiegelung an das Bild anhängen. Dann gibt es auch einen nahtlosen Übergang, wenn auch ein bisschen geschwindelt. 

6.1 Bild ändern

Wenn man das Originalbild img/atelier.jpg ändern will, muss man es lediglich diese eine Zeile ändern:
1
<img src="img/atelier.jpg" class="panorama" width="2642" height="375" />
auf
1
<img src="img/wien-simmering.jpg" class="panorama" width="1568" height="114" />
Wichtig ist der Parameter class="panorama". Alle Bilder auf einer Seite, die diesen Parameter enthalten, werden als Panorama mit den gewählten Grundeinstellungen der Datei jquery.panorama.js angezeigt. Die Abmessungen des Bildes erfährt man entweder aus dem Bildbearbeitungsprogramm oder über Eigenschaften -> Details -> Abmessungen des Bildes im Windows-Explorer.

7 Installation

Das Panorama-Programm ist auf drei Ordner aufgeteilt.
Ordner Datei
css jquery.panorama.css
img logo.png Wien-Simmering.Jpg
js jquery.js jQuery.panorama.js
Wenn das Panorama in ein bestehendes CMS eingebunden wird, existieren dort möglicherweise diese Ordner schon und man kann die Dateien in die gleichnamigen Ordner kopieren. Bei Systemen, die jQuery schon enthalten, findet sich im Kopf jeder Html-Seite ein Link zu der betreffenden Datei und man muss diese Zeile nicht übernehmen.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.panorama.js"></script>
<style  type="text/css">
    body {
        background: #595959;
        text-align: center;
        margin:0px;
        border:0px;
    }
    h1 {
        color: white;
        margin-bottom: 2em;
        font-family: Verdana;
        font-weight: normal;
        font-size: 25px;
    }
    #page {
        text-align: center;
        color: white;
    }
    #page a {
        color: white;
    }
    #page .panorama-viewport {
        border: 20px solid #414141;
        margin-left: auto;
        margin-right: auto;
    }
    */
</style>
</head>
<body>
<div id="page">
 
    <h1>jQuery simple panorama viewer modifiziert von Frédéric Martini,
    mit Änderung der Bewegungsrichtung,
    ergänzt mit Overlays für PCNEWS-Anwendungen</h1>
 
    <img id="panoFF" src="img/wien-simmering.jpg" class="panorama" width="1568" height="114" />
 
</div>
</body>
</html>

Wenn daher in einer Html-Datei die drei Dateien jquery.panorama.css, jquery.js und jQuery.panorama.js inkludiert werden, genügt ein Image-Tag mit dem class-Attribut "panorama", um das Panorama einzubinden.

Updated on Nov 20, 2012 by Franz Fiala (Version 7)