„Galerie“ ist ein leichtgewichtiges und flexibles Skript zum Präsentieren von Bildern. Wie das genau funktioniert, sieht man sich am besten live an:
| <- | vorheriges Bild |
| -> | nächstes Bild |
| s | Slideshow starten / anhalten |
| + | Bild in Originalgröße anzeigen |
| - | Bild auf Anzeigebereich verkleinern |
| Enter | Umschalten Originalgröße / verkleinerte Ansicht |
| Esc | Bildansicht schließen |
„Galerie“ benötigt whenDOMReady und addEvent. Sie sind wie das Hauptscript unter der LGPL freigegeben und im Downloadpaket enthalten. Die .js-Dateien sind in das gewünschte Dokument einzubinden:
<script type="text/javascript" src="addEvent.js"></script> <script type="text/javascript" src="Galerie.js"></script>
Weiterhin muss ein Theme hinzugefügt werden. Die jeweils enthaltene Galerie.css muss entweder einzeln eingebunden oder einem anderen Stylesheet hinzugefügt werden.
Im einfachsten Fall liegen das Dokument und alle zum Theme gehörigen Dateien im gleichen Verzeichnis. Andernfalls muss auf korrekte Pfadangaben in der Galerie.css geachtet werden. Vor allem müssen cursor:url(...) und filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='... relativ zum Dokument oder absolute Pfade sein.
Der Rest verläuft nach Wunsch automatisch. Wenn es ein Element mit id="Galerie" gibt, wird dieses vom Skript nach Bilderlinks durchsucht. Um für ein Bild einen Titel anzuzeigen, muss dieser im title-Attribut des Links stehen:
<p id="Galerie"> <a href="1.png">1</a>, <a href="2.jpg">2</a>, <a href="3.gif" title="toll!">3</a>, ... </p>
Um alle verlinkten Bilder auf einer Seite einer Galerie hinzuzufügen, reicht es, <body> das genannte id-Attribut zu geben. Alternativ kann man Galerie manuell instanziieren; entweder für das gesamte Dokument:
<script type="text/javascript">
whenDOMReady (function() {
new Galerie (document)
})
</script>
… oder für ausgewählte Elemente:
<script type="text/javascript">
whenDOMReady (function() {
new Galerie (document.getElementById('urlaubsfotos'));
new Galerie (document.getElementById('wm2006'));
})
</script>
Jede Instanz stellt eine unabhängige Galerie dar. Um zum Beispiel in einem WordPress-Blog pro Eintrag eine Galerie zu erstellen, kann man auf getElementsByClassName zurückgreifen:
<script type="text/javascript" src="getElementsByClassName.js"></script>
<script type="text/javascript">
whenDOMReady (function() {
var posts = getElementsByClassName(document, 'div', 'post');
for (var post, i = 0; post = posts[i]; i++)
new Galerie (post);
})
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Galerie</title>
<script type="text/javascript" src="addEvent.js"></script>
<script type="text/javascript" src="Galerie.js"></script>
<link rel="stylesheet" media="screen,projection" type="text/css" href="Galerie.css"/>
<style type="text/css"> body { background: blue } a { color: white } </style>
</head>
<body id="Galerie">
<a href="http://www.spiegel.de/static/sys/logo_120x61.gif">1</a>
<a href="http://www.google.com/images/logo_sm.gif">2</a>
<a href="http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">3</a>
</body>
</html>
Die Themes sind ein integraler Bestandteil von „Galerie“. Da die gesamte Gestaltung einer CSS-Datei überlassen wird, kann das Erscheinungsbild weitgehend angepasst werden, ohne das eigentliche Skript anzurühren. Wer ein eigenes Theme erstellt hat, kann mir dieses gerne schicken (dao at design-noir.de). Ich werde es der Liste hinzufügen.
| Paket | Größe | Vorschau | Autor |
|---|---|---|---|
| black-bars_1.8.14.tar.gz | 2,78 KB |  |
Dao G. |
| ie7_1.8.14.tar.gz | 10,76 KB |  |
Dao G. |
| lighter_1.8.14.tar.gz | 954 Bytes |  |
Dao G. |
| medieval_1.8.14.tar.gz | 4,75 KB |  |
Erik-B. Ernst, C. M. Werner |
| nuvola_1.8.14.tar.gz | 9,44 KB |  |
Dao G. |
| plastique_1.8.14.tar.gz | 7,03 KB |  |
Dao G. |
| plastique-ontop_1.8.14.tar.gz | 6,97 KB |  |
Dao G. |
| tango-ontop_1.8.14.tar.gz | 6,78 KB |  |
Dao G. |
| textual-bars_1.8.14.tar.gz | 2,08 KB |  |
Dao G. |
body { position: absolute } (Galerie setzt position auf static, um noch schwerwiegenderen Problemen aus dem Weg zu gehen, und macht dies beim Schließen wieder rückgängig.)
Problem melden (dao at design-noir.de).
DOMContentLoaded-Event für IE emuliert
appendChild(document.createTextNode()) und firstChild.nodeValue statt innerHTML
Function.prototype.bind verbessert
$A heißt jetzt Array.from
-ms-interpolation-mode: bicubic;
title-Attribut für Navigationsbuttons eingeführt (und lokalisiert)
DOMContentLoaded-Event wird für Gecko-basierte Browser und Opera 9 genutzt, um die Galerie eher initialisieren zu können
Galerie-Instanzen behoben (cache-Objekt muss im Konstruktor initialisiert werden, nicht im Prototyp-Objekt)
defaultImgWidth und defaultImgHeight entfernt
Hi habe da ein Problem mit meinem Frameset.Wenn das Skript auf der Galerie-Seite in Main eingebunden ist, sollten es keine Probleme geben.
Habe 3 Frames
Head
Navi
Main
im Main ist die Seite Galerie eingebunden auf der ich die Bilder verlinken wollte.
hab alles so gemacht wie beschreiben aber ich bekomms´einfach nicht hin.
kann das am frameset liegen??
Kommentare sind geschlossen.
