Let op: Tweakers stopt per 2023 met Tweakblogs. In dit artikel leggen we uit waarom we hiervoor hebben gekozen.

De Lightbox-feature op Tweakers

Door Wiethoofd op vrijdag 23 oktober 2009 16:16 - Reacties (15)
Categorie: Links, Views: 10.220

Na het eerder beloofd te hebben (en er onlangs weer aan herinnerd te zijn) is het dan nu eindelijk zover, het geheim van de Lightbox wordt onthuld.

Het klinkt leuk, maar wat is het?
Als je de nieuwsberichten en reviews op de Frontpage wel eens gelezen hebt, ben je er vast wel een paar tegengekomen waar foto's of screenshots bij stonden. In veel gevallen staan er thumbnails welke aan te klikken zijn, en in plaats dat deze openen in een nieuwe tab of venster of in een hinderlijke pop-up komt de Lightbox in actie waarin de foto's of screenshots in origineel formaat worden weergegeven.

Handig, maar kan ik er ook gebruik van maken?
Hier kan ik volmondig Ja! op antwoorden.

Tell me more!
Als zelf tweakers.net user zijnde is het ook mogelijk hier gebruik van te maken op je Tweakblog en in je productreviews. Op het forum is het (nog) niet mogelijk.

Gelukkig zijn er geen extra tags of codes nodig om de Lightbox mogelijkheid in te schakelen, het is eigenlijk niets meer dan een uitbreiding van de [url]-tag. Een normale thumbnail met een linkje naar het origineel is als volgt:
code:
1
[url=http://grootplaatje.gif][img]http://thumbnail.gif[/img][/url]
Dit is een simpele url naar het origineel met daartussen het kleine plaatje genest.

Wil je echter de Lightbox gebruiken dan wordt de UBB-code als volgt:
code:
1
[url=http://grootplaatje.gif,"Afbeeldingsbeschrijving",setnaam][img]http://thumbnail.gif[/img][/url]
Het enige wat extra is, is het toevoegen van ,"Afbeeldingsbeschrijving",setnaam aan de url-tag.
• De 'afbeeldingsbeschrijving' is wat er linksonder de afbeelding komt de staan in de Ligtbox.
• De 'setnaam' is de naam van de groep waar de afbeeldingen deel van uitmaken.

Dit laatste kan verwarrend zijn in het geval van een enkele foto of meerdere sets/groepen die je toe wilt voegen. Zo heeft een enkele afbeelding alsnog de setnaam nodig en als je meerdere foto's in dezelfde lightbox-loop wilt hebben moeten ze allemaal dezelfde setnaam krijgen.

De theorie snap ik, nu voorbeelden
Natuurlijk is de pure uitleg niets zonder voorbeelden om iets duidelijk te maken.

'Werkplek' van WiethoofdChantal JanzenBeing Erica - Erin Karpluk
Thumbnails met link naar origineelEnkele thumbnail met Lightbox
 
8888 GoT-posts - myReact screenshotPost locatiesPosts per weekPost tijden
Meerdere thumbnails in dezelfde Lightbox

De twee afbeeldingen linksboven openen in een nieuw tabblad/venster. Die rechtsboven is een enkele afbeelding in de Lightbox en heeft in dit geval als 'setnaam' solo meegekregen. De 4 afbeeldingen onderin hebben allemaal als setnaam quatro meegekregen en zijn weer een aparte set naast de 'solo'.

En zoals te zien is bij de onderste afbeeldingen is de tooltip uit de [img]-tag niet gelijk aan de tekst onder het origineel in de Lightbox, dit valt dus ook nog naar eigen wens aan te passen. ;)

Volgende: F5 je DM-rechten weg 11-'09 F5 je DM-rechten weg
Volgende: Cheapass DealExtreme PC remote review door Wiethoofd 10-'09 Cheapass DealExtreme PC remote review door Wiethoofd

Reacties


Door Tweakers user himlims_, vrijdag 23 oktober 2009 16:20

wiethoofd; helpdesk 1e klas ...

wederom een nuttige blog!!!

keep up the verektes goei work :+

[Reactie gewijzigd op vrijdag 23 oktober 2009 16:29]


Door Tweakers user Roytoch, vrijdag 23 oktober 2009 16:24

Dankjewel! Ik zal zodra ik van vakantie weerben mijn review posten en hier gebruik van maken. Een handige feature en goed uitgelegd!

Door Tweakers user pythagorasABC, vrijdag 23 oktober 2009 18:39

Heel handig, het enige puntje wat mij altijd lichtelijk irriteert is dat de pijltjes waarop je klikt om naar het volgende plaatje te gaan telkens verspringen omdat de plaatjes verschillend van grootte zijn.
Misschien dat het plaatje hetzelfde kan blijven van grootte, maar dat er dan een kleiner plaatje op een grijze achtergrond zichtbaar is oid?

Door Tweakers user Eegee, vrijdag 23 oktober 2009 20:20

Slimbox bevalt mij persoonlijk beter. Kreeg rare dingen in IE met Lightbox (in Firefox wel goed), slimbox werkte gewoon direct overal goed.

Door Tweakers user crisp, vrijdag 23 oktober 2009 20:29

@pythagorasABC: je kan ook de pijltjestoetsen gebruiken om te navigeren ;)

Verder is het denk ik gewoon zaak dat de auteur ervoor zorgt dat hij plaatjes van dezelfde afmetingen gebruikt :)

@Eegee: De Tweakers.net 'lightbox' is niet dé Lightbox maar een zelfgeschreven applicatie.

Door Tweakers user Anoniem: 69767, vrijdag 23 oktober 2009 20:54

Staat daar nou een 27MC bakkie Wiethoofd

offtopic wel een gammel behang, nofi.

[Reactie gewijzigd op vrijdag 23 oktober 2009 20:56]


Door Tweakers user Wiethoofd, vrijdag 23 oktober 2009 21:24

@ Only.Holoris, is m'n Zotac ION ITX in een Mini-Box M350 die daar stond voor 'review purposes' ;)

Het is geen behang. Het is onze vroegere kinderkamer en er was geen tijd voor een paintjob voordat de planken en bureau er in gingen, ik stoor me er niet aan 8)

Door Tweakers user guanche, vrijdag 23 oktober 2009 21:37

Het werkt niet op de iphone, vreemd gezien het wel op de FP werkt.

Door Tweakers user ArnieNFW, vrijdag 23 oktober 2009 22:33

@crisp: inderdaad, ik irriteer me daar ook een heel klein beetje aan. Maar het is wayyy beter dan de normale link naar plaatjes!

Door Tweakers user crisp, zaterdag 24 oktober 2009 00:01

@guanche: op Tweakblogs wordt voor mobiele apparaten alle javascript gestripped; er wordt niet echt met gradaties gewerkt zoals op de Tnet frontpage.

Door Tweakers user afraca, zaterdag 24 oktober 2009 13:36

Korte vraag: moeten de afbeeldingen gehost zijn op tweakers (zoals jouw voorbeeld afbeeldingen), of kan dit ook met bijvoorbeeld imageshack?

edit: en ik blijf het jammer vinden dat die scrollbalk bij een serie plaatjes niet overeenkomst met t.net design.

[Reactie gewijzigd op zaterdag 24 oktober 2009 13:37]


Door Tweakers user Wiethoofd, zaterdag 24 oktober 2009 13:37

Plaatjes kunnen overal staan (imageshack is dan een slecht voorbeeld) maar zolang je url en img-tags maar kloppen maakt het niet uit waar de plaatjes gehost zijn.

Het is dat ik een fotoalbum hier op tweakers heb, er random een paar uit heb gezocht en heb gebruikt in m'n stukje ;)

[Reactie gewijzigd op zaterdag 24 oktober 2009 13:38]


Door Tweakers user mrfu, maandag 26 oktober 2009 15:45

Off-T: Heb je nou een wattmeter in 't stopcontact hangen?

On: Zeer handige post! Hier doen we wat mee :)

Door Tweakers user Wiethoofd, maandag 26 oktober 2009 15:48

quote: mfru
Off-T: Heb je nou een wattmeter in 't stopcontact hangen?
Ja, daarop zat m'n Zotac ION ITX A-E aangesloten voor verbruiksresultaten in m'n review O-)

Door Tweakers user Anoniem: 196662, donderdag 29 oktober 2009 12:57

Die is wel zeer goed om te weten. Heb misschien iets om m'n tweede review over te schrijven en wou vorige keer ook al zo'n lightbox gebruiken :)

Reageren is niet meer mogelijk