Fotogalleri01 from Petter Andresen

Fotogalleri med Photoshop, Dreamweaver og LightBox 2.0

Dette har jeg gjort på forhånd: Jeg har valgt ut 24 bilder og laget web-versjoner for “thumbnails” og stor visning. De store har jeg lagret i en folder som jeg kaller gallery. Disse bildene har en fast bredde på 800 px. Thumbnailene har jeg lagret i en folder kalt “th”, og alle er skalert til 180 x 120 px. Disse to folderne har jeg lagt i en folder kalt “fotogalleri_1”. Den videre teksten forholder seg til slides'ene ovenfor, med samme nummer rekkefølge. Merk deg at du kan klikke på knappen for fullskjermsvisning om du ikke ser alle detaljene. “esc”-knappen på tastaturet forminsker til opprinnelig størrelse.

  1. Åpne et nytt Photoshop-dokument; Presets; Web; 1024 x 768 px. Dette er størrelsen til en normal LapTop-skjerm, og et helt greit utgangspunkt.
  2. Jeg har laget et bakgrunnsbilde med bredde 950 px (ikke 959) som jeg kopierer inn på et nytt layer og midtstiller over den hvite bakgrunnen. Her er det et godt tips å bruke align-knappene i Photoshop.
  3. Jeg lager en rød kloss på 180 x 120 px på et nytt layer og kopierer layeret seks ganger. Så flytter jeg det siste layeret lengst til høyre, sånn at jeg bestemmer posisjonen til ytterste høyre og ytterste venstre markering for thumbnails.
  4. Jeg bruker align-knappene i Photoshop til å få alt på plass; distribuert og felles topp/bunn-linje.
  5. Jeg slår sammen alle layerene med røde klosser og kopirer det til fire (6 x 4 = 24 bilder), bruker align-knappene og lager et pent layout før jeg slår sammen disse fire layerene til ett.
  6. Jeg oppretter hjelpelinjer kant-i-kant med alle bildeobjektene i layoutet mitt. Hvis du bruker tryllestaven til å markere de røde klossene er det litt lettere å finne kantene med snap-to funksjonen i hjelpelinjeverktøyet.
  7. Hent fra Slice-verktøyet og bruk knappen på toppen av siden; “Slice From Guides”; for å slice opp hele siden din.
  8. Bruk så Slice Select-verktøyet til å gruppere alle slicer som henger logisk sammen. Hold Shift inne mens du klikker på flere. Ctrl-klikk på en av de markerte og velg kommandoen Combine Slices.
  9. Dobbeltklikk på den øverste slicen i midten (hvit) og velg Slice Type: No Image og skriv Greetings from Great Britain i tekstfeltet. Du kan gjøre det samme medalle de hvite fleltene og eventuelt skrive en footer-ekst i feltet under hovedbildet.
  10. Når du har gjort alle forberedelsen kan du bruke kommandoen Save for Web & Devices. Bruk Slice Select-verktøyet og marker alle bitene og se til at de er i jpg, medium kompresjon.
  11. Marker for HTML and Images og XHTML før du lagrer prosjektet i den samme folderen hvor du lagret “th” og “gallery”-mappene.
  12. Nå kan du jo finne fra til prosjketfolderen din og teste html-dokumentet ditt. Det skal se omtrent sånn ut. Prøv å flytt på noen av klossene og merk deg at alt er sammen som et puslespill.
  13. Åpne så dette dokumentet i eller med Dreamweaver. Opprett en ny Site for dette prosjktet. Selv om du nå har tre foldere med bilder (images, gallery og th) setter du imaes til Default.
  14. Photoshop har lagt alle slicene inn i en tabell – og det er det du nå får opp i Dreamweaver.
  15. Det første jeg gjør er å opprett en DIV-tag (ID) for å midtstille tabellen på siden. Lag en ID som du kaller wrapper. Du kan godt lagre denne i html-dokumentet, altså ikke en ekstern CSS.
  16. Under Box setter du bredden til 1024 og margin-left/right til auto. Marker tabellen og bruk Insert DivTag knappen til å sette #wrapper rundt helle tabellen.
  17. Neste skritt er å erstatte alle de røde klossene med småbildene fra th-mappen.
  18. Dette tar litt tid, så prøv å lag deg en forenklet rutine. Hvis du dobbeltklikker på den røde klosse kommer du rett inn images-folderen. Her han du legge en snarvei til th-folderen og gi den navnet 000 så ligger den øverst, dermed er du bare to klikk unna.
  19. Nå er det på tide å bruke CSS'en til å fikse litt på tekst og marger …
  20. Jeg erstattet også himmelen over London med en celle med samme farge – siden den var så godt som ensfarget. Dermed kan jeg også skrive tekst i denne cellen. Dersom du vil at dette dokumentet skal validere validator.w3.org må du også alle bilde-slicene en alt-tittel. Begynn med alle thumbnailene. Du kan gi dem samme navn; “Thumbnail” – så er det bare kopier og lim inn. Deretter kan du kjøre en søk/erstatt i kodemodus. Finn: alt ="" Erstatt med: alt="bgImage".
  21. Last ned LightBox 2.0. Pakk ut og legg i prosjektfolderen.
  22. Flytt folderene “js” og “css” til samme nivå som ”gallery”, “images” og “th”.
  23. Da skal det sånn ut (nye mapper er markert med grønt).
  24. Flytt alle bildene fra images-folderen i lightbox2-folderen til den images-folderen der du har alt det andre.
  25. Så åpner du index.html i lightbox2-folderen i Dreamweaver, i kode-modus. Kopier linjene:
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

    Og lim dem inn i fotogalleriet, i kodemodus, rett under <title></title>.
  26. For å få LightBox-effekten til å virke må du nå legge til, i kodemodus følgende attributt på hver thumbnail:
    rel="lightbox[roadtrip]". Første ledd er for å adressere handlingen (åpne bilde) til javascriptet i js-folderen. Roadtrip er for at du har flere enn ett bilde i lightbox'en din. Dette arbeidet går litt raskere hvis du setter Dreamweaver i Split-modus. Kopier ordene lightbox[roadtrip] – klikk på bildet og sett inn cursor rett etter a href="gallery/1.jpg". Klikk spacebar og skriv rel og klikk tab så spretter cursor rett inn mellom "". Lim inn og gå videre til neste bilde.
  27. Sjekk ut siden din – den skal fungere som her:
  28. Dersom du vil sett inn en tittel på pop-up-bildet setter du inn attributtet title="bildetittel" rett etter rel="lightbox[roadtrip]".
  29. Og sånn skal det se ut med tittel … NB! Hvis du først setter inn tittel på ett bilde må du følge opp på alle. Ellers vil LightBox/roadtrip ta med seg en singel tittel til de etterfølgende bildene.