Lightbox werkt niet

Status
Niet open voor verdere reacties.
B

bartvj

Gebruiker
Lid geworden
21 okt 2009
Berichten
49
Ik wilde bij het maken van mijn website een album invoegen. Ik vond de script Lightbox, heb alles volgens de handleiding gedaan, maar als ik op de thumbnail klik, dan opent alleen de afbeelding zelf (...../voorbeeldje.jpg) heb het keer op keer gecontroleerd, maar geen fouten gevonden. Hopelijk kunnen jullie me helpen.

Code:

Code: 
<!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"><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Huizen - b Art Designs</title>

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

<!-- InstanceEndEditable -->
<style type="text/css">
body {
	width: 1300px; /**/
	margin: 0 auto;
	text-align:center;
	background: #999 url(../images/background.png) repeat-x scroll center top;
}
#apDiv1 {
	position:absolute;
	top:0px;
	margin-left:200px; /**/
	width:900px;
	height:30px;
	z-index:1;
	font-family: "Swis721 LtEx BT";
	color: #CCC;
	font-size: 22px;
	text-align: left;
}
#apDiv2 {
	position:absolute;
	margin: 0 auto;
	top:31px;
	width:1300px;
	height:417px;
	z-index:2;
	background-image: url(../images/logo.jpg);
}
#apDiv3 {
	position:absolute;
	margin-left:570px;
	top:200px;
	width:500px;
	height:330px;
	z-index:4;
}
#apDiv4 {
	position:absolute;
	margin-left:200px; /**/
	text-align:left;
	top:449px;
	width:900px;
	height:650px;
	z-index:3;
	background-color: #CCCCCC;
	color: #999;
}
#apDiv5 {
	position:absolute;
	margin-left:200px; /**/
	top:400px;
	width:370px;
	height:85px;
	z-index:5;
}
#apDiv6 {
	position:absolute;
	margin-left:200px; /**/
	top:1100px;
	width:450px;
	height:20px;
	z-index:6;
	background-color: #666666;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
}
#apDiv7 {
	position:absolute;
	margin-left:650px; /**/
	top:1100px;
	width:450px;
	height:20px;
	z-index:7;
	background-color: #666666;
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
}
a:link {
	text-decoration: none;
	color: #CCC;
}
a:visited {
	text-decoration: none;
	color: #CCC;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
#apDiv8 {
	position:absolute;
	margin-left:255px; /**/
	top:549px;
	width:772px;
	height:450px;
	z-index:8;
}
</style>
<!-- InstanceEndEditable -->
</head>

<body>
<div id="apDiv1"> <a href="../index.html">Home</a> <a href="About.html">About</a> <a href="Huizen.html">Huizen</a> <a href="Website.html">Website</a> <a href="Contact.html">Contact</a></div>
<div id="apDiv2"></div>
<!-- InstanceBeginEditable name="paginahuis" -->
<div id="apDiv8">
  <table width="790" border="0" cellspacing="5">
    <tr>
      <td><a href="../images/DSCN0030.JPG" rel="lightbox" title="my caption"><img src="../images/T-DSCN0030.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0033.JPG"><img src="../images/T-DSCN0033.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0034.JPG"><img src="../images/T-DSCN0034.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0036.JPG"><img src="../images/T-DSCN0036.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0037.JPG"><img src="../images/T-DSCN0037.jpg" width="150" height="113" border="0" /></a></td>
    </tr>
    <tr>
      <td><a href="../images/DSCN0042.JPG"><img src="../images/T-DSCN0042.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0049.JPG"><img src="../images/T-DSCN0049.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0051.JPG"><img src="../images/T-DSCN0051.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0057.JPG"><img src="../images/T-DSCN0057.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0058.JPG"><img src="../images/T-DSCN0058.jpg" width="150" height="113" border="0" /></a></td>
    </tr>
    <tr>
      <td><a href="../images/DSCN0060.JPG"><img src="../images/T-DSCN0060.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0062.JPG"><img src="../images/T-DSCN0062.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0065.JPG"><img src="../images/T-DSCN0065.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0071.JPG"><img src="../images/T-DSCN0071.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0072.JPG"><img src="../images/T-DSCN0072.jpg" width="150" height="113" border="0" /></a></td>
    </tr>
    <tr>
      <td><a href="../images/DSCN0073.JPG"><img src="../images/T-DSCN0073.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0137.JPG"><img src="../images/T-DSCN0137.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0141.JPG"><img src="../images/T-DSCN0141.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0142.JPG"><img src="../images/T-DSCN0142.jpg" width="150" height="113" border="0" /></a></td>
      <td><a href="../images/DSCN0143.JPG"><img src="../images/T-DSCN0143.jpg" width="150" height="113" border="0" /></a></td>
    </tr>
  </table>
</div>
<div id="apDiv3"><img src="../images/huis-huizen.png" width="530" height="350" /></div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="content" -->
<div id="apDiv4"></div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="paginakop" -->
<div id="apDiv5"><img src="../images/huizen-menukop.png" width="370" height="85" /></div>
<!-- InstanceEndEditable -->
<div id="apDiv6">Hosted by <a href="http://www.exabytes.com/">ExaBytes</a> via <a href="www.perfectz.info">PerfectZ.iNfo</a></div>
<div id="apDiv7">b Art Designs 2010&copy;</div>
</body>
<!-- InstanceEnd --></html>
 
Lightbox

Hallo :thumb:

Dit is de code die je gebruikt als je op de thumbnail klik

<a href="images/image-1.jpg" title="Foto 1" rel="lightbox[fotobox]"><img src="images/thumb-1.jpg" width="100" height="67" /></a>

groetjes michel :cool:
 
dat staat er toch ook:

<td><a href="../images/DSCN0030.JPG" rel="lightbox" title="my caption"><img src="../images/T-DSCN0030.jpg" width="150" height="113" border="0" /></a></td>
 
hallo :thumb:

bij u code staat rel="lightbox"

het moet rel="lightbox[fotobox]" zijn

groetjes michel
 
Laatst bewerkt:
dat is toch alleen als je meerdere foto's gebruikt? het werkt iig niet
 
Laatst bewerkt:
Lightbox

Hallo :thumb:

Had ook de eerste maal dit probleem, opgelost door de mappen css, images en js van lightbox plus de web-pagina waar je de fotoalbum in maakt in een map te plaatsen

ook is de benaming van je foto's belangrijk U code van de foto is DSCN0030.JPG voor de grote foto en DSCN0030.jpg voor je thumbnail waardoor deze niet te vinden is in de code van het java-script die de foto moet laden in de pagina
Gebruik daarom image-1.jpg voor de grote foto's en thumb-1.jpg voor de thumbnails

groetjes michelscot :cool:
 
Laatst bewerkt:
Hoi Bart,
Als dit niet mocht helpen, misschien even een linkje naar een testpagina van zo'n niet werkende lightbox-pagina?
Er kunnen 1001,73 oorzaken zijn, incl. ergens een klein tikfoutje - en zonder (complete) patiënt is het moeilijk diagnose stellen. :rolleyes:

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan