Alle foto’s worden hier voortaan ietsje anders weergegeven: geen “evil popups” meer, maar een bijzonder net script dat de plaatjes binnen de pagina laat laden.
Een vervolgstap is dat de titels er ook netjes onder komen, evenals de doorklik voor plaatjes die van Flickr komen. Maar voorlopig heb ik deze zaterdag wel weer genoeg zitten nerden.
Check!
Klik maar eens op de bijgaande foto om het volledige effect te zien. Hier volgt kleine toelichting, speciaal voor de mede-nerds:
- De door mij aangepaste Lightbox.js voegt nu een caption-element toe.
- Dit elementje wordt na het laden gevuld met het tekst uit het title-attribuut van de link naar de grote versie van het plaatje.
- Vervolgens wordt gecheckt of het plaatje binnen de link (de thumbnail dus) een longdesc-attibuut heeft, zijnde de URL van de foto op Flickr.
- Zo ja, wordt hier een extra linkje voor aan de caption toegevoegd.
Gevolg: geen extra div’s of span’s nodig, geen javascript in de content en alleen maar semantisch correcte, valide HTML. Natuurlijk mag iedereen m’n versie van lightbox.js hergebruiken, mits Lokesh Dhakar, de oorspronkelijke auteur, maar genoemd wordt.
Foto’s bloggen vanuit Flickr
Flickr biedt de mogelijkheid om een foto direct in een bericht te publiceren vanuit hun interface, naar een vooraf ingesteld weblog-systeem. In een paar kliks selecteer je een foto, vul je er een tekstje bij in en publiceer je het naar het bewuste weblog. Hiervoor dien je wel even een berichten-template aanmaken, zoals deze:
<a href="{photo_src}" title="{photo_title}" rel="lightbox"><img src="{photo_src_t}" alt="{photo_title}" class="floatright" longdesc="{photo_url}" /></a>{description}
Eitje, toch?
I like your modifications! I was wondering if you could explain to me how I can edit the .js file so that it shows “Click to close image” below as a caption rather than your dynamic text?
Jon, you could easily replace this line:
var strImageTitle = objLink.getAttribute("title");by
var strImageTitle = 'Click to close image';nice!
Very nice! If you can make this work with the resizing script here: http://serennz.cool.ne.jp/sb/sp/lightbox/ , that would be fantastic!
I have tried, but my JavaScript skills are not so good.
Pingback: flippedcracker.net » Blog Archive »
Hoi,
ik ben nu al uren aan het rommelen om dit te laten werken met de Flickr Postbar…heb jij *enig* idee hoe dat zou kunnen? Dat zou wel superhandig zijn.
Maar daar voor moet het op zijn minst eerst gewoon werken…Heb nu in de head de verwijzing naar je lightbox.js staan, de complete url voor de zekerheid…ik heb geen body onloads of dergelijke…ik pas de door Flickr Postbar gemaakte urls aan door er netjes rel=”lightbox” tussen te zetten, en wel in de eerste en neit de wteede…voglens mij doe ik alles dan goed? Maar toch brengt een klik op de kleine plaatjes me nog steeds naar Flickr.
Ik zie waarschijnlijk heel stom, iets heel erg over het hoofd…?
Help me svp…gaat beetje boven de spreekwoordelijke pet…
Hey!
Super mooi script, maar ik vroeg me af of je een idee had hoe ik dit kan toepassen vanuit een iframe. Op het moment worden de foto’s dan geplaatst in het iframe, in plaats van full screen…
Rene: met iframes maak je het wel heel ingewikkeld. Een deel van het script zou moeten draaien in de “moederpagina”, een deel in het iframe. En dan is nog maar de vraag of ze met elkaar mogen praten: Als ze van verschillende domeinen gedraait worden, zal een beetje browser de boel tegenhouden. Geen eenduidig verhaal dus, waar ik je ook verder niet mee kan helpen.
Succes!
Ik heb een poging gedaan om dit toe te passen in versie 2.02, zonder success… heb jij je er al eens aan gewaagd?
PS je anti spam comment module maakt een comment in safari onmogelijk
Is dat zo? Dat moest ik natuurlijk meteen even testen… dit bericht bewijst het tegendeel. Heb je javascript misschien uitstaan?
Hallo Bas, ik ben inmiddels zo ver dat ik een serie foto’s kan laten zien door de code [roadtrip]. Maar weet jij wat ik moet doen om een serie te stoppen, als ik meerdere series op één pagina wil plaatsten. Nu loopt alles door als ik meerdere series op één pagina wil plaatsen. Ik hoop dat je een oplossing weet.
inmiddels (niet veel later) heb ik het antwoord gevonden. De tekst tusesn [] bepaald wat de serie wordt. Dus geef de volgende serie een ander tekst tussen [] en je hebt de oplossing.
grt Edwin
Hoi, fijne plugin,
ik zou graag in de caption een wat langere tekst gebruiken, met hier en daar wat simpele opmaak.
op http://www.csz.be onder internat straatkunstenfestival, prog zaterdag zie je wat ik bedoel.
Helaas weet ik zelf geen goede oplossing, enig idee?