Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von eddie_be

    eddie_be

    08.02.2013 - 21:38

    hej prima Tut, danke!
    Ich glaub das gibt ein langes Wochenende :-)

  • Alternative Portrait von hannanass

    hannanass

    16.10.2012 - 10:38

    Hat bei mir nicht geklapt :( schade

  • Alternative Portrait von _Hackstog_

    _Hackstog_

    28.09.2012 - 16:48

    Schön erklärt und gut verständlich, hat mir sehr geholfen, Danke!

  • Portrait von MineTechCraft

    MineTechCraft

    19.06.2012 - 17:15

    Musste zwar etwas tüfteln aber gutes TUT. Danke

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    23.02.2012 - 20:10

    Vielen Dank für das Tutorial! Weil meine alte Lightbox dank neuem IE nicht mehr funktioniert, hat mir dein Tutorial sehr geholfen.

  • Alternative Portrait von YannickDrost

    YannickDrost

    07.11.2011 - 21:22

    Auch für mich als Anfänger nachvollziehbar und bilderreich erklärt. Ich werde es so schnell wie möglich ausprobieren =)

  • Portrait von Grainne

    Grainne

    10.10.2011 - 14:23

    Immer schon wollte ich wissen, wie so eine Bildergalerie mit JS funktioniert. Als Anfängerin freue ich mich sehr darüber, dass das 1. Tutorial, das ich mir zum Übern ausgesucht habe so wunderbar geklappt hat :-) Ganz toll und ausführlich beschrieben!!! Danke :-)

  • Alternative Portrait von Sorex

    Sorex

    07.06.2011 - 14:49

    vielen dank für das tut, hat mir sehr geholfen

  • Alternative Portrait von burn3r

    burn3r

    29.04.2011 - 16:24

    Ist es möglich, das ganze so umzuschreiben, dass jedes Bild was in /bilder liegt so dargestellt wird, ohne jedes expliziet im Code angeben zu müssen?!

  • Alternative Portrait von CocaFlave

    CocaFlave

    16.02.2011 - 17:34

    Sehr gutes Tutorial ;)
    Habe noch nie was in Js/jQuery gemacht versteht aber trotzdem alles :)
    Vielen Dank!

  • Alternative Portrait von robindean93

    robindean93

    07.02.2011 - 19:20

    Mhh ich hab da son problem bin nicht so das genie in sachen html in der zeile wo es heißt :,,Die offizielle Projektwebseite von jQuery lightBox plugin finden Sie unter http://leandrovieira.com/projects/jquery/lightbox/. Von dort können auch die benötigten Dateien heruntergeladen werden. Binden Sie anschließend jQuery ein. Danach greifen Sie auf die im Download-Verzeichnis liegende Datei jquery.lightbox-0.5.min.js zurück.''
    dat versteh ich net sry dass ich mich so doof anstelle xD aber wie binde ich das ein ? übern server und wen dann wie ? xD
    würd mich auf ne antwort freuen =)
    MfG Rob

  • Alternative Portrait von Elpresidente99

    Elpresidente99

    15.12.2010 - 18:24

    Komm noch nicht ganz klar aber super genau so will ichs haben. :)

  • Alternative Portrait von incubo

    incubo

    26.10.2010 - 11:53

    Einfach, überschaubar, gut!

  • Alternative Portrait von unimacmac

    unimacmac

    11.10.2010 - 08:07

    Gut erklärt - vielen Dank!

  • Portrait von HerrNilsson

    HerrNilsson

    08.10.2010 - 21:55

    sehr klar und einfach beschrieben. für anfänger ideal!

  • Alternative Portrait von 2november

    2november

    08.10.2010 - 17:16

    Schön erklärt. Werde ich am Wochenende mal umsetzten.

    Danke

  • Alternative Portrait von Krammi

    Krammi

    05.10.2010 - 14:15

    Super - brauche ich!
    Krammi

  • Portrait von photospace

    photospace

    04.10.2010 - 13:21

    Hi finde ich witzig :-)

    Danke schön für das nette PDF-Tutorial.

  • Alternative Portrait von anpura

    anpura

    04.10.2010 - 07:53

    Vielen Dank für die ausfühliche und verständliche Erklärung.

  • Alternative Portrait von Hannes1709

    Hannes1709

    03.10.2010 - 18:46

    Danke für den Workshop, werde es in den nächsten Tagen mal ausprobieren.

Weitere Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


Wie werden Bildergalerien klassischerweise aufgebaut? Man fügt in seine Webseite Vorschaugrafiken ein und versieht diese mit Hyperlinks. Werden die Vorschaugrafiken angeklickt, öffnet sich entweder ein neues Browser- oder ein Pop-up-Fenster, in dem die Grafik in Originalgröße zu sehen ist.

Sonderlich anwenderfreundlich ist das freilich nicht. Denn entweder gehen immer neue Browserfenster auf, die vom Anwender wieder geschlossen werden müssen, oder die Bildergalerie funktioniert überhaupt nicht, da beim Benutzer JavaScript deaktiviert ist. (Pop-up-Fenster werden üblicherweise mittels JavaScript geöffnet. Ist JavaScript im Browser ausgeschaltet, öffnen sich die Pop-ups nicht).

Einen möglichen Ausweg aus diesem Dilemma bieten die sogenannten Lightboxen. Eine solche Lightbox ist eine Art Pop-up, bei dem allerdings kein neues Browserfenster geöffnet werden muss. Vielmehr wird durch das hinter der Lightbox steckende Skript ein Container geladen, in dem die Grafik in Originalgröße angezeigt wird.

Die hier vorgestellte Lightbox-Lösung basiert auf einem jQuery-Plug-in. Und vor jenem Hintergrund kommt zweifellos eine berechtigte Frage auf: Da jQuery auf JavaScript basiert, ist die Lightbox auch bei deaktiviertem JavaScript nutzbar? Ja, ist sie. Bei deaktiviertem JavaScript wird – wenn man ein Vorschaubild anklickt– das Originalbild einfach in einer neuen Browserseite angezeigt.

 
Die betreffenden Grafiken müssen in zwei Größen vorliegen: als Vorschaubild und in Originalabmessung. Klickt ein Anwender das Thumbnail an, wird das Originalbild in einer Lightbox angezeigt.

[Beispiel anzeigen]

Bilder


Um eine solche Anwendung anzulegen, fügen Sie in das body-Element des HTML-Dokuments ein Galerie-Grundgerüst ein.

 
Für ein Bild sähe das folgendermaßen aus:

<div id="galerie">
 <a href="photos/image1.jpg" title="Pflanze 1"><img src="photos/thumb_image1.jpg" alt="Pflanze 1" ></a>
</div>

Dabei ist das Vorschaubild in einen Hyperlink eingebettet. Dieser Link verweist auf das Bild in Originalgröße. Zudem ist darauf zu achten, dass dem a-Element ein title-Attribut mit einem passenden Wert zugewiesen wird. Denn dieser Wert fungiert in der Lightbox als Bildbeschreibung.

Im vorherigen Beispiel wurde lediglich eine Grafik in die Galerie eingefügt. Selbstverständlich können Sie aber auch mehrere Grafiken in einer Galerie präsentieren.

<div id="galerie">
 <a href="photos/image1.jpg" title="Pflanze 1"><img src="photos/thumb_image1.jpg" alt="Pflanze 1" ></a>
 <a href="photos/image2.jpg" title="Pflanze 2"><img src="photos/thumb_image2.jpg" alt="Pflanze 2" ></a>
 <a href="photos/image3.jpg" title="Pflanze 3"><img src="photos/thumb_image3.jpg" alt="Pflanze 3" ></a>
 <a href="photos/image4.jpg" title="Pflanze 4"><img src="photos/thumb_image4.jpg" alt="Pflanze 4" ></a>
 <a href="photos/image5.jpg" title="Pflanze 5"><img src="photos/thumb_image5.jpg" alt="Pflanze 5" ></a>
</div>

Fügen Sie dazu einfach in das div-Element die gewünschten Bilder ein.

Bilder


 
Die offizielle Projektwebseite von jQuery lightBox plugin  finden Sie unter http://leandrovieira.com/projects/jquery/lightbox/. Von dort können auch die benötigten Dateien heruntergeladen werden. Binden Sie anschließend jQuery ein. Danach greifen Sie auf die im Download-Verzeichnis liegende Datei jquery.lightbox-0.5.min.js zurück.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>

Zusätzlich sollten Sie die mitgelieferte CSS-Datei einbinden. Diese stellt verschiedene Formatierungen bereit.

<link rel="stylesheet" type="text/css" href="/jsjquery.lightbox-0.5.css">

Damit sind die Vorarbeiten abgeschlossen und die Lightbox kann angelegt werden. Dazu rufen Sie die entsprechende Funktion innerhalb des HTML-Dokuments auf.

[Beispiel anzeigen]

<script type="text/javascript"> 
 /* <![CDATA[ */
  $(document).ready(function(){
                     $('#galerie a').lightBox({
                          fixedNavigation:true
                      }); 
                 });
  /* ]]> */
 </script>

Darüber wird die Lightbox initialisiert. Der Seleketor #galerie a gibt an, auf welche Elemente der Effekt angewendet werden soll. Durch die verwendete Syntax gilt die Definition für alle a-Elemente, die innerhalb des Elements mit der ID galerie stehen.

 
Wie bei jQuery bzw. den jQuery-Plug-ins üblich, stehen zusätzliche Optionen zur Verfügung, über die sich die Lightbox anpassen lässt. Da wäre zunächst der Beschriftungstext.

Bilder


 
Standardmäßig wird dieser auf Englisch angezeigt. Durch die beiden Parameter txtImage und txtOf lassen sich die Texte personalisieren. Aus dem Text

Image 1 of 2

kann man so beispielsweise

Bild 1 von 2

machen. Die Parameter werden – wie das bei jQuery üblich ist – innerhalb der geschweiften Klammern angegeben.

[Beispiel anzeigen]

<script type="text/javascript"> 
 /* <![CDATA[ */
  $(document).ready(function(){
                     $('#galerie a').lightBox({
                           fixedNavigation:true,
                           txtImage: 'Bild',
             txtOf: 'von '
                           }); 
                 });
  /* ]]> */
 </script>

Zunächst notiert man den Parameternamen. Hinter dem Doppelpunkt folgt der gewünschte Wert. Beachten Sie, dass der Parameterwert in Anführungszeichen gesetzt werden muss. Zudem müssen die Parameter durch ein Komma voneinander getrennt werden.

Bilder


 
Die Lightbox funktioniert nach einem altbekannten Prinzip: Klickt man das Vorschaubild an, wird die restliche Webseite abgedunkelt und das Bild wird in der Originalgröße angezeigt. Technisch wird das gelöst, indem ein zusätzlicher Bereich über die vorhandenen Inhalte gelegt wird. Dieses Element, was sich darüber legt, läuft unter dem Namen Overlay. Und eben jenes Overlay lässt sich personalisieren. Dafür stehen verschiedene Parameter zur Verfügung:

Da wäre zunächst overlayOpacity. Über diese Option lässt sich festlegen, wie durchscheinend der über die Seite gelegte Container sein soll. Der Standardwert ist 0.8. Erlaubt sind Werte zwischen 0 und 1, wobei 0 durchsichtig ist, während 1 für undurchsichtig steht. Beachten Sie, dass hier anstelle des sonst üblichen Kommas jeweils ein Punkt gesetzt werden muss.

Über overlayBgColor kann man die Hintergrundfarbe des Containers bestimmen. Standardmäßig ist diese auf #000 als Schwarz gesetzt. Um die Geschwindigkeit festzulegen, mit der sich die Lightbox vergrößert, verwendet man containerResizeSpeed.

Die angegebene Ganzzahl entspricht dabei den Millisekunden, die der Vergrößerungseffekt dauern soll. Der Standardwert ist hier 400.

Und zu guter Letzt gibt es noch fixedNavigation. Durch true wird bestimmt, dass die Navigation, durch die in der Galerie vor- und zurückgeblättert werden kann, immer zu sehen ist.

[Beispiel anzeigen]
<script type="text/javascript">  
 /* <![CDATA[ */
  $(document).ready(function(){
                     $('#galerie a').lightBox({
                          txtImage: 'Bild',
               txtOf: 'von ',
               overlayOpacity: 0.7,
               fixedNavigation: true,
               overlayBgColor: '#fff000'
                      }); 
                 });
  /* ]]> */
 </script>

 
Einfluss genommen werden kann auch auf die Grafiken, die standardmäßig für die Navigation verwendet werden.

Bilder


Das "Problem" an diesen Standard-Schaltflächen ist nämlich deren englische Beschriftung. Wer diese übersetzen will, muss eigene Grafiken anlegen. Im einfachsten Fall legen Sie die neuen Grafiken unter den gleichen Namen im images-Verzeichnis des Plug-ins ab, unter dem die Originalbilder dort liegen.

 
Alternativ dazu können Sie aber auch auf Parameter zurückgreifen. Welche das sind, zeigt das folgende Beispiel:

$('#galerie a').lightBox({
 //Schließen des Fensters (Standard ist lightbox-btn-close.gif)
   imageBtnClose: 'images/zu.gif',
 //Zum vorherigen Bild (Standard ist lightbox-btn-prev.gif)
   imageBtnPrev: 'images/zurueck.gif',
 //Zum nächsten Bild (Standard ist lightbox-btn-next.gif)
   imageBtnNext: 'images/weiter.gif',
 //Das Bild, das beim Laden angezeigt wird (Standard ist lightbox-ico-loading.gif)
   imageLoading: 'images/laedt.gif'
 });

Die Lightbox lässt sich über Tastendruck steuern. Auch hierfür stehen verschiedene Optionen zur Verfügung:
  • keyToClose – Schließen der Lightbox. (Standardmäßig über die Taste [C])
  • keyToPrev – Zum vorherigen Bild. (Standardmäßig über die Taste [P])
  • keyToNext – Zum nächsten Bild. (Standardmäßig über die Taste [N])

Einen vollständigen Überblick über alle vorhandenen Optionen können Sie sich übrigens auch noch einmal auf der offiziellen Webseite unter http://leandrovieira.com/projects/jquery/lightbox/ im Bereich Extend verschaffen.
vBulletin 0.053 • ZF-App 0.619 • Total 0.672