gbWindow v1.0

gbWindow ist nichts anderes als eine Lightbox. Durch klick auf einen Link öffnet sich ein Fenster, das vor einem abgedunkelten Hintergrund auf einer Webseite angezeigt wird. Das Fenster kann Bilder oder Flash-Anwendungen darstellen. gbWindow eignet sich als Bilder-Galerie oder als Popup-Fenster.

Demo

» gbWindow Demo herunterladen

Einbinden

1. Laden Sie die benötigt Daten » hier herunter.
2. Binden Sie die JavaScript Dateien in Ihrer Seite ein.
   <script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript" src="gbwindow.js"></script>
3. Legen Sie Links an, die das Fenster öffnen soll. Vergeben Sie den Links einen class-Tag, title-Tag (optional, dieser Text wird im Fenster angezeigt) und rev-Tag (Maße für Flash -> Breite x Höhe z.B. rev="400x300")
4. Sie können der Klasse noch Optionen (optional) zuweisen, die der Klasse übergeben werden soll.
   <script type="text/javascript">
var gbWindowOpt = {
handleclass: '.gbwindow',
popup: null,
alpha: 0.8,
durationIn: 'normal',
transitionIn: Fx.Transitions.Expo.easeIn,
durationOut: 'short',
transitionOut: Fx.Transitions.Expo.easeOut,
closeImg: 'close_window.jpg',
closeTitle: 'Schliessen',
nextTitle: 'Weiter',
prevTitle: 'Zur�ck'
}
</script>
5. Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.
6. Das Aussehen des Fensters können Sie per CSS einstellen.
   <style type="text/css">
#overlay {
background: #333;
}
#filecontainer {
top: 80px;
}
#outline {
background: #fff;
color: #000;
padding: 10px;
}
#bottom {
padding: 10px 0 0 0;
}
#closewindow {
font-size: 0.7em;
font-weight: bold;
text-align: right;
padding: 0 0 0 8px;
border-left: 1px solid #333;
}
#pagerinfo, #pagerprev {
margin-right: 4px;
}
a#pagernext:hover, a#pagerprev:hover, a#closefile:hover {
color: #ff0000;
}
#info {
font-size: 0.7em;
text-align: left;
}
</style>

Erläuterung

• handleclass
  Geben Sie hier den Klassennamen an, den Sie für die Links vergeben haben. Verwenden Sie dafür die CSS Syntax. Alle gefundenen Links, werden in einem Array notiert.
  Z.B. '.gbwindow'
• popup
  Beim aufruf einer Seite, kann sofort das Fenster geöffnet werden. Vergeben Sie dafür eine Nummer, die der Array Position entspricht.
  Z.B. 0=[0] oder null für kein öffnen des Fensters
• alpha
  Dieser Wert (von 0 bis 1) stellt die Transparenz des Fensters ein.
  z.B. 0=durchsichtig oder 1=undurchsichtig
• durationIn und durationOut
  Einstellung für die Geschwindigkeit der Animation.
  Z.B. 'short', 'normal', 'long' oder eine Zahl (1=1ms, 100=100ms)
• transitionIn und transitionOut
  Diese Einstellung gibt den Ablauf der Animation an.
  Mehr dazu finden Sie bei » MooTools
  Z.B. Fx.Transitions.Expo.easeIn, Fx.Transitions.Linear.easeIn
• closeImg (optional)
  Sie können ein Bild für das Schliessen des Fensters vergeben. Tragen Sie dazu den Pfad ein, sonst wird der Text aus closeTitle verwendet.
• closeTitle, nextTitle und prevTitle
  Für den Schliessen, Weiter und Zurück-Button können Sie hier einen Text für den title-Tag vergeben.

« Zurück