Ik moet dus het lightbox script gebruiken in een iframe maar de image moet zich erbuiten weergeven wat op dit momenet niet het geval is.
http://www.install.webbjack.com/poppenstoet/index2.htm
is mijn link, daar doorklikken naar illustraties.
Ik heb nog geen thumbnail gemaakt omdat het een test afbeelding is.
maar als je dus klikt op image#1 dan verkracht hij de iframe
en dat is dus niet de bedoeling.
Iemand een idee hoe ik dit kan fixen?
illus.html :
HTML 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body>
<a href="images/uc.jpg" rel="lightbox" title="my caption">image #1</a>
</body>
</html>
Dit is de mainpage code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Poppenstoet</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
.style1 {font-size: 100px}
-->
</style></head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="mainContent">
<p> </p>
<p align="center"><img name="head" src="images/head.png" width="500" height="100" alt=""></p>
<p align="center"><a href="adres.htm">
<iframe src="iframe.htm" name="iframe" width="100%" height="500px" scrolling="auto" frameborder="0" background-color="d4dacf"> </iframe>
</a> </p>
<p> </p>
<!-- end #mainContent --></div>
<div id="footer">
<div align="center">
<p><a href="iframe.htm" target="iframe">Start</a> | <a href="informatie.htm" target="iframe">Informatie</a> | <a href="illus.html" target="iframe">Illustraties</a> | <a href="agenda.htm" target="iframe">Agenda</a> | <a href="links.htm" target="iframe">Links</a> | <a href="extra.htm" target="iframe">Extra</a> | <a href="adres.htm">Verkoopadressen</a></p>
</div>
</div>
<p> </p>
</div>
<!-- end #container --></div>
</body>
</html>