WordPress lightbox

WordPress lightbox: foto's met een mooie lightbox en social share optie

Update februari 2016: de prettyPhoto media plugin bestaat helaas niet meer. Als alternatief ben ik de WP Lightbox 2 plugin gaan gebruiken. WP Lightbox 2 heeft geen social share opties, maar toont wel mooie, responsive lightbox-versies van je afbeeldingen. Bijkomstig voordeel: je hoeft deze plugin maar één keer in te stellen, daarna wordt er automatisch van elke foto een lightbox-variant getoond.

Je kunt deze plugin op dezelfde manier installeren als Prettyphoto Media (zoals beschreven in deze blog). Vervolgens krijg je in het linker menu een extra optie “WP Lightbox 2”. Klik daar op en stel de instellingen in zoals op onderstaande afbeelding. Daarna worden al je foto’s en fotogalerijen automatisch geopend in een lightbox.

Instellingen plugin WP Lightbox 2

De mogelijkheden in WordPress om foto’s toe te voegen en te bewerken zijn de afgelopen jaren sterk verbeterd. Het is zelfs mogelijk om zonder plugin een mooie fotogalerij op je WordPress website te plaatsen. Wat er nog niet is, is een functie die er voor zorgt dat je een mooie lightbox krijgt als je op een foto klikt. Een lightbox is een pop-up die de foto uitlicht. Er zijn talloze plugins die dit voor je kunnen regelen. Ik vertel je in dit blog welke plugin ik gebruik en hoe je deze in moet stellen om het gewenste resultaat te krijgen.

WordPress lightbox

Voorbeeld van een lightbox

WordPress lightbox èn sociale share functie

Ik gebruik de plugin prettyPhoto media. Het fijne van deze plugin vind ik dat je een foto direct kunt delen via Twitter of Facebook en dat hij ook werkt bij een WordPress fotogalerij. Op de foto hierboven zie je een voorbeeld van de lightbox. Ik leg hier onder stap voor stap uit hoe je deze plugin kunt installeren en gebruiken.

1. Ga in het menu naar ‘Plugins’ -> ‘Nieuwe plugin’. Typ in de zoekbalk ‘prettyphoto media’ en klik op ‘Plugins zoeken’.

2. Klik bij prettyPhoto Media op ‘Nu installeren’. Als de plugin geïnstalleerd is, klik je op ‘Plugin activeren’.

3. De plugin is nu geïnstalleerd en geactiveerd. We gaan nu de instellingen goed zetten. Ga in het menu naar ‘Instellingen’. Hier is een nieuwe optie bijgekomen, namelijk ‘prettyPhoto media’. Vink alle vakjes aan die op de foto hieronder aangevinkt zijn en klik op ‘Update Settings’. In het tabblad ‘prettyPhoto Customisation’ vink ik altijd nog het vakje uit voor ‘Show title’, zodat er boven de lightbox geen titel van de foto komt te staan (handig als je foto’s namen hebben als ‘IMG3024.jpg’).

WordPress lightbox met prettyPhoto media

Als je nu een fotogalerij aanmaakt met de ingebouwde galerij functie wordt de lightbox automatisch toegepast op alle foto’s in de galerij. Je kunt dan ook doorklikken van de ene naar de andere foto. Bij individuele foto’s moet je nog een extra handeling doen.

4. Voeg een foto toe in een bericht of pagina via de ‘Media toevoegen’ knop boven de editor.

Fotogalerij WordPress website - stap 1

5. Als de foto in je bericht of pagina staat, klik je er op en kies je het linker symbool dat in de linker boven hoek verschijnt.

WordPress lightbox - lightbox instellen

6. Kies boven in voor het tabblad ‘Geavanceerde instellingen’. Onder het kopje ‘Geavanceerde link instellingen’ vind je de optie ‘link relatie’. Vul hier in ‘prettyPhoto’. Let op: de eerste ‘p’ moet een kleine letter zijn, de tweede ‘p’ een hoofdletter! Scroll naar beneden en klik op ‘bijwerken’. That’s it!

WordPress lightbox - lightbox instellen 2

Ik ben erg benieuwd of het gelukt is en wat je van het resultaat vindt. Laat je het me weten door op deze blog te reageren? Als jij een andere plugin gebruikt voor een mooie WordPress lightbox hoor ik graag welke en waarom!

Wil je van elke afbeelding in je fotogalerij een link maken? Lees dan ‘Afbeelding in je WordPress fotogalerij linken‘.

4 antwoorden
  1. reyke van looveren zegt:

    is het correct dat de lightbox actief wordt op alle foto’s?
    Ik heb bv 4 x een image carousel op mijn pagina.
    Het is niet de bedoeling dat ik carousel 1 open, dat ik kan doorklikken naar de foto’s van carousel 2 – 3 en 4 ,…
    hoe kan ik duidelijk maken dat deze gescheiden moeten blijven?
    dit is de pagina waarover het gaat: http://nieuwbouwtenerife.com/tehuur

    hopelijk kan je me helpen
    grtjs
    freyke

    Beantwoorden
    • Rosanne zegt:

      Hoi Freyke,

      Ten eerste: Wow, die Villa! Wat ziet dat er fantastisch uit zeg! Ik zie mezelf al helemaal liggen op zo’n bedje aan het zwembad ;-)

      Ik snap wat je bedoelt met de carroussel en dat alle foto’s getoond worden. Ik stuur je een mailtje om je verder te kunnen helpen.

      Beantwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *