Du verwendest einen Internet Explorer in einer Version kleiner gleich 8. Dieser Browser wird nicht unterstützt. Bitte aktualisiere mindestens auf Version 9.
Patrick Saar - Codes

Codes

Patrick Saar

PS Image Gallery – Eine jQuery-Bildergalerie

Für die Webseite der NACRA Euro 2012 suchte ich im Web einen vorgefertigten Code einer Bildergalerie. Leider habe ich nichts Passendes gefunden, was mir auf Anhieb gefallen hätte. Also habe ich eine eigene Bildergalerie auf Basis von jQuery programmiert. Nachdem ich den Code in den letzten Wochen weiter verbessert habe, biete ich ihn hier nun zum Download und Einbau in nicht-kommerzielle Webprojekte an. Den kompletten Code zusätzlich mit einem minifizierten jQuery- und CSS-Skript sowie ein Beispiel gibt es am Ende dieser Seite.

Die GUI

Der Normalmodus:

GUI von PS IMage Gallery
  1. Titel des Bildes
  2. Anzeigebereich der Bilder
  3. Leiste der Vorschaubilder
  4. Kontrollleiste

Der Vollbildmodus:

Sieht fast genauso aus wie der Normalmodus. Einzige Ausnahme, die Leiste mit den Vorschaubildern ist in diesem Modus nicht verfügbar.

Bilder einfügen

Die Bilder werden im HTML-Code eingefügt, der wie folgt aussieht:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="Patrick Saar - www.patrick-saar.de" />
<link rel="stylesheet" href="ps-image-gallery-layout.min.css" media="all" />
<title>PS-Image-Gallery</title>
</head>
<body>
<div id="ps-image-gallery-gallery">
<!--
/********************************************************/
/*                 PS-Image-Gallery                     */
/*      (c) Patrick Saar - www.patrick-saar.de          */
/*                   Version 1.2                        */
/*          last modification: 22.12.2012               */
/*          Licensed under CC BY-NC-SA 3.0              */
/* http://creativecommons.org/licenses/by-nc-sa/3.0/de/ */
/********************************************************/
/*                       HTML                           */
/********************************************************/    
-->
<div id="ps-image-gallery-images">
<!-- Ab hier die Fotos der Bildergalerie einfügen -->
<img data-small-src="photos/0_001.jpg" data-normal-src="photos/1_001.jpg" data-big-src="photos/2_001.jpg" data-title="Checkpoint Charlie" />
<img data-small-src="photos/0_002.jpg" data-normal-src="photos/1_002.jpg" data-big-src="photos/2_002.jpg" data-title="Berliner Fernsehturm" />
<img data-small-src="photos/0_003.jpg" data-normal-src="photos/1_003.jpg" data-big-src="photos/2_003.jpg" data-title="Rotes Rathaus" />
<img data-small-src="photos/0_004.jpg" data-normal-src="photos/1_004.jpg" data-big-src="photos/2_004.jpg" data-title="Willy Brandt Haus" />
<img data-small-src="photos/0_005.jpg" data-normal-src="photos/1_005.jpg" data-big-src="photos/2_005.jpg" data-title="Brandenburger Tor" />
<img data-small-src="photos/0_006.jpg" data-normal-src="photos/1_006.jpg" data-big-src="photos/2_006.jpg" data-title="Deutscher Reichstag" />
<img data-small-src="photos/0_007.jpg" data-normal-src="photos/1_007.jpg" data-big-src="photos/2_007.jpg" data-title="Kanzleramt" />
<img data-small-src="photos/0_008.jpg" data-normal-src="photos/1_008.jpg" data-big-src="photos/2_008.jpg" data-title="Schloss Bellevue" />
<img data-small-src="photos/0_009.jpg" data-normal-src="photos/1_009.jpg" data-big-src="photos/2_009.jpg" data-title="Siegess&auml;ule" />
<img data-small-src="photos/0_010.jpg" data-normal-src="photos/1_010.jpg" data-big-src="photos/2_010.jpg" data-title="Berliner Frauenkirche" />
<!-- Bis hier die Fotos der Bildergalerie einfügen -->
</div>
<div id="ps-image-gallery-display">
<div id="ps-image-gallery-loading-circle"><img src="images/ps-image-gallery-loader.gif" /></div>
<noscript id="ps-image-gallery-noscript">Bitte aktivieren Sie JavaScript in Ihrem Browser.</noscript> 
<div id="ps-image-gallery-title"></div>
<div id="ps-image-gallery-thumbnails">
<div id="ps-image-gallery-thumbnails-left"></div>
<div id="ps-image-gallery-thumbnails-outer">
<div id="ps-image-gallery-thumbnails-inner"></div>
</div>
<div id="ps-image-gallery-thumbnails-right"></div>
</div>
<div id="ps-image-gallery-info-wrapper">
<div id="ps-image-gallery-info">
PS-Image-Gallery<br />Programmed by: Patrick Saar<br />Version: 1.2<br /><a href="https://www.patrick-saar.de" target="_blank" id="programmerlink">www.patrick-saar.de</a>
</div>
</div>
</div>
<div id="ps-image-gallery-controlbar-wrapper">
<div id="ps-image-gallery-controlbar">
<div id="ps-image-gallery-prev" title="Bild zur&uuml;ck"></div>
<div id="ps-image-gallery-play" title="Diashow abspielen"></div>
<div id="ps-image-gallery-pause" title="Diashow anhalten"></div>
<div id="ps-image-gallery-next" title="Bild vorw&auml;rts"></div>
<div id="ps-image-gallery-title-off" title="Bildtitel ausblenden"></div>
<div id="ps-image-gallery-title-on" title="Bildtitel einblenden"></div>
<div id="ps-image-gallery-fullscreen-on" title="In den Vollbildmodus wechseln"></div>
<div id="ps-image-gallery-fullscreen-off" title="Den Vollbildmodus verlassen"></div>
<div id="ps-image-gallery-currentphoto"></div>
<div id="ps-image-gallery-showinfo" title="&Uuml;ber PS-Image-Gallery">i</div>
</div>
</div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script src="ps-image-gallery.min.js"></script>
</body>
</html>

Hier jetzt ein img-Element als Beispiel, welche Attribute Pflicht sind und deren Funktionsweise.

<img data-small-src="photos/0_005.jpg" data-normal-src="photos/1_005.jpg"
 data-big-src="photos/2_005.jpg" data-title="Brandenburger Tor" />

data-small-src: Pfad und Dateiname des Vorschaubildes. Es wird empfohlen diese Bilder schon lokal auf eine Höhe von 100px zu skalieren. Sonst werden die Bilder per jQuery/CSS skaliert, was ggf. zu starken Qualitätsverlusten führen kann. Außerdem beeinträchtigen größere Bilder die Performance von PS Image Gallery, da mehr Daten als nötig vom Browser abgefragt werden müssen (siehe auch Funktionsweise)
data-normal-src: Pfad und Dateiname des Bildes für den Normalmodus. Empfohlene Größe: Höhe des Anzeigebereichs im Normalmodus für Bilder im Hochformat. Breite des Anzeigebereichs im Normalmodus für Bilder im Querformat (siehe CSS-Code).
data-big-src: Pfad und Dateiname des Bildes für den Vollbildmodus. Empfohlene Größe: 1000px hoch oder 1500px breit.
data-title: Titel oder Beschreibung des Bildes. Wird dann unter 1 angezeigt (siehe GUI).

Wem das zu viele Bilder mit gleichem Motiv aber verschiedenen Auflösungen sind, der muss nicht alle Attribute angeben und mit einem Wert füllen. Es reicht auch nur ein oder zwei Attribute zu belegen, z.B. data-small-src und data-big-src. Dann wird das Bild für data-normal-src automatisch aus dem nächst höher auflösenden Bild, also data-big-src generiert. Es sei aber wiederum gesagt, dass dies ggf. zu starken Qualitätsverlusten bei der Anzeige des Bildes führen kann. Wichtig: Attribute dürfen niemals leer sein! Wollen Sie ein Attribut nicht verwenden so lassen Sie es bitte weg. Ausnahme: data-title darf nicht entfernt werden!

Die Funktionen

Titel des Bildes: Gibt den Wert des Attributes data-title: wieder. Kann mit dem entsprechenden Icon in der Kontrollleiste ein- bzw. ausgeblendet werden.

Anzeigebereich der Bilder: Hier wird das aktuell gewählte Bild angezeigt.

Leiste der Vorschaubilder: Wird beim Überfahren des Anzeigebereichs mit der Maus aufgeklappt. Mit den Pfeilen links und rechts kann man durch die Vorschaubilder scrollen. Bei Klick auf eines dieser Vorschaubilder erscheint es im Anzeigebereich. Verlässt man mit der Maus den Anzeigebereich, so klappt die Leiste zu.

Kontrollleiste: Hier kann man das vorherige oder nächste Bild anwählen oder die Diashow starten bzw. pausieren. Außerdem hat man die Möglichkeit den Bildtitel aus- / einzublenden oder in den Vollbildmodus zu wechseln. Die Anzeige der momentanen Nummer und der Gesamtanzahl der Bilder in der Galerie erleichtern die Navigation. Bei Klick auf "i" erscheint der Hinweis auf den Programmierer und ein Link auf meine Seite. Es wäre nett, wenn Sie dieses Feature nicht deaktivieren um die Resonanz auf dieses Projekt und etwaige Fehlermeldungen nicht zu unterbinden. Nur so ist gewährleistet, dass PS Image Gallery weiter verbessert werden kann.

Die Einstellungsmöglichkeiten

Im jQuery-Code:

var psIGSettings = {
    controls: true,

Boolscher Wert - Wenn die Kontrollleiste angezeigt werden soll auf "true" setzen, ansonsten "false".

imageChange: 4000,

Integer - Zeit in Millisekunden bis zum nächsten Bilderwechsel bei eingeschalteter Diashow.

titleOn: true,

Boolscher Wert - Bei "true" wird der Bildtitel nach dem Laden von PS Image Gallery angezeigt, bei "false" nicht.

randomize: true,

Boolscher Wert - Bei "true" werden die Bilder in einer zufälligen Reihenfolge in PS Image Gallery dargestellt. Bei "false" werden die Bilder in der Reihenfolge, in der sie im HTML-Dokument definiert sind, wiedergegeben.

thumbnailsStartShow: true,

Boolscher Wert - Bei "true" wird die Leiste der Vorschaubilder beim Betreten von PS Image Gallery angezeigt und erst nach einer festgelegten Zeit (Einstellung: delayToggleThumbnails) ausgeblendet. Bei "false" wird die Leiste der Vorschaubilder auch nach dem Laden der Bildergalerie versteckt bleiben.

keyboardActivate: true,

Boolscher Wert - Bei "true" kann der User zum nächsten/vorherigen Bild per Pfeiltasten auf der Tastatur navigieren. Diese Funktion ist dann auch im Vollbildmodus verfügbar. Bei "false" ist eine Navigation mit der Tastatur unterbunden. Ausnahme: Die Escape-Taste zum Verlassen des Vollbildmodus hat weiterhin volle Funktionalität.

autoplay: false,

Boolscher Wert - Bei "true" wird die Diashow nach dem Ladevorgang automatisch abgespielt, bei "false" nicht.

scaleNormalPhotosBigger: true

Boolscher Wert - Bei "true" werden Bilder, die kleiner als der Anzeigebereich im Normalmodus sind, auf die Abmessungen des Anzeigebereichs vergrößert ohne das Seitenverhältnis der Bilder zu ändern. Achtung: Je stärker die Vergrößerung, desto höher ist natürlich der Qualitätsverlust der Bilder. Bei "false" werden diese Bilder im Anzeigebereich zentriert und nicht gestreckt.

    scaleFullscreenPhotosBigger: true
};

Boolscher Wert - Die gleiche Einstellungsmöglichkeit wie bei scaleNormalPhotosBigger nur für den Vollbildmodus. Zur Vollständigkeit: Bei "true" werden Bilder, die kleiner als der Anzeigebereich im Vollbildmodus sind, auf die Abmessungen des Anzeigebereichs im Vollbildmodus vergrößert ohne das Seitenverhältnis der Bilder zu ändern. Achtung: Je stärker die Vergrößerung, desto höher ist natürlich auch hier wieder der Qualitätsverlust der Bilder. Bei "false" werden diese Bilder im Anzeigebereich des Vollbildmodus zentriert und nicht gestreckt.

var psIGVelocity = {
    toggle: 400,

Integer - Dauer des Aus- und Einblendvorgangs der Leiste der Vorschaubilder bei Überfahren des Anzeigebereichs mit dem Mauszeiger im Normalmodus in Millisekunden.

fade: 800,

Integer - Dauer des Überblendungsvorgangs beim Bilderwechsel in Millisekunden.

delayFadeESC: 2000,

Integer - Anzeigedauer des Hinweises, dass der Vollbildmodus mit der Escape-Taste geschlossen werden kann, in Millisekunden.

delayToggleThumbnails: 2000

Integer - Anzeigedauer der Leiste der Vorschaubilder beim Betreten der Bildergalerie in Millisekunden, falls dies eingeschaltet ist (thumbnailsStartShow).

    slideThumbnails: 400
};

Integer - Dauer des Scrollvorgangs beim Navigieren der Vorschaubilder nach links oder rechts in Millisekunden.

var psIGDescriptions = {
    titleSuffix: 'Photo '

String - Text, welcher beim Überfahren eines Vorschaubildes als PopUp-Text angeigt wird. In diesem Fall wäre das "Photohier die Nummer des Fotos - hier der Titel des Fotos"

    leavingNote: 'Zum Verlassen \'ESC\' drücken'
};

String - Text, welcher als Hinweis auf die Funktionalität der Escape-Taste im Vollbildmodus angezeigt wird.

Im CSS-Code:

#ps-image-gallery-gallery {
    width: 720px;
}

Breite des Anzeigebereichs im Normalmodus.

#ps-image-gallery-display {
    height: 540px;
}

Höhe des Anzeigebereichs im Normalmodus.

Die Funktionsweise von PS Image Gallery

PS Image Gallery prüft bei jedem Bild, ob es schon fertig geladen wurde und signalisiert eine solche Aktivität mit einem sogenannten "Loading Circle" (Download auf http://ajaxload.info/). Alle Bilder werden bis auf die Vorschaubilder bei Bedarf nachgeladen. PS Image Gallery skaliert alle Bilder (sofern dies nicht eingeschränkt wird, siehe Einstellungsmöglichkeiten) auf die passende Größe ohne das Seitenverhältnis des Bildes zu zerstören. D.h. also die Bilder füllen im Normalmodus den Anzeigebereich maximal aus. Im Vollbildmodus entspricht der Anzeigebereich dem Browserfenster.

Die Performance

Es werden am Anfang nur alle Vorschaubilder und das aktuelle Bild im Anzeigebereich sowie dessen direkte Nachbarbilder geladen. Alle weiteren Bilder werden erst auf Anforderung nachgeladen. So ist ein kurzer Ladevorgang von PS Image Gallery gewährleistet. Der jQuery-Code wurde auch auf Performance untersucht und optimiert. Ein Spritesheet mit allen Icons der Kontrollleiste verringert die Anzahl der Server-Anfragen durch den Browser.

Lizenz

Die PS Image Gallery ist unter CC BY-NC-SA 3.0 lizenziert.

Change Log

Version 1.2

  • Hinweis auf abgeschaltetes JavaScript
  • Bug bei Zentrierung der Fotos im Anzeigebereich nach Klick auf Vorschaubild entfernt
  • Minimale Performanceoptimierungen

Version 1.1

  • Loading Circle im Vollbildmodus
  • Mehrere Bugs in Vorschaubildleiste entfernt
  • Ladezeitoptimierung durch verstärkten Einsatz von AJAX
  • Performanceoptimierungen des JavaScript-Codes

3,61 MB - Downloads: 2900

Diese Seite verwendet Cookies um die beste Nutzerfreundlichkeit zu bieten. Falls Du auf der Seite weitersurfst, stimmst Du der Cookie-Nutzung zu.
Details Ok