jQuery - Ett simpelt fotoarkiv

I den här artikeln kommer jag att gå igenom hur man enkelt kan skapa sitt eget fotogalleri eller fotoarkiv. Det krävs att du är med och förstår varje steg som görs. Det är inte så mycket kod, tvärtom det är väldigt lite kod och man kan nog minska mängden kod ännu mer om man vill, men jag har valt denna kod av pedagogiska skäl.

Mål

Målet med det här projektet är att vi ska kunna skriva ut våra bilder i en lista (<ul>) och sedan göra om listan till ett galleri där vi har en "Next"-länk och en "Prev"-länk som ska hjälpa oss bläddra igenom vårt galleri.

Demo

Om du följer denna artikel strikt så kommer slutprodukten att se ut så här:
http://www.aspkoll.se/sandbox/foto-gallery-1/

XHTML

Vi börjar med att skriva ut den XHTML koden som vi behöver.

<ul id="gallery">
    <li><img src="1.jpg" alt="" /></li>
    <li><img src="2.jpg" alt="" /></li>
    <li><img src="3.jpg" alt="" /></li>
    <li><img src="4.jpg" alt="" /></li>
    <li><img src="5.jpg" alt="" /></li>
    <li><img src="6.jpg" alt="" /></li>
    <li><img src="7.jpg" alt="" /></li>
    <li><img src="8.jpg" alt="" /></li>
</ul>

Inget konstigt med koden ovan, eller hur?

CSS

Nu behöver vi lägga till lite CSS kod för att få det här att se bra ut. I mitt galleri vet jag att bredden på bilderna är max 500 pixlar och att höjden är max 375 pixlar. Det underlättar för mig.

#gallery {
    position:relative;
    width:500px;
    height:375px;
    overflow:hidden;
    list-style-type:none;
    margin:0;
    padding:0;
    z-index:1;
}

#gallery li { float:left; display:none; }

#gallery li img { width:500px; height:375px; border:none;}

Jag började med att ta bort standard listutseendet och satte en fast storlek på hela listan. Det du behöver vara uppmärksam på är att jag har satt "position" till "relative", detta för att jag ska använda "float:left" på <li> (man kan även använda "position:absolute" på <li> om man vill). Det gör vi för att vi ska kunna placera vår navigation ovanför alla bilder. Det kommer du att märka nedan. Vi fortsätter:

#prev, #next {
    position:absolute;
    z-index:2;
    width:50px;
    height:375px;
    cursor:pointer;
    line-height:375px;
    color:#fff;
    text-align:center;
    font-weight:bold;
    text-indent:-99999px;
}
#next { right:0; }
#prev:hover, #next:hover {
    background:rgb(255,255,255);
    background:rgba(255,255,255,0.4);
    text-indent:0;
}

När vi skriver vår jQuery kod så kommer vi att skapa två st. DIV:ar som kommer att ges ID "next" och "prev". Ni kan använda länkar istället för DIV:ar, det är upp till er. Se bara till att använda korrekt CSS kod.Det är de som målas i koden ovan.

Jag gav navigationen en genomskinlig vit färg med hjälp av "rgb()" som definierar färgen utan någon transparens och "rgba()" som sätter transparensen till "0.4", d.v.s. 40% vit transparens.

jQuery

Vi lägger all vår JS kod i DOM-ready:

$(document).ready(function() {
   ..HÄR LÄGGER VI ALL KOD...
}

Vi börjar med två variabler, den ena ska hålla kåll på vilken <li> (bild) som visas medan den andra ska hålla koll på antalet bilder som finns i galleriet.

var currentEq = 0;
var amount = $('#gallery li').size();

Med tanke på att vi har gömt alla <li> i CSS koden så behöver vi visa den första, plus att vi ska nu lägga till vår navigation:

$('#gallery li:eq('+currentEq+')').fadeIn(1000);

$('#gallery').append('<div id="prev">Prev</div><div id="next">Next</div>');

Nu skapar vi den funktionen som ska hantera "prev", d.v.s. att vi bläddrar bakåt i galleriet:

$('#prev').click(function(){
    var prevEq = currentEq-1;
    $('#gallery li:eq('+currentEq+')').fadeOut(300, function(){
        if(prevEq<0){
            currentEq = amount-1;
            $('#gallery li:eq('+currentEq+')').fadeIn(300);
        }else{
            $('#gallery li:eq('+prevEq+')').fadeIn(300);
            currentEq--;
        }
    });
});

Det första vi gör är att vi tar reda på vilket värde (position) föregående bild kommer att få. Från början är positionen 0, d.v.s. den första bilden visas. Trycker vi på "prev" så kommer nästa bild som visas (föregående bild i ordning) att ha värdet "-1" (0-1 = -1).

Vi gömmer den nuvarande bilden med "fadeOut()". Då kanske du undrar hur vi får tag på den bilden som visas? Som sagt, vi har variabeln "currentEq" som håller koll på vilken bild som visas, eller snarare vilken <li>. Så med hjälp av ":eq"-kommandot så kan vi plocka det <li> vi vill. Vill vi t.ex. plocka den tredje <li> så skriver vi "eq(2)" (eftersom räkningen börjar på 0). Hänger du med?

När bilden har gömts så kollar vi ifall värdet på "prevEq" är mindre än 0. Om det är det så vet vi att vi nu försöker bläddra tillbaka från första bilden, och då vill bi att det ska gå runt eller hur? Så att sista bilden visas. Det är här "amount" kommer in i bilden. Vi ger "currentEq" värdet på antalet bilder minus 1. Varför? Vi vet ju att räkningen på positioner börjar på 0 eller hur? Så om vi har åtta bilder så kommer den högsta positionen vara 7!

Nu när vi har räknat ut det så visar vi bilden, d.v.s. den sista bilden i ordningen. Om det är så att "prevEq" inte får ett minusvärde, alltså om vi håller på o navigerar oss från bild 5 till 4 så behöver vi bara att göra det som vanligt. Sen ändrar vi på positionen av "currentEq" med minus 1, så vi håller koll på vilken position vi är på.

Koden nedan är till för "next"-knappen. Jag kommer inte att gå igenom den, eftersom principen är den samma som på förra koden, så det blir bara upprepningar annars.

$('#next').click(function(){
    var nextEq = currentEq+1;
    $('#gallery li:eq('+currentEq+')').fadeOut(300, function(){
        if(nextEq==amount){
            $('#gallery li:eq(0)').fadeIn(300);
        }else{
            $('#gallery li:eq('+nextEq+')').fadeIn(300);
        }
    });
    if(currentEq==amount-1){ currentEq = 0; }else{ currentEq++; }
});

För att se "next" och "prev" länkarna så får man peka på kanterna av bilden.

Lägger ihop hela JS koden

$(document).ready(function() { //perform actions when DOM is ready
    var currentEq = 0; //Keeps track of current image
    var amount = $('#gallery li').size(); //Get the amount of pictures
    
    $('#gallery li:eq('+currentEq+')').fadeIn(1000); //Display the first image
    
    $('#gallery').append('<div id="prev">Prev</div><div id="next">Next</div>'); //Add the navigators
    
    $('#prev').click(function(){
        var prevEq = currentEq-1;
        $('#gallery li:eq('+currentEq+')').fadeOut(300, function(){
            if(prevEq<0){
                currentEq = amount-1;
                $('#gallery li:eq('+currentEq+')').fadeIn(300);
            }else{
                $('#gallery li:eq('+prevEq+')').fadeIn(300);
                currentEq--;
            }
        });

    });
    
    $('#next').click(function(){
        var nextEq = currentEq+1;
        $('#gallery li:eq('+currentEq+')').fadeOut(300, function(){
            if(nextEq==amount){
                $('#gallery li:eq(0)').fadeIn(300);
            }else{
                $('#gallery li:eq('+nextEq+')').fadeIn(300);
            }
        });
        if(currentEq==amount-1){ currentEq = 0; }else{ currentEq++; }
    });
    
});

Slutord

Det här är ett mycket simpelt sätt att skapa ett eget galleri på. Man kan lägga till många olika typer av effekter, designa snyggare och lägga till nya funktioner. Meningen med det här var dock bara att ge ett tips på hur ni kan gå till väga.

Med reservation för stavfel!

Skapades: 2009-11-16 01:38:09
Skribent: Shadi
Lästs 1706 gånger
Betyg: 0 (totalt 5 röster)

Kommentarer

Oggeh sa den 16 november 2009 kl 04:02:

Snyggt och snabbladdat, hur skulle det vara om man gav varje bild ett id och länkarna får "ankare" med id:et för direktlänkning. Bra artikel

voigtan sa den 16 november 2009 kl 09:25:

Shadi! Det svider att se att du sätter höjd och bredd + border i ett HTML element, det är ju design bitar! Sen verka den bugga lite när man ha lite för bråttom att klicka sig förbi

edvinlinden sa den 16 november 2009 kl 11:08:

Inte säker på detta men "måste" man inte ha höjd och bredd för att koden ska validera rätt?

Shadi sa den 16 november 2009 kl 11:52:

Oggeh, det kan du göra om du vill, men i detta fall behövs det inte eftersom vi plockar ut alla bilder genom att plocka alla img-elementen samtidigt och går efter positionen. Men självklart kan du ha ID på de om du känner att det passar mer till ditt projekt.

Evl, det är inte ett måste att ha med height och width, http://www.w3.org/MarkUp/html3/img.html, det var det förr i tiden =)

Voigtan, det har du rätt i, jag ska lägga in höjden och bredden i CSS filen istället. Det där med buggen, jag får den bara om jag spammar musknappen riktigt snabbt, då bläddrar den inte, men börjar jag bläddra igen i "normal" takt så är det lugnt. Man kan ju sätta en timer eller liknande om man vill så att nästa klick inte aktiveras förrän den förra animationen är färdig.

Perjoh91 sa den 14 december 2009 kl 01:57:

Hur gör man så att bilderna automatiskt ändras typ efter 5 sekunder

voigtan sa den 14 december 2009 kl 06:42:

Perjoh91: Du få göra om en del i skriptet för att bygga in en timer som gör samma event som det är när du klickar, jag skapade ett liknande skript i början av året som du kan ta dig en titt på: http://voigt.se/sandbox/imagerotator2/