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
Einbinden
- Laden Sie die benötigt Daten » hier herunter.
- Binden Sie die JavaScript Dateien in Ihrer Seite ein.<script type="text/javascript" src="js/moo1.3.1_compile.js"></script>
<script type="text/javascript" src="js/gbtrigo_compile.js"></script> - Legen Sie einen Container an, in dem Ihre Bilder stehen werden und vergeben Sie diesen einen eindeutigen Identifikationsnamen (id).<div id="gbTrigo">
<img src="img/Andromeda.jpg" alt="Andromeda" width="170" height="106" class="gbreflection" />
</div> - Sie können der Klasse noch Optionen (optional) zuweisen, die der Klasse übergeben werden soll.<script type="text/javascript">
var gbTrigoOpt = {
handle : 'gbTrigo',
radius : 240,
skale : 50,
step : 1,
duration : 1,
transition : Fx.Transitions.Expo.easeOut
};
var myTrigo = new gbTrigo(gbTrigoOpt);
</script> - Das Aussehen der Navigation können Sie per CSS einstellen.
<style type="text/css">
/* Spiegeln mit 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>
/* 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>
Jean
06.08.2011 16:07:46
A mniute saved is a minute earned, and this saved hours!