Hello there,

I have a simple

<a id="productIMGLarge6128" href="http://www.mysite.com/originalLarge.jpg" title="MyLargeImage" class="floatbox">
<span class="zoomIcon""><img src="styling/zoom.png" alt="zoom" /></span>
<img id="productIMGSmall6128" src="http://www.mysite.com/originalSmall.jpg" alt="MySmallImage" />
</a>

which is update on a click of a button by the following script
<script>
$(document).ready(function() {

$("#button").click(function(){
$("#button").spin("small", "#FFF");

$.ajax({
type: "POST",
url: "_/process/roofbox.php",
data: { color: "B", product: "6128" },
dataType: "json",
success: function(data){

$("#productIMGSmall6128").attr("src",data.productIMGSmall);
$("#productIMGLarge6128").attr("href","test");
$("#price6128").html(data.price);
console.log(data);
$("#button").spin(false);
}
});
return false;
});
});
</script>

Now the thumbnail updates, and so dose the href but, upon clicking on the thumbnail to enlarge the image it shows the original link and not the link that i have updated from the above script. Does floatbox cache the original href link? And if so how can i make this work?

Many thanks.

After dynamically adding (or modifying) floatboxed elements on a page, you need to run the fb.activate() function to light them up. In your case, this would be the last line of your jQuery ajax success callback. Please see this topic in the instructions for details.

Hello there, Excellent! Thanks for the great support!