Ik heb een website die per product ID bepaalde afbeeldingen laat zien. Elk product heeft meerdere kleuren en ik heb een AJAX navigatie ingebouwd om van kleur te verwisselen en de bijhorende foto's te laten zien.
Colorbox werkt normaal wanneer ik de pagina voor het eerst laad. Maar nadat ik AJAX gebruik om de volgende kleur op te roepen werkt Colorbox niet meer als ik op een foto druk.
Ik gebruik hierbij 2 DIV's, een Div voor de 'hoofdfoto' met de product details.
De andere Div is voor de sfeerfoto's van het product. Hierin worden meerdere foto's getoond.
Class='group1' staat voor de colorbox manier die gebruikt moet worden.
Hoe krijg ik de colorbox werkend nadat ik een ajax request heb gedaan? // Alle plaatjes laden wel correct in de twee div's.
Hierbij de code van mijn website als die voor het eerst geladen is:
<script>
$(document).ready(function(){
$(".group1").colorbox({rel:'group1'});
});
</script>
<script type="text/javascript">
function getXMLRequest() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
var xmlhttp = getXMLRequest();
function showUser(str)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("foto1").innerHTML=xmlhttp.responseText;
showUser2(str);
}
}
xmlhttp.open("GET","getimage.php?q="+str,true);
xmlhttp.send();
}
function showUser2(str)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("foto2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getimage2.php?q="+str,true);
xmlhttp.send();
}
</script>
<body>
<? include_once ("header.php");?>
<div id="body">
<div id="foto1" class="links" align="center" style="vertical-align:middle;">
<p><?php echo $extraimages;?></p>
</div>
<div id="foto2" class="midden">
<table width="100%" border="0" cellspacing="0" cellpadding="15">
<tr>
<td width="19%" valign="top"><a class="group1" href="inventory_images/<?php echo $id; ?>.jpg" title="<?php echo $product_name; ?>"><img src="inventory_images/resized_<?php echo $id; ?>.jpg" width="350" height="400" alt="<?php echo $product_name; ?>" /></a><br />
</td>
<td width="81%" valign="top"><h3><?php echo $product_name; ?></h3>
<p><?php echo $product_id; ?><br />
<p><?php echo "€".$price; ?><br />
<br />
<?php echo "$category"; ?> <br />
<br />
<?php echo $details; ?>
<br />
</p>
<form id="form1" name="form1" method="post" action="cart.php">
<input type="hidden" name="pid" id="pid" value="<?php echo $id; ?>" />
<input type="submit" name="button" id="button" value="Add to Shopping Cart" />
</form>
<img id="329" src='product_images/chroom.png' width='25' height='25' onclick="showUser(this.id)"><img id="330" src='product_images/brons.png' width='25' height='25' onclick="showUser(this.id)">
</td>
</tr>
</table>
</div>
