Website Lightbox Popups erstellen?

2 Antworten

hummelxy
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
05.03.2015, 18:31

Hallo zusammen,

in diesem kleinen Beitrag erläutere ich euch, wie ihr eine tolle und einfache "Lightbox" in euren Blog, eure Website oder wo auch sonst einbinden könnt.

Zunächst müssen wir uns mal fragen, was eine Lightbox eigentlich ist...

Eine Lightbox ist eine Box, die sich öffnet, sobald man etwas auf einer Website anklickt. Wenn ich also eine Infomeldung ausgeben möchte und diese durch einen Link aufrufbar sein soll, ist diese Lightbox perfekt geeignet. Aber auch Bilder kann man in dieser Lightbox anzeigen lassen. Man muss einfach nur bestimmte Angaben ändern.

Nun fangen wir mal an!

Zunächst müssen wir die Library "jQuery" in unsere Website einbinden. Anstatt diese Library herunterzuladen, hochzuladen und in die Website einzubinden nutzen wir die Möglichkeit von Google: 

 <script src="LINK zu JQUERY"></script>

Damit haben wir nun eine Library in unserem Blog. (Dieses Snippet muss zwischen dem Head Bereich eingefügt werden!) [SCRIPT]Dieses Script wird nun vom Clienten beim Aufruf der Website geladen. Allerdings nicht von deinem Server, sondern von Google - dass stellt aber kein Problem dar.

Als nächstes brauchen wir unsere Script als Ergänzung zur Library. Dieses Script nutzt die "fadein" und "fadeout" Funktion der Library. So entsteht ein schöner Übergang beim Ein- und Ausblenden. 

$("a#lightbox").click(function(){
    $("#hintergrund, #anzeige").fadeIn(300);
 })
 $("a#out").click(function(){
     $("#hintergrund, #anzeige").fadeOut(300);
 })

Dieses Script wird mit dem "" Tag in den Body der Website eingefügt. Am besten setzt ihr das Script direkt vor den "</body" Tag. Nun steht schonmal die Technik. Wir brauchen jetzt nurnoch das Gerüst (html) und den Style (CSS):

<a id="lightbox" href="#">Anzeigen</a>

<div id="anzeige">
    <p>Hier ist dein toller Infotext!</p>
        <a id="out" href="#"><img src="LINK" height="30" width="30" /></a>
    </p>
</div>

<div id="hintergrund"> </div>

Zur Erklärung:

Die ID "lightbox" beim Link "Anzeigen" ruft die Box hervor. Wenn ihr also ein Bild dort anzeigen lassen wollt, müsst ihr dem Bild diese ID geben. Nun wird das Overlay und die Box hervorgerufen. Die ID "hintergrund" ist der schwarze, transparente Hintergrund. Dieses Snippet könnt ihr theoretisch überall im Body setzen, vollkommen egal. Zur besseren Übersicht rate ich euch aber, dieses Snippet direkt unter den Rest zu setzen. Die ID "anzeige" zeigt nun die komplette Box mit dem Inhalt an. Die letzte ID "out" definiert, dass die Box geschlossen werden soll. Auch dieses Snippet könnt ihr setzen wo ihr wollt, eben dort, wo es am besten für euch passt.

Nun brauchen wir noch die Styles: (Mit dem style Tag im Head Bereich einfügen!)

#hintergrund {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 z-index:1000;
}


#anzeige {
 display:none;
 position:fixed;
 top:100px;
 left:50%;
 margin-left:-200px;
 width:400px;
 background:#fff;
 padding:10px 15px 10px 15px;
 z-index:1001;
 text-align: center;
}

#out {
    position: absolute; 
    top: 0px;
    right: 0px;
  }

Zur Erklärung:

Die ID "hintergrund" zeigt den Hintergrund an, die ID "anzeige" zeigt die Box an und die ID "out" positioniert das close icon. Alle drei ID's könnt ihr im CSS Teil ändern und auf eure Wünsche anpassen. Auch hier zur Anmerkung: Das Design sagt nichts über die Qualität der Box aus! ;-)

Wer das komplette Script als Auszug in einer html Datei haben möchte: 

<html>
<head>
<title>
Tolle Box!
</title>
<style>
#hintergrund {
     display:none;
     background:#000000;
     opacity:0.9;
     filter:alpha(opacity=90);
     position:absolute;
     top:0px;
     left:0px;
     min-width:100%;
     min-height:100%;
     z-index:1000;
    }


    #anzeige {
     display:none;
     position:fixed;
     top:100px;
     left:50%;
     margin-left:-200px;
     width:400px;
     background:#fff;
     padding:10px 15px 10px 15px;
     z-index:1001;
     text-align: center;
    }

    #out {
        position: absolute; 
        top: 0px;
        right: 0px;
      }
</style>
<script src="LINK zu JQUERY"></script>
</head>

<body>
<a id="lightbox" href="#">Anzeigen</a>

    <div id="anzeige">
        <p>Hier ist dein toller Infotext!</p>
            <a id="out" href="#"><img src="LINK" height="30" width="30" /></a>
        </p>
    </div>

    <div id="hintergrund"> </div>

<script>
$("a#lightbox").click(function(){
        $("#hintergrund, #anzeige").fadeIn(300);
     })
     $("a#out").click(function(){
         $("#hintergrund, #anzeige").fadeOut(300);
     })
</script>
</body>
</html>

Hier findet ihr das Script in Action: 

Wenn ihr möchtet, dass das Script direkt beim Aufruf der Seite gestartet wird, ändert die Snippets wie folgt:

CSS // #anzeigen { display:none; } CSS // #hintergrund { display:none; }

Jeweils "display:none;" entfernen!

Viel Spaß damit,

Hummel

PS: Bitte beachten, dass alle Links im Code nicht zusammengeschrieben wurden, da gutefrage meinen Post sonst als Spam interpretiert!
Eutervogel
Nutzer, der sehr aktiv auf gutefrage ist
im Thema HTML
05.03.2015, 08:27

Das ist nicht sonderlich aufwendig. Google mal nach fancybox.  Ein bisschen jquery einbauen und links mit dem entsprechenden rel Attribut um die Bilder setzen. 


Oh ich hab gerade erst deinen link angeklickt. Das ist natürlich etwas anderes.  Benutzt du irgendein CMS ?