[JavaScript] lightbox 2 toepassen lukt niet

[Tommy The Cat]

Voor deze website wil ik gebruik maken van lightbox 2. Zoals je ziet is dit een fraaie en functionele wijze van het browsen tussen afbeeldingen. Uiteindelijk zal ik de kleuren en afbeeldingen die worden gebruikt nog aanpassen naar het uiterlijk van de website.

Dit is mijn eerste (wat meer serieuze) website, eerste kennismaking met CSS, divs en JavaScript. De basis van CSS is mij inmiddels bekend (denk ik) en JS is sinds vanmiddag nieuw. Al enige tijd ben ik aan het uitzoeken en proberen, maar ik krijg het niet voor elkaar om lightbox 2 te integreren in mijn website. Het volgende heb ik gedaan.

De files gedownload. Je krijgt JavaScript files, een CSS file en GIF bestanden.
Daarnaast vind je een voorbeeld HTML met de volgende instructies:

Part 1 - Setup

Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

<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>

Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Optional: Use the title attribute if you want to show a caption.

If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example: <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

Deze stappen heb ik doorlopen. Mij HTML en CSS volgen zometeen. De aandachtspunten zijn volgens mij vooral:
1. Juist linken naar de JS bestanden.
2. Juist linken naar de CSS.
3. Juist linken naar de prev/next GIFjes met de CSS.
4. Iets doen met loading en closelabel GIFjes dat me niet geheel duidelijk is, maar wat ik heb afgekeken van iemand anders.
5. Goed activeren met de rel=lightbox

Ad 1
Zoals je zometeen kunt zien heb ik in de code in de header van de HTML gelinkt naar de drie relevante JS files. Hoewel er meerdere JS files zijn meegeleverd, hier wordt echter niet over gerept. Ik vermoed dat ik dit juist heb gedaan omdat ik in de broncode van websites die hetzelfde gebruiken eenzelfde codering heb gevonden.

Ad 2
Eerst heb ik de CSS rules verplaatst naar mijn reeds bestaande (externe) CSS file, maar voor wat meer scheiding en overzicht heb ik uiteindelijk de meegeleverde CSS file apart gehouden en in de HTML gelinkt naar deze file zoals ik dat ook heb gedaan met de 'originele' CSS file.

Ad 3
De CSS was een rommeltje. Ik heb alles netjes uitgelijnd op de manier waarop CS3 dat zelf ook doet. Vervolgens heb ik goed doorgelinkt naar de plaatjes.

Ad 4
De insructie hierbij is mij niet duidelijk. Ik heb afgekeken van een andere website welke hetzelfde gebruikt en deze codering overgenomen:

<script language='JavaScript'>
var fileLoadingImage = '/Images/images java/loading.gif';
var fileBottomNavCloseImage = '/Images/images java/closelabel.gif';
</script>

... maar weet niet wat dit betekent en of het goed is (wel juist doorgelinkt!).

Ad 5
Ik heb de kleinere image op mijn pagina doorgelinkt naar de grotere variant. Deze grotere JPG heb ik dus niet eerst in een HTML geplaatst en de kleinere image naar deze HTML laten doorlinken; dat is namelijk volgens mij niet de bedoeling. Vervolgens heb ik de code ertussen gezet, e.e.a. ziet er dan zo uit:

<div id="inhoudDiv"><a href="Images/Schilderijen groot/Roodzwarteolifant.jpg"><img src="Images/Schilderijen klein/Roodzwarteolifantklein.jpg" width="144" height="145" rel="lightbox" /></a></div>

Ok dan nu mijn voltallige HTML en CSS files:
[code=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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="Assets/styles.css" rel="stylesheet" type="text/css" />
<link href="Assets/lightbox.css" rel="stylesheet" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<script language='JavaScript'>
var fileLoadingImage = '/Images/images java/loading.gif';
var fileBottomNavCloseImage = '/Images/images java/closelabel.gif';
</script>

</head>

<body>
<div id="containerDiv">
<div id="rechterDiv">
<div id="reclameDiv">
<h1><img src="Images/Allwheelsimport.gif" width="75" height="38" /></h1>
<h1><a href="http://www.allwheelsimport.nl/" target="_blank">ALL WHEELS IMPORT</a></h1>
</div>
</div>
<div id="centerDiv">
<div id="headerDiv"></div>
<div id="mainDiv">
<div id="inhoudDiv"><a href="Images/Schilderijen groot/Roodzwarteolifant.jpg"><img src="Images/Schilderijen klein/Roodzwarteolifantklein.jpg" width="144" height="145" rel="lightbox" /></a></div>
</div>
<div id="footerDiv"></div>
</div>
<div id="navigatieDiv">
<div id="linksDiv"><a href="index.html">SCHILDERIJEN</a><a href="beaottink.html">BEA OTTINK</a><a href="index.html">KUNSTMARKTEN</a><a href="index.html">CONTACT</a></div>
</div>
</div>
</body>
</html>
[/code=html]

Dit is alleen de nieuwe CSS file dat dus gebruikt wordt voor de zgn lightbox-JS toepassing. De overige CSS laat ik achterwege, dat is waarschijnlijk niet relevant. *Ik merk op dat dit CSS bestand in tegenstelling tot de andere niet begint met: @charset "utf-8";. Ik weet niet of dat van belang is.
[code=css]
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox img{
width: auto;
height: auto;
}
#lightbox a img{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#imageContainer{
padding: 10px;
}
#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{
left: 0;
}
#hoverNav a{
outline: none;
}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
display: block;
}
#prevLink {
left: 0;
float: left;
}
#nextLink {
right: 0;
float: right;
}
#prevLink:hover, #prevLink:visited:hover {
background-image: url(../Images/images%20java/prevlabel.gif);
background-repeat: no-repeat;
background-position: left 15%;
}
#nextLink:hover, #nextLink:visited:hover {
background-image: url(../Images/images%20java/nextlabel.gif);
background-repeat: no-repeat;
background-position: right 15%;
}
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100% ;
}
#imageData{
padding:0 10px;
color: #666;
}
#imageData #imageDetails{
width: 70%;
float: left;
text-align: left;
}
#imageData #caption{
font-weight: bold;
}
#imageData #numberDisplay{
display: block;
clear: left;
padding-bottom: 1.0em;
}
#imageData #bottomNavClose{
width: 66px;
float: right;
padding-bottom: 0.7em;
outline: none;
}
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}
[/code=css]

Huidige situatie, zie website en klik op het schilderij.

Vraag: kan iemand aan de hand van de informatie in deze OP al zien dat er iets fout gaat?

[disjfa]

Staat de rel in het voorbeeld niet op de <a> in plaats van de <img> Gewoon de instructies opvolgen....

En debuggen kan je zelf verder wel neem ik aan.

[Bosmonster]

^^ with stupid

rel op de a-tag

[Tommy The Cat]

Wonderbaarlijk... zo'n lang verhaal en dan zo'n kort doch zeer effectief antwoord .

Bedankt en excuus voor mijn onoplettend gedrag en onnodige tijdsberoving.

Edit:
debuggen? wat?

[ Voor 11% gewijzigd door Tommy The Cat op 24-04-2008 17:38 ]

[Tommy The Cat]

Tommy The Cat schreef op donderdag 24 april 2008 @ 17:18:

4. Iets doen met loading en closelabel GIFjes dat me niet geheel duidelijk is, maar wat ik heb afgekeken van iemand anders.

Ad 4
De insructie hierbij is mij niet duidelijk. Ik heb afgekeken van een andere website welke hetzelfde gebruikt en deze codering overgenomen:

<script language='JavaScript'>
var fileLoadingImage = '/Images/images java/loading.gif';
var fileBottomNavCloseImage = '/Images/images java/closelabel.gif';
</script>

... maar weet niet wat dit betekent en of het goed is (wel juist doorgelinkt!).

Dit gedeelte is blijkbaar toch niet goed. Ik mis de loading en closelabel GIFjes namelijk. Kijk...

Instructie
'Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.'

Edit:
Het is al gelukt. Ik moest in dat javascript bestand zelf e.e.a. goed doorlinken.

[ Voor 12% gewijzigd door Tommy The Cat op 24-04-2008 21:14 ]