WEBDESIGN

Schon als ich meine erste Webseite aufgebaut hatte, habe ich viel Zeit aufgewendet eine gutaussehende und anwenderfreundliche Bildergallerie zu erstellen. Im Internet findet man nicht viele gute Beispiele. Dies bewog mich mein eigenes JavaScript zu schreiben.

JavaScript für Bildgalerie

Beschreibung: Wie im Beispiel zu sehen ist, ist diese Bildgalerie völlig unabhängig von Format und Grösse der Bilder. Nachdem das vergrösserte Bild angezeigt wird, egal wo der nächste Mausklick stattfindet, das Fenster wird wieder geschlossen. Klickt der User direkt auf ein weiteres Thumbnail, wird das nächste Bild in der richtigen Grösse und im richtigen Format vergrössert.



Beschreibung zur Verwendung der Bildgalerie


Da das JavaScript eine eigenständige Datei ist, muss nur die Datei abgelegt und der Link in die HTML-Datei eingebunden werden. Dies geschieht innerhalb des <HEAD>-Tags und sieht folgendermassen aus:

  • Downloade die Datei galerie.js (verpackt als ZIP)
  • js/galerie.js --> Pfad und Filename der JavaScript-Datei.

Die Funktion wird wie folgt, mit Hilfe des <A>-Tag angesprochen:

  • images/bild --> Pfad und Filename des vergrösserten Bildes. Das Script fürgt die Endung .jpg automatisch ein.
  • 604 und 554 --> maximale Breite und Höhe des vergrösserten Bildes. Um die Bilder optimal anzuzeigen, sollte eines dieser Masse eingehalten werden.
  • Fenstername --> wird oben links im Fensterrahmen angezeigt.
  • 20 und 20 --> Abstand von links und oben des Bildschirmrandes, diese kann beliebige Masse haben.
  • images/thumbnail.jpg --> Pfad und Filename des kleinen Bildes.
  • alle Masse können auf Dein Webseitenlayout zugeschnitten werden. Ändere dazu das File galerie.js. Wenn Du mühe beim Anpassen hast, kontaktiere mich unschiniert. E-Mail

Nutzungsbedingungen:
Es würde mich freuen dieses Script auf Deiner Seite wiederzufinden. Einzige Bitte, informiere mich doch kurz via E-Mail.