lightbox

Status
Niet open voor verdere reacties.
K

kompas

Gebruiker
Lid geworden
2 okt 2002
Berichten
341
Heeft iemand voor mij een gebruiksaanwijzing voor lightbox. Er staan er een aantal op internet maar die zijn allemaal hetzelfde en kom ik niet uit..

Er staat op een gegeven moment dit:

Nog niet, het enige wat je nu nog moet doen is Lightbox activeren bij een afbeelding.

1. Voeg hiervoor bij een link naar een afbeelding de volgende code toe: rel="lightbox"

De volledige code voor een afbeelding ziet er als het goed is dan ongeveer als volgt uit:
<a href="images/foto.jpg" rel="lightbox"><img src="images/foto_thumb.jpg" alt="de omschrijving"></a>

2. Het is mogelijk om door een set afbeeldingen te navigeren met Lightbox. Gebruik hiervoor de volgende code:
rel="lightbox[vakantiefotos]". Dit ziet er dan als volgt uit:

<a href="images/foto1.jpg[vakantiefotos]" rel="lightbox"><img src="images/foto1_thumb.jpg" alt="de omschrijving"></a>
<a href="images/foto2.jpg[vakantiefotos]" rel="lightbox"><img src="images/foto2_thumb.jpg" alt="de omschrijving"></a>
<a href="images/foto3.jpg[vakantiefotos]" rel="lightbox"><img src="images/foto3_thumb.jpg" alt="de omschrijving"></a>

Het resultaat is nu op de website te zien! 

Het is totaal onduidelijk waar ik de link <a href="images/foto.jpg" rel="lightbox"><img src="images/foto_thumb.jpg" alt="de omschrijving"></a> moet zetten...


Wat ik ook doe het werkt gewoon niet... Ben nu 2 dagen bezig en baal onwijs dat er gewoon geen goede tutorial te vinden is op het hele net!

kompas
 
Op welke code wil je dit toepassen?

De uitleg spreek aardig voor zich, op elke afbeelding die jij in de lightbox wilt weer laten geven moet je rel="lightbox" toevoegen.

Als je een serie wilt laten weergeven moet je een toevoeging aan lightbox doen.

Dan wordt het bijvoorbeeld rel="lightbox[serie1]" of rel="lightbox[serie2]". De naam tussen de blokhaken mag je dus zelf bepalen.
 
dit is mijn oefenblad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
</head>

<body>
<a href="&lt;a href=&quot;images/vpRo.jpg&quot; rel=&quot;lightbox&quot;&gt;&lt;img src=&quot;images/gea4grootb.jpg&quot; alt=&quot;de omschrijving&quot;&gt;&lt;/a&gt; "><img src="images/gea4grootb.jpg" width="262" height="327" /></a>
</body>
</html>

Als ik een test wil doen. Zie ik wel het plaatje maar als ik daar op klik krijg ik een foutmelding dat die iets niet kan vinden. Naar mijn weten heb ik het goed gedaan maar dat zal wel niet.

Waar moeten de plaatjes staan. Thumbnails en de grote plaatjes. Moeten die in images van Light staan of hoeft dat niet perse? Dat is dus al erg onduidelijk. En waar moet ik de link:

<a href="images/gea4grootb.jpg" rel="lightbox"><img src="images/vpRo.jpg" alt="de omschrijving"></a>


plaatsen... Volkomen onduidelijk!! Zal ook wel een stuk gebrek aan ervaring zijn hoor. Maar ik zou graag mede namens dat graag een tutorial hebben waarvoor je geen gedegen basiskennis nodig hebt..
 
Probeer dit eens:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
</head>

<body>
<a href="images/vpRo.jpg" rel="lightbox"><img src="images/gea4grootb.jpg" alt="de omschrijving" /></a>
</body>
</html>
 
snif! hahaha

Wat heb je nou gedaan dan? Ik deed het in het design gedeelte van DW. Maar blijkbaar had het enkel in het codegedeelte gedaan moeten worden..

Ik snap er niks van. Het werkt wel...

Ik kan de thumnails gewoon overal neerzetten he? een rijtje met plaatjes waarop je dan kan klikken..
 
Design-gedeelte in Dreamweaver gebruik ik nooit.

Misschien dat je aan dit meer hebt:

<a href="{url_naar_volledige_afbeelding}" rel="lightbox"><img src="{url_naar_thumbnail}" alt="{omschrijving}" /></a>

Kwestie van de dingen invullen :)
Bij een serie zul je dus rel="lightbox[{toevoeging}]" gebruiken.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan