Anzeige
Tutorialbeschreibung

jQuery - eine Lightbox für (fast) alle Inhalte

jQuery - eine Lightbox für (fast) alle Inhalte

Dass sich Bilder dank jQuery sehr einfach in einer Lightbox präsentieren lassen, wurde auf PSD-Tutorials.de bereits gezeigt. In diesem Tutorial wird ein weiterer Lightbox-Clone vorgestellt. Mit dem fancybox-Plug-in lassen sich allerdings nicht nur Bilder in einer Lightbox anzeigen, auch beliebige HTML-Inhalte und Videos können problemlos integriert werden. Bei aller Funktionsvielfalt kommt erfreulicherweise eine sehr einfache Bedienung des Plug-ins hinzu.


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.



Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von 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
  • 01.06.2011 - 13:22

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

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 25.02.2011 - 09:49

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

Portrait von 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
-versteckt-(Autor hat Seite 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

Portrait von 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 ???

Portrait von blacksite
  • 02.11.2010 - 20:20

Echt klasse vielen Dank

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 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

Portrait von peterschek
  • 31.10.2010 - 13:06

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

Portrait von flyjoker
  • 30.10.2010 - 19:49

Sehr genial mit dem Zusatz der Login Möglichkeit.

Portrait von Hannes1709
  • 30.10.2010 - 11:24

Super einfache Variante - gleich mal testen.

Portrait von Entry
  • 30.10.2010 - 02:23

Danke für die Beschreibung

Portrait von ikey
  • 29.10.2010 - 18:51

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

Portrait von 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 :)

Portrait von propixel
  • 29.10.2010 - 15:58

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

Portrait von 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.

x
×
×