Uitbreidingen – Een fotogallery mbv code (Photo Gallery)

uit de cursus Starten met Joomla (CMS)

Uitbreidingen – Een fotogallery mbv code (Photo Gallery)
Geef een waardering

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Starten met Joomla (CMS)

perm_identity Walter van Rooij | video_library 30 video's | query_builder 02:57:24

Volg nu de online cursus Joomla!

Leer hoe je complexe websites kunt maken, met diverse functionaliteiten als een contactformulier, fotogalerij, zoekfunctie tot het creëren van een meertalige website?

Met Joomla bouw je een complete en complexe website met allerlei functionaliteiten zonder dat je verstand hoeft te hebben van programmeren.

Joomla is een CMS (Content Management Systeeem)

Joomla behoort samen met WordPress en Drupal tot de meest populaire CMS systemen. Veel webbedrijven en -designers maken gebruik van een CMS om hierin complexe websites voor hun klanten te bouwen. Waarom zou je het wiel opnieuw gaan uitvinden als er CMS’en bestaan die het fundament voor de website al voor je klaarzetten.
Het grote voordeel van een CMS is dat de klant/opdrachtgever zelf zorg kan dragen voor de content van de website.

Wat ga je in deze online cursus leren?

Je leert allereerst hoe je het programma installeert op je eigen computer zodat je eerst lokaal de website kunt bouwen. Aan het einde van de cursus leer je hoe je de website migreert naar de server waarop de website gehost gaat worden. Je leert hoe je een template installeert en daarna de website gaat inrichten met artikelen, categoriën, menu-onderdelen, modules, plugins en componenten.

Je leert hoe je moet omgaan met de database waar de inhoud van de website in bijgehouden wordt. Hoe je veiligheidsmaatregelen neemt om de database en de website te backuppen. Kortom alle basisvaardigheden die je nodig hebt om een website met Joomla te bouwen, in te richten en online te zetten.

Voor wie is deze cursus bedoeld?

Wil jij leren websites te maken voor klanten en bedrijven die zelf hun site willen vullen met content? Je wilt het meteen goed aanpakken en een gebruikersvriendelijke website maken die goed gevonden kan worden. Dan maak je met Joomla een goede keuze. Je hebt geen enkele voorkennis nodig om deze online cursus te kunnen volgen. Uiteindelijk zul je wel baat hebben bij kennis van html en css. Maar dat kan ook prima na het volgen van deze cursus.

In deze les laat ik zien hoe we een fotogallery kunnen maken.

Dat kan op een boel manieren

fotogaleries of carrousels of slideshows

fotogaleries of carrousels of slideshows

worden aangeboden als plugin of als component of module

Voor sommigen moet je betalen, anderen zijn gratis

er er zijn er enorm veel die heel interessant zijn.

maar..

een slideshow kun je ook maken zonder het gebruik van een extensie

in dit geval gebruiken we een Template - waar je nu naar kijkt-

wat zelf is gemaakt en wat is gebaseerd

op materialize

dat is een Framework van Google

Het meest logische is dus om bij Google Materialize te kijken

of er niet een stukje kant-en-klare code beschikbaar is voor een Gallery

en om dat te doen ga ik

naar Materialize

naar Materialize

Zoals gezegd, Materialize is een systeem van Google zelf

het is een besturingssysteem voor websites, het is Open Source, gratis dus

en er zijn een hoop scripts beschikbaar

die je zo kan gebruiken.

Javascripts bijvoorbeeld, ik zie ze links in de balk.

De javascript-functies die worden aangeboden

omvatten bijvoorbeeld een carousel

hier zie je een voorbeeld van een carousel

die we kunnen verkrijgen door dit scriptje

in onze website te plakken.

Of deze full-width slider, die prachtig is

omdat hij het ook op mobiele platforms zo mooi doet

hij is touch screen

De code die ik nodig heb

om deze carousel naar mijn eigen website te transporteren

is deze code.

en een klein stukje extra code

zie ik hier.

Laat ik beginnen met de code zelf.

die kopieer ik

en ik breng hem

naar een van mijn pagina's

waar ik die slideshow op zou willen laten zien.

en daar ga ik naar Content > Articles

ik kies een willekeurig artikel uit

om daar mijn code op te plaatsen

in deze pagina

hebben we al eerder gewerkt

ik heb daar een iframe toegepast

met een Google Map.

Om dat te doen

moesten we code plakken in de Code-editor

en dat doe ik nu opnieuw.

Ik plaats mijn cursor

achter het laatste stukje code,

ik geef wat Returns,

zodat ik mijn code goed kan onderscheiden, die ik nu plak,

en ik Paste de code die ik zojuist uit Materialize heb gehaald

hier in.

Ik Save.

Er was nog een klein stukje code

een klein stukje Javascript, wat ik nodig had

en dat ga ik even ophalen.

Hier vind ik de Materialize carousel

en hier vind ik het stukje code

wat ik nog nodig heb. Ook dit kopieer ik.

want zonder dit kleine stukje code functioneert het niet.

waar ik dat Javascriptje kan plaatsen

is bijvoorbeeld

in de DIV waar de carousel in zit.

De DIV tot en met /DIV

bakent de ruimte af waar de carousel in zit.

als ik de code toevoeg vóór de afsluitende Tag

haakje openen /DIV haakje sluiten

dan zit ik goed.

Ik plak

een daar is m'n code.

Ik Save

Nu kijken wat er op de pagina gebeurt.

Daarvoor ga ik naar de voorkant van de website.

Het artikel

heette: Nieuw Artikel

en onderaan de pagina

staat de Full Width Slider.

Kijken of hij werkt

en ja hoor,

Hij doet het goed.

Zo eenvoudig kan het zijn om een Slider te plaatsen.

Een stukje code wat gekopieerd is

uit een website

dat je overbrengt naar je Joomla-website.

Vaak in combinatie met een stukje Javascript.

In dit geval is het met name erg comfortabel

dat het

Template dat wij in gebruik hebben

gebaseerd is op Materialize zelf.

Er zitten daar dus al codes

en scripts in, die maken dat

dit kunstje heel eenvoudig werkt.

Slideshows kun je ook installeren door gebruik te maken van extensies.

Dat zullen we in een volgende les bekijken.