gbTrigo v1.0

gbTrigo ist eine Bilder-Galerie, das eine räumliche Umgebung simuliert. Mit einfachen trigonometrischen Berechnungen werden 3D-Koordinaten in 2D-Koordinaten umrechnen und simulieren so eine räumliche Umgebung.

Demo

» gbTrigo 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="gbtrigo.js"></script>
3. Legen Sie einen Container an, in dem Ihre Bilder stehen werden und vergeben Sie diesen einen eindeutigen Identifikationsnamen (id).
   Z.B. <div id="gbTrigo"></div>
4. Sie können der Klasse noch Optionen (optional) zuweisen, die der Klasse übergeben werden soll.
   <script type="text/javascript">
var options = {
handle : 'gbTrigo',
radius : 240,
skale : 50,
step : 1,
duration : 1,
transition : Fx.Transitions.Expo.easeOut
}
</script>
5. Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.
6. Das Aussehen der Navigation können Sie per CSS einstellen.
   <style type="text/css">
/* Webkit (Safari, Chrome) */
#gbTrigo img {
    -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.8, transparent), to(#fff));
}
#gbTrigoPager {
text-align: center;
}
#gbTrigoPager #gbTrigoPagerText {
margin: 0 6px;
}
</style>

Erläuterung

• handle
  Tragen Sie hier die id ein, die Sie dem Container vergeben haben, in dem Ihre Bilder liegen.
  Z.B. 'gbTrigo'
• radius
  Hier tragen Sie ein Zahl ein, die den Abstand zum Mittelpunkt definiert.
  Z.B. 240
• skale
  Für den Skalierungsfaktor tragen Sie hier eine Zahl ein.
  z.B. 50
• step
  Tragen Sie hier die Zahl für das Bild ein, das als Erstes angezeigt werden soll.
  Z.B. 2
• duration
  Einstellung für die Geschwindigkeit der Animation. Tragen Sie hier eine Zahl für Sekunden ein.
  Z.B. 1
• transition
  Diese Einstellung gibt den Ablauf der Animation an. Mehr dazu finden Sie bei » MooTools
  Z.B. Fx.Transitions.Expo.easeOut

Hinweis

Um die Bilder zu spiegeln, ist es nicht möglich gbTrigo mit gbReflection zu kombinieren. Wir empfehlen Ihnen dafür die Spiegelung mit CSS 3 umzusetzen. Die folgende Anweisung ist dabei nur für Webkit Browser wie Chrome oder Safari gedacht.

<style type="text/css">
/* Webkit (Safari, Chrome) */
#gbTrigo img {
-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.8, transparent), to(#fff));
}
</style>