Je Homepage: fotogallerie met Lightbox 2

In de serie "Je Homepage" gaan we ons nu bezig houden met het maken van een fotogallerie.

Ook door HCC leden worden namelijk veel foto's gemaak en niet alleen meer met een foto camera. Je laat ze zien op je smartphone of deelt ze via social media.
Maar waarom zet je ze niet op je homepage, die je toch al hebt, en kan je de mooiste selecteren, waarna iedereen ze kan bekijken.

Ik heb eerder al laten zien hoe je foto's op een leuke manier kan presenteren op je homepage (Tips "Je Homepage": fotoalbum).
Nu gaan we een fotogallerie maken en we gebruiken daarvoor Lightbox 2. Door op een foto te klikken kunnen de foto's op groot formaat bekeken worden en kan je de foto's in de betreffende foto gallerie "doorbladeren".

Voor wie is deze 'workshop'?

Het is voor alle leden die ooit met een website begonnen zijn op hccnet of bij de internetprovider, maar er daarna weinig of niets mee gedaan hebben.

Er is dus kennis aanwezig hoe een website opgebouwd is en wat HTML zijn en wat CSS is. Het maakt verder niet uit welke software voor het maken van de website is gebruikt.

Ter info:
Voor je aan de slag kan moet je eerst het bestand FotoGallerie.rar downloaden.

Gebruik gewoon je oude vertrouwde werkwijze en software. Ik gebruik zelf Dreamweaver als editor. Onderaan deze pagina een aantal handige links naar o.a. webeditors.

Mochten er vragen zijn, dan mag je me een e-mail sturen.

Arnold de Graaf
webmaster HCC!twente
november 2019

Inleiding
Allereerst het volgende. De opzet van de foto gallerij pagina is heel simpel zoals je hieronder kan zien.

dit grijs vlak is het beeldscherm
Naam Gallerie
Overzicht foto's
copyright 2019 JouwNaam

Op een smartphone zullen de foto's onder elkaar te zien zijn, want we maken de website volledig responsive. De website past zich automatisch aan de resolutie van het beeldscherm waarmee de fotogallerie bezocht wordt.

dit grijs vlak is het beeldscherm
Naam Gallerie
Overzicht foto's
copyright 2019 JouwNaam

We gaan gebruik maken van CSS Grid Layout voor de opmaak, maar wel op een heel simplele manier. Verder gebruiken we Lightbox 2 om de foto's groter in een pop-up venster weer te geven als erop geklikt wordt.

Ter info
Voor meer informatie met een heldere en duidelijke uitleg, incl. video's, over CSS Grid Layout op de (Engelstalige) website Grid by Example.
Hoe Lichtbox 2 werkt zie je op de pagina van de maker. Wij gaan voor het voorbeeld van de vier foto's. De benodigde files hoef je niet te downloaden, want die heb ik al FotoGallerie.rar opgenomen.

We gaan beginnen.

Pak eerst FotoGallerie.rar uit. Na het uitpakken zie je twee mappen: Begin en Eind. De namen spreken voor zich.
Je start met de map "Begin". Hierin zie je een drietal mappen:

  • css - met de css bestanden
  • images - waarin de afbeeldingen die nodig zijn
  • js - met het Lightbox 2 javascript
Je begint met index.html in deze "Begin" map.
De map Eind is het resultaat als je de stappenplan gevolgd hebt en kan je controleren of het goed gegaan is.

Open vervolgens in de map "Begin" index.html in je editor. Als het goed is zie je dan onderstaande HTML code. Dit is de basis pagina.

Ter info:
Als je een editor zonder ingebouwde browser gebruikt, open dan ook index.html in je browser. Na het opslaan, als je wat veranderd hebt, kan je meteen in de browser het resultaat zien.

HTML
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>
</title>
</head>
<body>
</body>
</html>

De pagina moet eerst nog een titel hebben. Type "Mijn Foto Gallerie" tussen de <title></title> tags. Vervolgens maken we een link naar het CSS bestand die nodig is voor de pagina opmaak.
Op de regel na de titel type je <link href="css/stijlblad.css" rel="stylesheet" type="text/css">.

Ter info
Om het overzichtelijk te houden laat ik een aantal zaken die ook tussen de <head></head> horen te staan weg. Het zal het functioneren van de pagina niet in de weg staan!

Om lightbox te laten functioneren hebben we javascript nodig, dus die link brengen we ook aan. Lightbox heeft jQuery 1.7 nodig. Heb je die niet op je website, dan moet je linken naar "js/lightbox-plus-jquery.js" anders kan je "js/lightbox.js" gebruiken.
Het script moet onderaan de pagina staan dus voor de sluitende </body> tag.
Op de regel erboven type je <script src="js/lightbox-plus-jquery.js"></script>. Als het goed is, ziet de broncode er uit, zoals je hieronder kan zien.

HTML
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>
Mijn Foto Gallerie</title>
<link href="css/stijlblad.css" rel="stylesheet" type="text/css">
</head>
<body>

<script src="js/lightbox-plus-jquery.js"></script>
</body>
</html>

Vervolgens open je stijlblad.css uit de css map.

CSS
@charset "utf-8";
/* CSS Document */
/*
############################
M E D I A Q U E R I E S
############################
*/
/*
Extra small devices (portrait phones, less than 544px)
No media query since this is the default is "mobile first" */

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

Hierboven zie je stijlblad.css, voorzien van Media Queries. Uitgangspunt is 'Mobile First'. Het betekent dat we eerst van de layout voor een smartphone uitgaan.

Lightbox 2 heeft ook voor de opmaak een eigen CSS bestand. Normaal gesproken zou die gelinkt moeten worden tussen <head></head> tags van het HTML bestand. We hebben daar al een link naar het stijlblad.css gemaakt, maar daarin kunnen we ook de link aanbrengen naar lightbox.css en dat gaan we dus als eerste doen.

Direct na de tweede regel (/* CSS Document */) type je @import url("lightbox.css");. Op deze wijze wordt lightbox.css automatisch in ons stijblad opgenomen.

Voor we verder laat ik eerst zien hoe de fotogallerie opgebouwd is.

dit grijs vlak is het beeldscherm
Naam Gallerie
Overzicht foto's
copyright 2019 JouwNaam

Hierboven zie je een viertal omkaderde onderdelen. Elk krijgt een <div></div> tag. De vier hoofdonderdelen worden voorzien van een ID-selector, omdat die maar één keer op de pagina zullen voorkomen. De foto's in het overzicht worden elk in een aparte <div></div> gezet en voorzien van een CLASS-selector (deze kunnen in tegenstelling tot een ID meerdere keren in een html document gebruikt worden).

Ter info
Voor een uitgebreide uitleg over CLASS- en ID-selectors zie deze pagina.

Het rode kader is de 'container' van de fotogallerie, deze krijgt een ID met de naam "GallerieWrapper".
Hierin zitten de volgende onderdelen:

  • naam van de Gallerie, krijgt de ID "GallerieNaam".
  • het foto overzicht. Met ID "GallerieContent"
  • de 'footer' van de gallerie met o.a. de copyrights. Met ID "GallerieFooter"

We krijgen in het html document een <div id="GallerieWrapper"></div>.
Hierbinnen komen achtereenvolgens:

  • <div id="GallerieNaam"></div>
  • <div id="GallerieContent"></div>
  • <div id="GallerieFooter"></div>

Deze drie <div>'s worden in <div> ID "GallerieWrapper" genest!
In ID "GallerieContent" worden de foto's geplaatst, elk in een eigen <div> met als CLASS "foto". In de CLASS "foto" plaatsen we voor de fotobijschrift ook een <div> met CLASS "fotobijschrift". Zo kunnen we deze ook van een eigen opmaak voorzien.

Nu de HTML structuur is vastgelegd kunnen we die invoeren in index.html.

HTML
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Mijn Foto Gallerie</title>
<link href="css/stijlblad.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="GallerieWrapper">
<div id="GallerieTitel"><h1>Naam Gallerie</h1></div>
<div id="GallerieContent">
<div class="foto"><img src="Hier link naar foto">
<div class="fotobijschrift">foto bijschrift</div>
</div>
</div>
<div id="GallerieFooter">Copyright 2019 JouwNaam</div>
</div>
<script src="js/lightbox-plus-jquery.js"></script>
</body>
</html>

Hierboven zie je het resultaat. In het wit de tags met ID/CLASS die net hebben ingevoegd. In principe hebben we nu het HTML gedeelte klaar. De <div class="foto">< /div> kan nu zo vaak gekopieerd worden als het aantal foto's dat je wil laten zien. We hoeven alleen nog Lightbox 2 op te nemen, maar eerst gaan we stijlblad.css verder aanpassen.


Voor de algemene opmaak wil ik dat de fotogallerie vrij van de boven- en onderkant van het beeldscherm is.
Daarvoor gebruik ik de algemene <body> tag. Deze krijgt de volgende eigenschappen: padding boven- en onderkant 25px en ik kies voor de achtergrondkleur met deze hex-waarde: #F5C020.

Ter info
Een kleurenthema voor je website kan je uitstekend bepalen met behulp van Adobe Color. Het kan gedaan worden met een kleurenwiel en daarbij kiezen voor verschillende regels voor kleurharmonie. Tevens kan je kleuren "laten" bepalen aan de hand van een afbeelding.

We hebben al lightbox.css geïmporteerd in stijlblad.css en nu gaan we de body eigenschappen invoeren.
Type nu:
body {
padding-top: 25px;
padding-bottom: 25px;
background-color: #F5C020;
}

CSS
@charset "utf-8";
/* CSS Document */
@import url("lightbox.css");
body {
padding-top: 25px;
padding-bottom: 25px;
background-color: #F5C020;
}

Hierboven zie je het resultaat. De toegevoegde regels zijn wit.

Nu gaan we de ID "GallerieWrapper" vormgeven. Deze ID geven we alleen maar een drietal eigenschappen: een achtergrondkleur en aan de linker- en rechterzijde een padding zodat de inhoud niet tot aan de rand doorloopt.
Type nu:
#GallerieWrapper {
background-color: #46A4E8;
padding-left: 20px;
padding-right: 20px;
}

Nu volgt ID "GallerieTitel". Ik maak de breedte van deze <div> tag 90% van de "#GallerieWrapper" en gecentreerd door linker- en rechtermarge de waarde "auto" te geven.
De onderzijde krijgt ook een marge, waardoor er meer "lucht" komt tussen "#GallerieTitel" en "#GallerieContent". Verder binnen "#GallerieTitel" aan boven- en onderzijde meer ruimte door daar de padding een waarde te geven van respectievelijk 15px en 10px. Als lettertype kies ik "Arial Black" en wordt de tekst gecentreerd en krijgt "#GallerieTitel" aan de onderzijde een 5px dikke witte border.
We kunnen nu volgende regels toevoegen aan stijlbad.css:
#GallerieTitel {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top: 15px;
font-family: "Arial Black", "sans-serif";
text-align: center;
border-bottom: 5px solid #FFFFFF;
}

Vervolgens gaan we verder met ID "GallerieContent". In deze <div> gaan we CSS Grid Layout toepassen. Op kleine beeldschermen willen we de foto's onder elkaar weeergeven en in grotere formaten in twee, drie en vier kolommen. Nu hebben we maar een tweetal eigenschappen nodig: display met de waarde grid en grid-gap en die geven we een waarde van 10px.
We typen nu de volgende regels in ons CSS bestand:
#GallerieContent {
display: grid;
grid-gap: 10px;
}

Tenslotte ID "GallerieFooter". Deze willen we op dezelfde manier vormgeven als ID "GallerieTitel". Alleen nu een border aan de bovenzijde en de tekst cursief. De volgende regels kunnen nu aan stijlblad.css toegevoegd worden:
#GallerieFooter {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
font-style: italic;
text-aling: center;
border-top: 5px solid #FFFFFF;
}

Het resultaat zie je hieronder.

CSS
@charset "utf-8";
/* CSS Document */
@import url("lightbox.css");
body {
padding-top: 25px;
padding-bottom: 25px;
background-color: #F5C020;
}
#GallerieWrapper {
background-color: #46A4E8;
padding-left: 20px;
padding-right: 20px;
}
#GallerieTitel {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top: 15px;
font-family: "Arial Black", "sans-serif";
text-align: center;
border-bottom: 5px solid #FFFFFF;
}
#GallerieContent {
display: grid;
grid-gap: 10px;
}
#GallerieFooter {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top: 10px;
font-style: italic;
text-aling: center;
border-top: 5px solid #FFFFFF;
}

Nu hoeven we alleen nog maar twee CLASSES vorm te geven.
Allereerst CLASS "foto". Een foto in de gallerie krijgt een marge van 15 px, een padding van 10 px om de foto vrij van de rand tehouden, verder een achtergrondkleur, een rand (border) en een schaduw.
We typen dus op de volgende regel in ons stijlblad:
.foto {
background-color: #FFFFFF;
margin: 15px;
padding: 10px;
border: 1px solid #000000;
box-shadow: 3px 3px 3px #000000;
}

Nu maken we een hover effect om als de muis over CLASS "foto" gaat de achtegrond een andere kleur te geven en dat de schaduw wat langer wordt. Hiervoor gebruiken we de Pseudo-class ":hover".
Op de volgende regel gaan we verder met de pseudo CLASS ".foto:hover":
.foto:hover {
background-color: #FEEDA0;
box-shadow: 7px 7px 7px #000000;
}

Verder wil ik dat elke foto in de CLASS ".foto" een rand (border) krijgt, dus alleen binen deze <div> en niet elders. Verder geven we de foto een maximaale breedte van 100% en de hoogte zetten we op "auto". Op deze manier wordt de foto automatisch aangepast aan de schermbreedte.
Dus typen we nu:
.foto img {
width: 100%;
height: auto;
border: 1px solid #000000;
}

Als laatste CLASS "fotobijschrift" om de fotobijschrift vorm te geven. De tekst wordt gecentreerd, cursief en vet.
.fotobijschrift {
text-align: center;
font-style: italic;
font-weight: bold;
}

Het resultaat zie je hieronder.

CSS
@charset "utf-8";
/* CSS Document */
@import url("lightbox.css");
body {
padding-top: 25px;
padding-bottom: 25px;
background-color: #F5C020;
}
#GallerieWrapper {
background-color: #46A4E8;
padding-left: 20px;
padding-right: 20px;
}
#GallerieTitel {

width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top: 15px;
font-family: "Arial Black", "sans-serif";
text-align: center;
border-bottom: 5px solid #FFFFFF;
}
#GallerieContent {

display: grid;
grid-gap: 10px;
}
#GallerieFooter {

width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
padding-top: 10px;
font-style: italic;
text-aling: center;
border-top: 5px solid #FFFFFF;
}
.foto {
background-color: #FFFFFF;
margin: 15px;
padding: 10px;
border: 1px solid #000000;
box-shadow: 3px 3px 3px #000000;
}
.foto:hover {
background-color: #FEEDA0;
box-shadow: 7px 7px 7px #000000;
}
.foto img {
width: 100%;
height: auto;
border: 1px solid #000000;
}
.fotobijschrift {
text-align: center;
font-style: italic;
font-weight: bold;
}

De opmaak van de pagina is nu zo goed als af voor wat de kleine beeldschermen betreft. Nu hoeven we alleen nog maar een paar aanpassingen te doen voor de bredere beeldschermen en dat doen we in de mediaqeuries. Voor breedtes van minimaal 768px geven we ID "GallerieWrapper" een breedte van 90 %, zetten we zowel de linker- en de rechtermarge op "auto" waardoor ID "GallerieWrapper" gecentreerd op het beeldscherm staat. In ID "GallerieContent" willen we de foto's in twee "kolommen" weergeven. Dit doen we door door een nieuwe eigenschap te weten "fr", dat is de afkorting van fraction. Het is dus een deel van de beschikbare breedte. Aangezien we de eigenschap grid al de waarde display gegeven hebben en de "gridgap" de waarde "10px" heeft, hoeven we nu alleen maar het volgende voor een beeldscherm van minimaal 768 px één eigenschap toe te voegen: grid-template-columns deze krijgt de waarde van 1fr 1fr.

In de media querie typen we het volgende:
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
#GallerieWrapper {
width: 90%;
margin-left: auto;
margin-right: auto;
}
#GallerieContent {
grid-template-columns: 1fr 1fr;
}
}

Voor schermbreedtes vanaf 992px brengen we de breedte van ID "GallerieWrapper" terug naar 80% en voegen we voor de grid-template-column 1fr toe.
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
#GallerieWrapper {
width: 80%;
}
#GallerieContent {
grid-template-columns: 1fr 1fr 1fr;
}
}

Voor schermen breder als 1200px voegen we tenslotte alleen 1fr toe aan de grid-template-columns.
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#GallerieContent {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}

Hieronder de Media Queries met onze aanvullingen (tekst wit).

CSS
############################
M E D I A Q U E R I E S
############################
*/
/*
Extra small devices (portrait phones, less than 544px)
No media query since this is the default is "mobile first" */

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
#GallerieWrapper {
width: 90%;
margin-left: auto;
margin-right: auto;
}
#GallerieContent {
grid-template-columns: 1fr 1fr;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
#GallerieWrapper {
width: 80%;
}
#GallerieContent {
grid-template-columns: 1fr 1fr 1fr;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#GallerieContent {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}

Nu gaan we verder met HTML.
In <div class="foto"><img src="Hier link naar foto"><div class="fotobijschrift">foto bijschrift></div></div> gaan we de nog ontbrekende gegevens invullen. Allereerst de link naar de foto: images/gallerijworkshop01.jpg met de "alt" tekst alt="foto" en title="klik voor grote foto". De fotobijschrift wordt Foto 1.
Dan wordt het dus <div class="foto"><img src="images/gallerijworkshop01.jpg" alt="foto" title="klik voor grote foto"><div class="fotobijschrift">Foto 1></div></div>.

Nu maken we een link naar de foto: <a href="images/gallerijworkshop01.jpg". Voor lightbox2 moeten we nu wat extra toevoegen: data-lightbox="gallerie01" en data-title="voorbeeldfoto 01".
Data-lightbox voegen we toe als we meerdere foto's in één serie willen laten zien en data-title is de fotobijschrift die Lightbox laat zien onder de foto. Als er alleen maar één enkele foto is en geen serie kan data-lightbox weggelaten worden.

HTML
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Mijn Foto Gallerie</title>
<link href="css/stijlblad.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="GallerieWrapper">
<div id="GallerieTitel"><h1>Naam Gallerie</h1></div>
<div id="GallerieContent">
<div class="foto"><a href="images/gallerijworkshop01.jpg" data-lightbox="gallerie01" data-title="voorbeeldfoto no 1"><img src="images/gallerijworkshop01.jpg alt="foto" title="klik voor grote foto">
<div class="fotobijschrift">Foto 1</div>
</div>
</div>
<div id="GallerieFooter">Copyright 2019 JouwNaam</div>
</div>
<script src="js/lightbox-plus-jquery.js"></script>
</body>
</html>

De overige foto's in de gallerie kunnen nu opdezelfde manier toegevoegd worden. Er zitten een twaalftal foto's in de images map. Gebruik ze allemaal. Daarna kan je het resultaat vergelijken met de gallerie in de map "Eind" van de map FotoGallerie.

Hoe nu verder?
Mocht je nu een groot aantal foto's hebben en je wilt ze over meerdere pagina's verdelen. Dan kan je op dezelfde manier een aantal pagina's maken. Je voegt alleen een extra <div> toe met bijvoorbeeld de ID "GallerieNavigatie", het groene vlak hieronder, waarin je links maakt naar de overige galleries.
De links kan je ook op verschillende manieren opmaken. Daarover lees je meer op deze HCC!twente website bij de tip: Je Homepage: hyperlinks opmaken.
Bovenstaand is uiteraard een hele simpele basis. Gebruik je eigen favoriete kleuren, achtergronden etc.

dit grijs vlak is het beeldscherm
Gallerie 1 | Gallerie 2 | Gallerie 3
Naam Gallerie
Overzicht foto's
copyright 2019 JouwNaam

Mocht je deze tip gebruikt hebben om een eigen fotogallerie te maken, dan zou het leuk zijn als je de link wil delen zodat andere HCC-leden kan inspireren om ook aan de slag te gaan.

Informatieve en nuttige links
HTML en CSS:
Dummy tekst en plaatsvervangende afbeeldingen
Webeditors:
Firefox en add-ons:
Diversen
  • Adobe Color
    Met adobe Color kan je een kleurthema voor je website bepalen. Heel eenvoudig een goed stel bij elkaar passende kleuren samenstellen.
week 47
Update website

16 november 2019
agenda
leestafel
downloads (Windows 10 Presentatie)

Agenda
22 november
HCC!twente-café Losser
iPadOS 13
Locaties

Het HCC!twente-café is geopend van 19.00 - 22.00 uur.

Hengelo
"The Garden" in Gebouw-N
Haaksbergerstraat 67
7554 PA Hengelo

Parkeren via Robijnstraat 21 Hengelo. Daarna lopen over grijs pad langs de fietsenstalling naar Gebouw N (Plattegrond).


Losser
Stichting MAN
Nilantspad 3
7581 BB Losser
Voor navigatieapparatuur: Bookholtlaan 1, 7581 BB Losser.

Tips

In dit deel van de website zijn een aantal interessante tips opgenomen voor en door leden.

De op dit moment aanwezige tips:

  • Adobe Digital Editions
  • Back-up van outlook
  • Van LP2CD
  • Hulp op afstand
  • PC Inspector™
  • Daemon Tools
  • CDex
  • DVD covers printen.
  • Photoshop:
    Kerstkaart maken
  • FTP gebruik
    up-/downloaden bestanden naar/van web- of ftp-server
  • Je Homepage:
    hyperlinks opmaken
  • Je Homepage:
    fotoalbum opmaken
  • Je Homepage:
    Lightbox 2 fotogallerie Nieuw 8-11-2019
HCC links

HCC
HCC!seniorenAcademie

HCC lid worden?
HCC ledenvoordeel

Volg HCC op social media

Het weer in Losser

buienradar