Lightbox 2 thumbnails ...

Ik ben bezig met een website te ontrwerpen, en wil er graag foto's op plaatsen en dergelijke. Nu heb ik lightbox 2 gedownload en de codes in m'n webpagina gezet. Alles is gelukt. Enkel staat er nu in plaats van een foto gewoon een naam, foto 1, foto 2 en foto 3 ... Ik zou de tekst, foto 1 , graag veranderen in een thumbnail, en zodra je er dan klikt een hele fotosessie kan bekijken .... Is dit mogelijk? En hoe?

Mvg Tommy

De opbouw van hoe je het script moet gebruiken is alsvolgt:

<a href="LOKATIE_GROOT_PLAATJE" rel="lightbox[ALBUMNAAM]" title="FOTOTITEL">
<img src="LOCATIE_THUMBNAIL" alt="FOTOTITEL" title="FOTOTITEL" /></a>

zoals je ziet, zie je 6 woorden in hoofdletter waarvan FOTOTITEL er 3x in voorkomt.

STEL

jouw foto's staan in de volgende map: fotoalbum/album1/

En alle thumbnails van jouw foto's in de map: fotoalbum/album1/thumb/

De huidige foto heeft de naam: IMG_999.jpg

Je album heet: Testalbum1

En de beschrijving van een foto is: Natuur1

De volledige code die je dan moet gebruiken wordt dan:

<a href="fotoalbum/album1/IMG_999.jpg" rel="lightbox[Testalbum1]" title="Natuur1"><img src="fotoalbum/album1/thumbs/IMG_999.jpg" alt="Natuur1" title="Natuur1" /></a>

Wanneer je nu op de thumbnail (linkje) klikt. Zal het lightbox script het zo benaderen dat de foto geopend wordt in een soort kadertje. Hier kun je op volgende klikken, vorige, de titel van de link bekijken (FOTOTITEL). En zit er een kruisje bij om het kader weg te klikken.

Als ik het goed had zat er bij lightbox ook een bestandje bij wat je mogelijk aan moest passen voor de lokatie van de lightbox plaatjes (kruisje, vorige, volgende enz.) Dit staat ook op hun website.

Een voorbeeld van een soort lightbox kun je hier vinden -> http://www.buurtverenigingzuidpolderzuiderpark.nl/index.php?p=fotoalbum&map=Koninginnendag%202010

Deze website is ook door mij gemaakt, en gebruikt een ander pakket dan lightbox.

Ik hoop dat je er zo uit komt.

Groeten,

Leroy

Wow, das precies een hele brok ... xD Zal het eens proberen . Is dit dan ook de manier voor een heel album achter 1 thumbnail te zetten?

Om een heel album achter 1 thumbnail te zetten zou je een beetje kunnen spelen met linkjes en CSS.

voorbeeld HTML:

<a href="fotoalbum/album1/IMG_999.jpg" rel="lightbox[Testalbum1]" title="Natuur1"><img src="fotoalbum/album1/thumbs/IMG_999.jpg" alt="Natuur1" title="Natuur1" /></a> 

<a href="fotoalbum/album1/IMG_888.jpg" class="hidden" rel="lightbox[Testalbum1]" title="Natuur2"></a>
<a href="fotoalbum/album1/IMG_777.jpg" class="hidden" rel="lightbox[Testalbum1]" title="Natuur3"></a>

Je ziet nu dat de bovenste link-tag een plaatje bevat waar je op kan klikken.

Daaronder zie je 2 link-tags staan die GEEN plaatje hebben, en ook totaal GEEN inhoud (geen tekst etc.).

Je ziet ook dat ik die zonder plaatje/tekst een class heb gegeven genaamd 'hidden'.

Deze class moet je in je CSS eraan toevoegen:

#DIVNAAM a.hidden {
   display:none;
   visibility:hidden;
}

Je ziet #DIVNAAM staan. Dit komt omdat anders elk link-tag met de class 'hidden' verdwijnt. Dus de DIV waar deze linkjes instaan moet je dus vervangen door DIVNAAM.

# betekend: ID=""

. betekend: class=""

Als je dus dit gebruikt zullen alle link-tags zonder plaatje verdwijnen en dus NIET zichtbaar zijn op je pagina. Wanneer je op de thumbnail drukt zullen ze wel netjes tevoorschijn komen in het overzicht voor volgende, vorige, close etc.

Ik hoop dat het je zal lukken Veel succes

Groeten,

Leroy

Het scriptje dat je hebt gegeven klopt idd Maar is hetgene wat ik wil mogelijk? Nl, dat je 1 thumbnail op de pagina hebt staan, je daar dan op klikt, het venster van lightbox opent en de foto's in het kader kan bekijken .... Begrijpen jullie wat ik bedoel?

Mvg Tommy

Zie mijn laatste reactie ;-) Daar staat het in beschreven hoe je het moet uitvoeren voor hetgeen wat je wilt.

Groeten,

Leroy

ok even snel enkele vraagjes tussendoor. Ben echt nog een leek op het gebied van webdesign, laat staan dat ik alle naambetekennisen ken

Even vragen wat volgende namen wil zeggen :

-class

-DIVNAAM

-

class betekend niets anders dan CSS doorverwijzing.

Je hebt namelijk je klakkeloze HTML code en CSS code

HTML code is onderandere een tabel en DIV'jes e.d.

CSS code is de opmaak van iets (een tabel DIV'jes e.d.)

Een class roep je in CSS aan met een puntje voor de naam.

Een id is identiek aan een class. Alleen mag je deze maar 1x gebruiken.

Voorbeeld:

HTML code:

<div id="website">
<table class="tabellen">
<tr>
<td>Linkerkolom</td>
<td>Rechterkolom</td>
</tr>
</table>
</div>

CSS code

#website {
   width:800px;
   background:#9a0000;
}
.tabellen{
   width:80%;
   background:#000000;
}

CSS wordt opgeslagen in een stylesheet bestand (style.css bijvoorbeeld).

Wat ik dus bedoel met een class is het 'puntje'

De divnaam bedoel ik dus bijvoorbeeld #website { }

voorbeeld van jouw vraag:

<div id="fotos">
<a href="fotoalbum/album1/IMG_999.jpg" rel="lightbox[Testalbum1]" title="Natuur1"><img src="fotoalbum/album1/thumbs/IMG_999.jpg" alt="Natuur1" title="Natuur1" /></a> 

<a href="fotoalbum/album1/IMG_888.jpg" class="hidden" rel="lightbox[Testalbum1]" title="Natuur2"></a>
<a href="fotoalbum/album1/IMG_777.jpg" class="hidden" rel="lightbox[Testalbum1]" title="Natuur3"></a> 
</div>

Je moet nu dus zorgen dat alle linkjes niet zichtbaar zijn. Dat doe je met behulp van CSS

#fotos a.hidden {
   display:none;
   visibility:hidden;
}

De CSS code hier zegt eigenlijk hetvolgende:

'iets' met het id: "fotos" met daarin een a-tag met de class: "hidden"

Die moet krijgen: display:none; visibility:hidden;

Ik hoop dat je het zo snapt

Dit heet trouwens mocht je dat willen weten: valid XHTML programmeren

Groeten,

Leroy

Pfff, het is niet gelukt met die verborgen foto's. Kga het gewoon zo laten en wat aparte paginas maken voor de verschillende fotosessie's

Bedankt voor alle hulp.

Greetz Tommy