jQuery - En enkel lightbox effekt

I den här artikeln kommer jag att gå igenom hur du snabbt och enkelt skapar en egen lightbox effekt med hjälp av jQuery och CSS. Om du inte vet hur en lightbox effekt ser ut så kan du se ett exempel här: http://leandrovieira.com/projects/jquery/lightbox/. Vi kommer inte att göra en lika avancerad effekt, men den kommer att uppfylla samma syfte i alla fall.

Demo

Gör du allt korrekt i denna artikel så kommer slutprodukten att se ut så här:
http://www.aspkoll.se/sandbox/lightbox-effect-1/

Förutsättningar

Jag förutsätter att du redan kan grunderna i jQuery. Om inte så rekomenderar jag att du läser lite mer om det innan, exempelvis på jQuery.com. Jag förutsätter även att du har grundläggande CSS kunskaper.

XHTML

Vi börjar med att skapa XHTML koden som kommer att ligga till grund för vårt projekt.

<a href="#" id="trigger">Visa</a>

<div id="box">
    <h2>Lignbox effekten</h2>
    <p>Denna ruta kommer fram när du klickar på länken "visa"</p>
    <p><a href="#" id="close">Stäng</a></p>
</div>

<div id="background"></div>

Det första vi skapade är länken, "trigger", som vi ska klicka på för att visa rutan. Vi skapade även "box" som är den lilla rutan som kommer att visas med lite information i den. Inuti den boxen placerade vi även en liten länk som ska stänga ner hela rutan, den kallas för "close".

Sist men absolut inte minst så skapade vi en DIV som vi kallar för "background". Det är den DIV:en som kommer att blir den svarttransparenta bakgrunden som kommer att skapa denna lightbox effekten.

CSS koden

Innan vi börjar med jQuery koden så behöver vi lägga lite stil på XHTML koden som vi skapade innan. Då börjar vi med själva "background":

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

Innan vi går vidare så måste jag förklara "problemet" med ovanstående kod. Kortfattat så behöver jag bara säga: Internet Explorer <=7, men jag ska förklara lite mer.

Det är så att Internet Explorer inte klarar av att hantera opacity så värst bra, inte heller klarar den av min-height och min-width. Microsoft skyller på resursbrist, men man vet aldrig. Hur som helst, jag har inte testat koden i IE8, så jag är inte säker på om den fungerar bättre där eller inte, så ni får gärna skriva i kommentaren ifall CSS koden fungerar eller inte. Koden fungerar i Firefox.

Vi fortsätter med "box":

#box{
    display:none;
    position:fixed;
    top:100px;
    left:50%;
    margin-left:-200px;
    width:400px;
    background:#fff;
    padding:10px 15px;
    border:2px solid #ccc;
    z-index:1001;
}

Som du märker så har jag ett högre z-index värde på "box" än på "background", och det är ju självklart, eller hur? Vi vill ju att boxen ska ligga ovanför bakgrunden.

jQuery

Nu när vi är klara med XHTML och CSS koden så är det dags att sätta igång med magin. I din JavaScript fil skriver du följande kod:

$(document).ready(function(){
    $('a#trigger').click(function(){
        $('#background, #box').fadeIn(300);
    });
    $('a#close').click(function(){
        $('#background, #box').fadeOut(300);
    });
});

Koden är mycket enkel. När man klickar på länken "trigger" så visas båda DIV:arna och när man klickar på "close" så göms båda. Egentligen är det klart redan nu, men jag ska utveckla detta lite mer nedan.

Utveckla mera

Det här är bara en grund, d.v.s. att du kan utveckla det hur mycket du vill. Istället för att ladda ner ett helt plugin som tar upp plats så kan man bygga ett eget plugin som vi gjorde ovan, om man bara behöver något enkelt d.v.s. Det tar inte mycket plats och man har mer kontroll över koden.

Det man kan göra är att sätta ovanstående jQuery kod i en funktion så man kan anropa den om och om igen. Du kan antingen skapa en jQuery funktion eller en vanlig JS funktion som anropas. Varför? Säg t.ex. att du vill ha olika innehåll i "box" beroende på vad du klickar på, då kan du skicka med den informationen in i funktionen och publicera innehållet i "box".

Ett exempel är ett litet fotogalleri där jag sparar sökvägen för bilden i länkens titel. När man klickar på en av länkarna så kommer jQuery att hämta sökvägen och lägga in en bild i boxen:

function lightbox(content){
    $('#background, #box').fadeIn(300);
    $('#box').html(content);
}
$(document.ready(function(){
    $('#gallery a').click(function(){ 
        lightbox( '<img src="' + $(this).attr('titel'); + '" alt="" border="0" />'); 
    });
    $('a#close').click(function(){
        $('#background, #box').fadeOut(300);
    });
});

och XHTML koden:

<div id="gallery">
    <a href="#" titel="bild1.jpg">Bild 1</a>
    <a href="#" titel="bild2.jpg">Bild 2</a>
    <a href="#" titel="bild3.jpg">Bild 3</a>
    <a href="#" titel="bild4.jpg">Bild 4</a>
</div>

Du kan istället för länkar ha mindre bilder som man klickar på så visas den stora versionen av bilden istället. Man kan göra mycket.

Slutord

Vi har skapat en mycket enkel lightbox effekt. Artikeln är inspirerad av cssjockey.com. Med reservation för stavfel.

Skapades: 2009-11-15 12:33:20
Skribent: Shadi
Lästs 2765 gånger
Betyg: 0 (artikeln har endast 4 röster, det krävs minst 5 för ett betyg)

Kommentarer

Erik sa den 15 november 2009 kl 19:22:

Mycket bra artikel, kommer klart användas :)

chrillemeter sa den 15 november 2009 kl 19:36:

Intressant och läsvärd artikel.

voigtan sa den 15 november 2009 kl 21:07:

OK artikel, dock hade jag kört in "design" bitarna som bakgrunden med jQuery, så man inte ha ett HTML element i "onödan".

edvinlinden sa den 17 november 2009 kl 00:33:

Mycket bra! Kommer till användning när jag nu går över till jQuery istället för att koda denna lightboxgrejen och resterande javscript grejer jag behövt själv.