Foto met een link

Je wilt aan een kleine foto in een tekst een grotere foto linken. De grotere foto moet openen in een Lightbox (op een donkere ondergrond) zodat een bezoeker van je site de grotere foto rustig kan bekijken.

Hoe voeg je dus een link toe aan je kleine foto?

Je plaatst een kleine foto (thumbnail) in je tekst met de JCE editor.
Dit heb je kunnen lezen in het vorige artikel. En de HTML code hiervan ziet er alsvolgt uit:

Hoe is dit nu opgebouwd?

<img       roept een afbeelding op

src=        de source met het pad waar de foto staat tussen aanhalingtekens

alt=         de alternatieve tekst als een browser de foto niet kan tonen

tevens kan de opmaak van de foto nog worden ingeven; in het voorbeeld moet de foto naar links geplaatst worden en naar rechts een afstand houden van 8px en de hoogte en breedte van de foto is voorgegeven.

De grotere foto staat in dezelfde map maar met een andere naam. In mijn voorbeeld is dat "phoca_thumb_l_zonsondergang.jpg"

Hoe kan je de grotere foto linken aan de thumbnail?
Daarvoor moet je eerst nog weten hoe een link wordt opgegeven.

In HTML is iedere link alsvolgt opgebouwd:
 <a href="/ ...">de link</a>  Tevens kun je nog opgeven of de link in een nieuw browservenster wordt geopend of in het reeds geopende. Voor een bezoeker is het niet altijd aangenaam om met iedere link een nieuw venster te laten openen. Maar het is wel wenselijk het gaat om een link naar een andere website. Deze eigenschap heet "target" en kan zijn "_self" (voor hetzelfde venster) en "_blank" (voor een nieuw venster).

Het principe om een link toe te voegen aan je thumbnail is je nu duidelijk. (Gebruik TERUG op je browser om terug te keren naar deze site)

Maar toch opent de grote foto in een wit en blanco venster. Je kunt ook alleen terug door in je browser op TERUG te klikken. Wat is er mis?

Er ontbreekt nog een eigenschap aan de link.Deze eigenschap is de rel="lightbox". En deze is toegevoegd aan de link in onderstaande voorbeeld:

Naar Boven