Lightbox maken voor je foto’s
Op het forum kwam de vraag naar voren hoe je op een eenvoudige manier je foto’s mooi kunt weergeven in je browser. Tegenwoordig maken veel websites gebruik van een lightbox, aldus gebruiker Joren. Wij gebruiken het topic hierover om nader uit te werken hoe je een lightbox maakt.
Lightbox bron
Voor de lightbox maken we gebruik van de website http://www.huddletogether.com. Via deze website kunnen alle benodigde bestanden en codes gevonden worden. Ten eerste zul je het zipbestand moeten downloaden. Dit bestand moet je uitpakken. Er staan drie mappen in en een index bestand. Dit index bestand bevat alle voorbeelden nog eens en hoef je niet te gebruiken op je eigen website.
Mappen css, images en js
De mappen css, images en js zet je in de hoofdmap van je website. Vervolgens kun je plaatjes uploaden. Wij nemen het plaatje met de naam ‘plaatje.jpg’. Dit plaatje zet je in de map images. Vervolgens zet je de volgende code in het bovenste gedeelte van je webpagina, tussen <head> en </head>:
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script>
Ook voeg je de code naar het css bestand toe in de header:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Zorg er dus voor dat in je map images de plaatjes prev.gif, next.gif, loading.gif en close.gif staan.
Activeren van het plaatje
Aan de normale code van een link om een plaatje op te roepen voeg je nu het attribuut ‘rel’ toe. Dat kun je op de volgende manier doen:
<a href="images/plaatje.jpg" rel="lightbox" title="mijn bijschrift">plaatje #1</a>
Wanneer je een klein plaatje, een thumbnail, als link gebruikt moet je die natuurlijk wel aanmaken, de code wordt dan als volgt:
<a href="images/plaatje.jpg" rel="lightbox" title="mijn bijschrift"><img src="plaatje-klein.jpg" alt=""></a>
Meerder plaatjes laten zien
Je kunt ook nog een soort diashow laten zien door de volgende code te gebruiken, hier zit geen limiet op het aantal plaatjes:
<a href="images/plaatje-1.jpg" rel="lightbox[roadtrip]">plaatje #1</a> <a href="images/plaatje-2.jpg" rel="lightbox[roadtrip]">plaatje #2</a> <a href="images/plaatje-3.jpg" rel="lightbox[roadtrip]">plaatje #3</a>
Dat is alles. Voorbeeld? Klik maar eens op het plaatje op de voorbeeldpagina.
Met dank aan “Joren”, voor de uitleg op het forum en “Pasc” voor de vraagstelling.
Vette tut. Mooi systeem ook!
Ik vind dat uitklappen zo lang duren .. Kun je dat verkorten/uitzetten?
Sorry voor dubbelpost :S
En kun je ook zeg maar standaard die pijltjes ergens laten staan en niet dat ze pas verschijnen als je er over heen gaat ..
Mijn foto die ik plaats is groter dan die van de lightbox. Hoe kan ik dat aanpassen?
Op http://planetozh.com/projects/lightbox-clones/ vind je clones van de originele Lightbox. Erg handig als je bijv. met MooTools of jQuery werkt!
mooie site
super. dit had er 10 jaar eerder moeten zijn 😉
die prevlabel en close ziet hij niet voor de rest werkt het super al druk ik op het kruisje waar de afbeelding close hoor te staan hoe kan ik dit oplossen?
Ik heb dezelfde lightbox gebruikt en een flash navigatie op de pagina, maar ik krijg vaker een error dat hij de pagina niet kan laden.. ik denk dat het door de javascript van de lightbox komt.. heeft iemand een idee hoe dit probleem is ontstaan en hoe ik het kan oplossen??
Groetjes Inge
hoi kan iemand mij helpen met ligthbox het werkt wel maar ik zie geen fotos alleen een kruis dir heb ik in mijn index,php staan,
echo ‘‘;
Dit is echt wel heel mooi. Daar zocht ik al lang naar.
Hartstikke mooie tut, maar kan ik di ook gebruiken in combinatie met een imagemap? Ik krijg nu telkens de vraag met welke programma ik het bestand wil openen.
mijn close button en mijn tekst komen er niet staan?
hij vindt de clodebutton wel maar het is niet zichtbaar (je ziet alleen de cursor veranderen)
Hoe krijg ik het zichtbaar
Lightbox wordt al enige tijd niet meer bijgehouden. Ik raad jullie aan om een library zoals jQuery(.com) te gebruiken. Daar heb je diverse plugins voor.
Een hele gave is fancybox, deze wordt nog altijd ondersteund.
Voor een voorbeeld kan je kijken op http://www.leadingcourses.com. Klik een club aan en ga naar het tabblad foto’s
Succes!
ik heb een paar foto’s gekregen die met lightbox gemaakt werden en ik kan ze op mijn cimputer niet openen. Wat moet ik downloaden?
De lightbox werkt perfect. Precies waar ik naar op zoek was. Maar nu lees ik dat je eigenlijk beter de Fanybox kunt gebruiken. Kunnen jullie dat op dezelfde manier uitleggen als hierboven de Lightbox is weergegeven ??
Werkt perfect, behalve dan dat ik niet de donkere achtergrond krijg, en de nieuwe foto in een nieuw scherm geopend wordt en er geen bijschrift bij komt te staan. Hoe kan ik dit oplossen?
Prachtig,
Ik kan hem nu ook helemaal in mijn eigen stijl opmaken. (door gifjes aan te passen).
Nog een tip gevraagd: Hoe kan ik op 1 pagina meerdere ‘roadtrips’ (slideshows) plaatsen? Is er een speciale code om achter de laatste foto in de reeks te zetten?
ik snap er geen snars van
Voor degenen die problemen heeft, danwel met de plaatjes close, next of prev. etc. of niet de lightbox te zien krijgt, maar wel de foto waar naar gelinkt wordt:
zet de bestanden van lightbox in je hoofdmap van je website. Denk er wel aan dat er ook een index.html in zit in sommige gevallen, deze moet je niet mee kopieren!!
En als je de lightbox niet te zien krijgt, ben je waarschijnlijk vergeten de eerste 4 JS codes toe te voegen in de head van je pagina. Denk er ook aan dat dit buiten de moet vallen! Hier ben ik tegenaan gelopen.
Succes verder met dit magnifieke script!!
Wat een super site is dit! (:
Ik werk echter nu nog met web-log.nl, en hierbij beschik ik niet over de hele html-code van mijn site ( ik kan hem in ieder geval nergens vinden of bewerken).
Hierboven staat dat ik dan de code tussen en moet plaatsen, dat kan dus niet. Is het dan überhaupt wel mogelijk om op een blog van web-log.nl deze code te plaatsen?
Hiervoor was ik bezig met de code voor een horizontaal menu. Die werkte perfect, afgezien van het feit dat hij alleen in de zijbalk kon staan, of in een bericht en dus niet zomaar ‘los’ onder de kop.
Sorry voor het lange verhaal, maar het zou super zijn als er een oplossing voor zou zijn!
Groetjes, Jaella.
Lightbox werkt prima, alleen wordt bij meerdere plaatjes eerst het laatse plaatje getoond, dus in omgekeerde volgorde. Weet iemand wat er verkeerd gaat?
De gebruikte code is als volgt:
<a href="images/plaatje_a.jpg" rel="lightbox [groepsnaam]" title="Omschrijving"><a href="images/plaatje_b.jpg" rel="lightbox [groepsnaam]" title="Omschrijving"><img src="images/thumb_a.jpg" alt="Alt"</a>
Helemaal top 🙂 duurde even voor ik hem goed kreeg maar hij werkt 🙂
Perfect!!
Bedankt, en mooie auto ook 🙂
GRTZZ
Bij mij geeft hij de afbeelding weer in een nieuw venster. Heeft er iemand een idee wat ik misdaan heb?
Alvast bedankt.
Bij mij gebeurt hetzelfde als bij Sylvia.
De thumbs staan keurig in mijn site echter opent hij hier ook in een nieuw scherm.
Wie weet raad?
Ik heb geen <head> in mijn .css bestand…….. dus waar plaats ik die regel?
@Lin
De <head> tag staat niet in je .css bestand maar in je webpagina zelf.
Die regel(s) plaats je tussen de <head> </head> tag van je pagina waar de tumbs van je Lightbox staan.
Bedankt voor de goede tips, zo snapt een kunstenaar het ook.
Het werkt hoera!
Nu wil ik het nog iets anders; 1 thumbnail en bij klik wil ik dan een gallerie met plaatjes laten zien (dus met next en previous in het plaatje). Hoe doe ik dat?
Hoe krijg ik de grote afbeelding(en) in het midden van de pagina?
voor de mensen die ook hebben lopen klieren met prev en next, zo werkt ie bij mij:
<a href="images/plaatje1.jpg" rel="lightbox[roadtrip]" title="uw tekst"><img src="images/plaatje1klein.jpg" alt="#1"></a>
voor je 2e plaatje kopieer je deze dus weer er onder maar dan met je goede plaatjes erin, en #1 word dus #2
dan moet ie werken
Bij mij werkt hij prima in Chrome en Firefox maar niet in IE.
Als ik in IE ergens in de pagina klik wordt het scherm donker behalve als ik op de thumbnail klik. De foto opent wel als ik er op klik maar in het volledige venster.
Om mensen even voor te zijn… Geen IE meer gebruiken zou een goede optie zijn ja 😉
Maar aangezien ik graag wil dat iedereen de foto's kan bekijken heb ik aan die tip niet zo veel..
Hee
ik heb alles gedaan zoals hierboven staat
en ik krijg inderdaad de lightbox in mijn scherm,
Maar als ie dan geopend is, dan staat de afbeelding niet helemaal in het witte vak, maar half erbuiten. bovendien verschijn er een scrollbalk ondereraan, terwijl mijn afbeelding niet te groot is. Hoe kan dit?
snap het echt niet, heb alles gedaan zoals er stond.
probeerde die fancybox ook nog te gebruiken, maar dat snap ik niet, dus please help!
Ik heb een vraagje!! op mijn website heb ik die kleine en grote foto's geplaatst, en wanneer ik op die kleine foto klik, wordt ie vergroot. alleen ik zie die vergroot effect niet tijdens het klikken. heb ik dan iets verkeerds gedaan dan misschien???
Ik heb hetzelfde probleem als Henny (post 14/5/11). Het script werkt prima in Chrome, Firefox en ook Safari maar niet in IE. Weet iemand een oplossing of workaround? Op zich is het niet zo erg als het zich in IE iets anders gedraagt, maar de bezoeker van de website komt min of meer "vast" te zitten.
Mooie tutorial. Een klein probleempje: hoe stel ik de lightbox in om zich aan te passen aan de grootte van de foto? Want door de hoogte en breedte op 'auto' te laten staan werd de lightbox véél te groot voor het scherm, en nu kan ik enkel verticale foto's gebruiken. Als ik een horizontale foto toevoeg past de lightbox zich niet meer aan en komt de foto er dus uit…
Hoi, ik heb hetzelfde probleem als Sylvie, iemand een idee waar de fout kan zitten?
"Door Sylvie op 14 december 2010 om 10:49
Bij mij geeft hij de afbeelding weer in een nieuw venster. Heeft er iemand een idee wat ik misdaan heb?
Alvast bedankt."