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 kkeckeis

    kkeckeis

    01.06.2012 - 18:24

    Vielen Dank für das gute und einfach verständliche Tutorial. Hab das alles hingekriegt bis auf das eine: es öffnet sich bei mir keine lightbox, sondern das angegebene Bild öffnet sich einfach in einer neuen Seite.
    Jemand ne Idee was ich falsch mache?

  • Portrait von greenbeen

    greenbeen

    01.06.2011 - 13:22

    danke danke danke! genau das hab ich gesucht! Jetzt probier ich's halt einmal.... :D

  • Alternative Portrait von Hagbard_Celine

    Hagbard_Celine

    25.02.2011 - 09:49

    Vielen Dank für dieses Tutorial, genau sowas kann ich gerade gebrauchen!

  • Alternative Portrait von Oschick

    Oschick

    05.11.2010 - 08:02

    Danke für den Tipp. Kann ich gut gebrauchen.

    Die Anpassung der URL hättest du vielleicht noch näher erklären können:
    Was macht eigentlich genau der Ausdruck:
    this.href.replace(new RegExp("watch?v=", "i"), 'v/')

  • Alternative Portrait

    User hat PSD-Tutorials.de verlassen

    05.11.2010 - 07:15

    Ich verwende LYTEBOX in Verbindung mit
    Featured Content Glider: By http://www.dynamicdrive.com

    Man weiß ja nicht so recht, wer hier bei wem abschreibt

  • Alternative Portrait von blacksite

    blacksite

    04.11.2010 - 17:07

    Nochmals ist echt klasse aber kann man dass als Gallerie Ansicht machen so das dass Bildfenster immer da steht und man nur nach Links und rechts klicken kann ???

  • Alternative Portrait von blacksite

    blacksite

    02.11.2010 - 20:20

    Echt klasse vielen Dank

  • Alternative Portrait von matzekuh

    matzekuh

    31.10.2010 - 14:48

    Tolle Sache, toll beschrieben, toll gemacht
    ---
    nur leider immernoch nicht das was ich suche

    http://www.psd-tutorials.de/modules/Forum/45_php-und-andere-scriptsprachen/117963-frage-zu-lightbox-und-spry.html

    Vielleicht weis hier jemand einen "Ausweg" ^^ Wäre nett wenn ihr mir antworten könntet.

    Gruß
    matzekuh

  • Alternative Portrait von peterschek

    peterschek

    31.10.2010 - 13:06

    Sehr hilfreich! Danke für die Beschreibung :-)

  • Alternative Portrait von flyjoker

    flyjoker

    30.10.2010 - 19:49

    Sehr genial mit dem Zusatz der Login Möglichkeit.

  • Alternative Portrait von Hannes1709

    Hannes1709

    30.10.2010 - 11:24

    Super einfache Variante - gleich mal testen.

  • Portrait von Entry

    Entry

    30.10.2010 - 02:23

    Danke für die Beschreibung

  • Alternative Portrait von ikey

    ikey

    29.10.2010 - 18:51

    Sehr nützlich und anschaulich beschrieben und bebildert. Danke!

  • Alternative Portrait von Rasako

    Rasako

    29.10.2010 - 18:09

    danke für das tutorial das ist echt super werde es bestimmt oft nutzen bis ich es auswendig kann :)

  • Alternative Portrait von propixel

    propixel

    29.10.2010 - 15:58

    Seht gutes und hilfreiches Tutorial. Da werde ich in Zukunft bestimmt noch von profitieren. Vielen Dank.

  • Alternative Portrait von helgeschneider

    helgeschneider

    29.10.2010 - 15:47

    Danke für deine schönen Tuts die du immer präsentierst. So auch für Dieses dankeschön.

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

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


Die offizielle Projektwebseite zum fancybox-Plug-in finden Sie unter http://fancybox.net/home. Von dort kann das Plug-in heruntergeladen werden. Um fancybox nutzen zu können, muss man zunächst jQuery einbinden. Erst danach greift man auf die eigentliche Plug-in-Datei zu.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
Damit wäre das Plug-in bereits einsatzfähig. Optional können zwei zusätzliche Dateien eingebunden werden. Wenn Sie Bildübergangsoptionen nutzen wollen, binden Sie die Datei jquery.easing-X.pack.js ein.

<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>

Zusätzlich können Sie dafür sorgen, dass für die Navigation das Mausrad verwendet werden kann.

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

Für die Gestaltung der Lightbox sollten Sie – selbst dann, wenn Sie ein eigenes Layout definieren wollen – die Standard-CSS-Datei einbinden.

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

 

Eine erste Anwendung

Im einfachsten Fall wird fancybox sicherlich für die Anzeige von Bildern in einer Lightbox verwendet. Dabei sehen die Seitenbesucher zunächst ein oder mehrere Vorschaubilder.

[Beispiel anzeigen]

Bilder


 
Sobald auf ein solches Vorschaubild geklickt wird, öffnet sich das Bild in Originalgröße in einer Lightbox.

Bilder


 
Eine solche Anwendung lässt sich sehr einfach umsetzen. Dafür brauchen Sie das betreffende Bild in zwei Größen. Einmal das Vorschau- und einmal das Originalbild. Das Vorschaubild wird ganz normal – also wie jedes andere Bild in HTML – eingebunden. Zusätzlich wird dieses Vorschaubild jedoch in einen Hyperlink eingeschlossen. Dessen Verweisziel ist das Bild in Originalgröße.

<a href="1_b.jpg" id="bild" ><img src="1_s.jpg" alt="" border="0" /></a>

Entscheidend ist hier das Angeben der ID. Denn eben jene ID wird anschließend für den eigentlichen jQuery-Aufruf benötigt. Der könnte folgendermaßen aussehen:

[Beispiel anzeigen]

<script type="text/javascript">
   /*  <![CDATA[ */
   $(document).ready(function()  {
       $("#bild").fancybox({
             'titleShow': false      
      });

   });
   /* ]]> */
</script>

Neben dem eigentlichen Aufruf kennt das Plug-in zahlreiche Optionen und Methoden. Einen vollständigen Überblick der angebotenen Varianten können Sie sich auf der Seite http://fancybox.net/api verschaffen. Wenn Sie die Optionen verwenden wollen, achten Sie darauf, dass diese jeweils durch Kommata voneinander zu trennen sind. Wobei hinter der letzten Option kein Komma angegeben werden darf.

[Beispiel anzeigen]

<script  type="text/javascript">
   /*  <![CDATA[ */
   $(document).ready(function()  {
       $("#bild").fancybox({
                         'titleShow': false,
                         'transitionIn': 'elastic',
                         'transitionOut': 'elastic',
                         'easingIn': 'easeOutBack',
                         'easingOut': 'easeInBack'
             });
   });
   /* ]]> */
</script>

 

Ein Login-Formular anzeigen

Dass Bilder in einer Lightbox angezeigt werden, ist im Zusammenhang mit einem entsprechenden jQuery-Plug-in sicherlich keine Besonderheit. Wie eingangs bereits angeklungen, kann fancybox allerdings deutlich mehr. Denn damit lassen sich eben nicht nur Bilder ansprechend anzeigen, auch HTML-Elemente und YouTube-Videos können problemlos integriert werden.

Das Plug-in ermöglicht die Anzeige beliebiger HTML-Elemente. Interessant ist das beispielsweise im Zusammenhang mit einem Login-Formular.

[Beispiel anzeigen]

Bilder


Der Vorteil dieser Variante liegt auf der Hand: Um sich an der Seite anzumelden bzw. das Formular auszufüllen, müssen die Besucher keine neue Seite aufrufen. Stattdessen wird das Login-Formular in einer Lightbox angezeigt. Wie das Formular letztendlich aussieht, bleibt dabei natürlich Ihnen überlassen.

<div style="display:none">
             <form id="login_form" method="post" action="">
                         <p id="login_error">Geben Sie bitte die Login-Daten ein</p>
                         <p>
                                    <label for="login_name">Benutzername: </label>
                                    <input type="text" id="login_name" name="login_name" size="30" />
                         </p>
                         <p>
                                    <label for="login_pass">Passwort: </label>
                                    <input type="password" id="login_pass" name="login_pass" size="30" />
                         </p>
                         <p>
                                    <input type="submit" value="Login" />
                         </p>

             </form>
 </div>

Entscheidend ist, dass auf dieses Formular ein Hyperlink gesetzt wird, bei dem die im einleitenden <form>-Tag angegebene ID steht. Zusätzlich wird ein Absatz definiert, der angezeigt wird, wenn die Login-Daten nicht korrekt gewesen sind. Diesem Absatz wird die ID zugewiesen.

<a href="#login_form" id="tip5" title="Login">Anmelden</a>

Was jetzt noch fehlt, ist die Definition, die angewendet wird, wenn die Anmeldedaten fehlerhaft gewesen sind.

$("#tip5").fancybox({
             'scrolling' : 'no',
             'titleShow' : false,
             'onClosed' : function() {
                 $("#login_error").hide();
             }
 });

Wie nun die Eingaben überprüft werden, legen Sie selbst fest. Im aktuellen Beispiel wird lediglich überprüft, ob überhaupt etwas eingegeben wurde. Ist das der Fall, werden die eingegebenen Informationen in einem Antwortfenster via Ajax angezeigt.

$("#login_form").bind("submit", function() {
            if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {                 $("#login_error").show();                 $.fancybox.resize();                 return false;             }             $.fancybox.showActivity();             $.ajax({                         type                 : "POST",                         cache   : false,                         url                   : "login.php",                         data                 : $(this).serializeArray(),                         success: function(data) {                                    $.fancybox(data);                         }             });             return false; });

Über url wird die Datei angegeben, die die Daten verarbeiten soll. Im aktuellen Fall werden dabei einfach die eingetragenen Informationen ausgelesen. (Diese Funktionalität steht hier leider nicht zur Verfügung, da auf dem Server PHP nicht ausgeführt wird. Sie können sich die login.htm aber herunterladen und in login.php umbenennen. Wenn Sie dann noch den url-Wert entsprechend anpassen, können Sie die Funktion nutzen).


 

YouTube-Videos anzeigen

Wie eingangs dieses Tutorials bereits erwähnt, können Sie in der Lightbox ganz einfach YouTube-Videos anzeigen. Ermitteln Sie dafür zunächst den URL des gewünschten Videos. Diesen können Sie sich direkt auf der YouTube-Seite anzeigen lassen, auf der das Videos zu sehen ist. (Kopieren Sie dazu beispielsweise einfach den URL aus der Adresszeile des Browsers). Achten Sie in jedem Fall daraus, dass am Ende des URLs feature=player_embedded#at=41 steht. Sehen Sie sich dazu auch noch einmal den Beispiel-URL an, der in diesem Tutorial verwendet wird.

[Beispiel anzeigen]

Bilder


Diesen URL geben Sie als Verweisziel des Hyperlinks an.

<a href="http://www.youtube.com/watch?v=9M77quPL3vY&feature=player_embedded#at=41" id="video" title="Bad Religion" >Video anzeigen</a>

Weiter geht es mit der Definition des eigentlichen Skripts. Hier kommen einige zusätzliche Optionen des Plug-ins zum Einsatz. (An dieser Stelle noch einmal der Hinweis auf die Seite http://fancybox.net/api, auf der sämtliche Optionen aufgeführt sind).

Eine typische Anwendung könnte folgendermaßen aussehen:

<script type='text/javascript'>
 $(document).ready(function(){
     $("#video").click(function() {
         $.fancybox({
                 'autoScale' : false,
                 'showCloseButton' : true,
                 'hideOnOverlayClick': false,
                 'href' : this.href.replace(new RegExp("watch?v=", "i"), 'v/'),
                 'type' : 'swf',
                 'swf' : {
                 'wmode': 'transparent',
                 'allowfullscreen': 'true'
                 }
         });
         return false;
     });
 });
 </script>

Entscheidend ist zunächst einmal die Option type. Denn darüber gibt man an, von welchem Typ der eingebundene Inhalt ist. Mögliche Werte sind image, ajax, iframe, swf und inline. Dabei legt man mit image fest, dass es sich um ein Bild handelt. ajax beschreibt eine Ajax-Anwendung. inline steht für eingebundenen HTML-Inhalt. Hinsichtlich der YouTube-Videos ist jedoch swf die richtige Wahl. Über href wird der URL angepasst. Verwendet werden dafür reguläre Ausdrücke.

Die übrigen Parameter sind für optische Aspekte der Lightbox da. So wird beispielsweise über showCloseButton festgelegt, dass eine Schließen-Schaltfläche zu sehen ist.


Fazit

Lightbox-Anwendungen gibt es im jQuery-Umfeld bekanntermaßen recht viele. fancybox hebt sich allerdings aufgrund seiner Fähigkeiten zur Darstellung alternativer Inhalte wohltuend ab.


vBulletin 0.047 • ZF-App 0.65 • Total 0.696