Ik ben al een tijdje op zoek naar een manier om bij het laden van een pagina automatisch een FancyBox te openen. Fancybox is een re-make van Lightbox die met een zoom-effect opent.
Fancybox werkt onder jQuery, ik ben dus eigelijk opzoek naar een manier om de jQuery automatisch te openen.
Op mijn zoektocht ben ik de volgende pagina's tegen gekomen.
- De pagina van Fancybox zelf, over een automatisch-laden functie is er niks over te vinden.
- Manier om ThickBox (ook jQuery maar werkt anders) automatisch te openen. Dit gaat volgens de unload-statement in de body-tag, die werkt helaas niet met de fancybox.
- Iemand met het zelfde probleem, helaas geeft hij geen oplossing. Hier verwijzen ze ook naar de unload-statement, ik denk echt dat het in die richting moet zitten.
De makkelijkste oplossing zou zijn om een onclick element als een onload te gebruiken, helaas komt er in mijn code helemaal geen onclick voor.
Mijn pagina ziet er nu zo uit:
http://84.87.239.89/zoap/voorbeeld.php
Als jullie ideeën hebben hoor ik het graag!
Fancybox werkt onder jQuery, ik ben dus eigelijk opzoek naar een manier om de jQuery automatisch te openen.
Op mijn zoektocht ben ik de volgende pagina's tegen gekomen.
- De pagina van Fancybox zelf, over een automatisch-laden functie is er niks over te vinden.
- Manier om ThickBox (ook jQuery maar werkt anders) automatisch te openen. Dit gaat volgens de unload-statement in de body-tag, die werkt helaas niet met de fancybox.
- Iemand met het zelfde probleem, helaas geeft hij geen oplossing. Hier verwijzen ze ook naar de unload-statement, ik denk echt dat het in die richting moet zitten.
De makkelijkste oplossing zou zijn om een onclick element als een onload te gebruiken, helaas komt er in mijn code helemaal geen onclick voor.
Mijn pagina ziet er nu zo uit:
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>
<link href="fancy/fancy.css" rel="stylesheet" type="text/css" media="screen" />
<script src="fancy/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="fancy/jquery.fancybox-1.0.0.js" type="text/javascript"></script>
<script src="jquery.pngFix.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("p#fancy a").fancybox({
'hideOnContentClick': true,
'overlayShow': true,
'overlayOpacity': 0.5
});
});
</script>
</head>
<body>
<p id="fancy"><a href="images/splash.jpg">klik!</a></p>
<div id="fancy_wrap">
<div style="left: 612.5px; top: 658.5px; display: none;" id="fancy_loading">
<div style="top: -120px;"></div>
</div>
<div style="top: 476px; left: 245px; height: 100px; width: 154px; display: none;" id="fancy_outer">
<div id="fancy_inner">
<div style="display: none;" id="fancy_bg">
<div class="fancy_bg fancy_bg_n"></div>
<div class="fancy_bg fancy_bg_ne"></div>
<div class="fancy_bg fancy_bg_e"></div>
<div class="fancy_bg fancy_bg_se"></div>
<div class="fancy_bg fancy_bg_s"></div>
<div class="fancy_bg fancy_bg_sw"></div>
<div class="fancy_bg fancy_bg_w"></div>
<div class="fancy_bg fancy_bg_nw"></div>
</div>
<div id="fancy_nav"></div>
<div style="display: none;" id="fancy_close"></div>
<div style="display: none;" id="fancy_content"></div>
<div id="fancy_title">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="fancy_title_left"></td>
<td id="fancy_title_main"><div></div></td>
<td id="fancy_title_right"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>http://84.87.239.89/zoap/voorbeeld.php
Als jullie ideeën hebben hoor ik het graag!
Laatst bewerkt:
