jQuery Tools – Overlay / Lightbox

Wie versprochen hier der zweite Teil der jQuery Tools Serie.

Heute zeige ich euch wie super leicht es ist, die Overlay bzw. Lightbox Funktion zu nutzen.
Ich möchte euch dies in zwei Varianten zeigen: mit und ohne Ajax!
Meine Lieblingsvariante ist natürlich mit Ajax damit fangen wir gleich mal an, doch vorerst gehe bitte auf die jQuery Tools Seite und sauge dir folgende Libs. runter.

Soda jetzt kanns schon losgehen.

Variante 1 – Dynamischer Content über Ajax
Was brauchen wir alles?

• HTML Teil
• CSS Teil
• Javascript mit Ajax

Starte Overlay
Starte Overlay mit anderem Content

Damit haben wir den Grundcontainer, der Inhalt kommt nur in die contentWrap Classe rein.

$("a[rel=#overlay]").overlay({
    expose: '#fbfbfb',
    effect: 'apple',
    onBeforeLoad: function() {
        var wrap = this.getContent().find(".contentWrap");
        wrap.load(this.getTrigger().attr("href"));
    },
    onClose: function() {
        if ($("#overlay").hasClass('content-overlay')) {
            $("#overlay").removeClass('content-overlay');
        }
    }
});

Was macht der Code?
Er sucht uns alle Links raus wo der REL Tag Overlay ist, weiteres definieren wir mit “expose” die Hintergrundfarbe und den Effekt wie das ganze aufgehen soll, in diesem Fall “apple” wie kann es auch anderes sein
Weiteres können wir hier bevor her die Box aufklappt den Content laden und zwar greift er nun auf den href vom Link Tag zu. In unserem Beispiel wäre das “overlay.php”

CSS Teil:

/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
    height:441px;
    overflow-y:auto;
    margin-left:40px;
    margin-top:35px;
}

.overlay {
    display:none;
    background-image:url(../images/overlay.png);
    width:941px;
	height:450px;
}

.content-overlay {
	width: 800px;
	height: 650px;
	background-image:url(../images/overlay-content.png);
	padding: 10px;
}

.content-overlay div.contentWrap {
	height: 650px;
}

/* default close button positioned on upper right corner */
.overlay div.close {
    background-image:url(../images/close.png);
    position:absolute; right:-0px; top:-2px;
    cursor:pointer;
    height:33px;
    width:32px;
}

wichtig ist du brauchst folgende Bilder:
1) Hintergrundbild vom Contentberreich
2) Hintergrundbild vom versteckten Bereich
3) Bild für den Closebutton

Achte darauf das das Bild für den versteckten Bereich a png24 ist, das das ganze auch transparent ist.

so jetzt haben schon mal den gesamten HTML, CSS und Javascript abgedeckt. Nun kommt noch der PHP Teil, der nun wirklich nicht mehr schwer ist.

//output ajax call overlay
if($_GET['mode'] == 1) {
      echo 'Hello World';
} elseif($_GET['mode'] == 2) {
      echo 'Hello Mars and Jupiter';
}

das war nicht schwer oder?

Nun zur Variante 2: eine kleine Bildershow

Den CSS Code können wir uns von oben kopieren, der JS Code wird etwas kleiner, dafür kommt mehr HTML dazu.

JS Code:

$("img[rel]").overlay();

Wichtig: achte immer darauf das der REL Tag inhalt der selbe ist wie die ID von deinen Overlay Container.

So war doch nicht so schwer, hoffe ich habe dir damit einen kleinen Einblick in den Techniken der Overlay Class von jQuery Tools gegeben.
Alle weiteren Informationen findest du unter jQuery Tools Overlay Demo.