ImageFlow als Navigationselement
ImageFlow ist ein hervorragende JavaScript Image gallery.
Man kann ImageFlow statt als Bildergalerie auch als Menü zur Navigation nutzen.
Jedes Bild erhält ein Attribut longdesc mit dem hinterlegten Link (hier genügt auch ein relativer).
<div id="imageflow1" class="imageflow">
<img src="img/forschung.jpg" longdesc="/pages/forschung.php" width="200" height="200" alt="Forschung" />
<img src="img/gruppe.jpg" longdesc="/pages/gruppe.php" width="200" height="200" alt="Gruppe" />
<img src="img/publikationen.jpg" longdesc="/pages/publikationen.php" width="200" height="200" alt="Publikationen" />
<img src="img/lehre.jpg" longdesc="/pages/lehre.php" width="200" height="200" alt="Lehre" />
</div>
In den JavaScript-Teil wird eine weitere Funktion goto(url) eingebaut. An diese Funktion bei onClick der Wert von longdesc übergeben und die neue location aufgerufen.
<script type="text/javascript">
<!--
function goto(url){
window.top.location = "http://plietker-group.de"+ url;
}
var imageflow1 = new ImageFlow();
imageflow1.init({ ImageFlowID: 'imageflow1',
reflectionGET: '&bgc=ffffff&fade_start=20%',
startID: 4,
aspectRatio: 3.0,
imagesM: 0.8,
xStep: 70,
percentLandscape: 66,
percentOther: 50,
imageFocusMax: 3,
onClick: function() { return goto((this.getAttribute('longdesc'))); }
});
//-->
</script>
Hat man eine gute Shopsoftware bzw. bei einer solchen die Möglichkeit auch selbst Code zu schreiben, kann man ImageFlow auch problemlos bei einem Webshop einsetzen.
Ein Beispiel von ImageFlow als Navigationselement in einer WebsiteBaker Site sehen Sie hier: http://plietker-group.de