Pikachoose - Initiate vertical-centering script on image change

Question

I have a jQuery script vertically an horizontally centering an image within a div. This works great for the first image loaded into the Pikachoose slider, but I need the script to reinitialize when Pikachoose changes slides--making the next image vertically and horizontally center.

Here's the vertical/center script working on the image:

$(window).load(function(){
    var $img = $('img.galleryfull');
    var h = $img.height();
    $img.css('margin-top', +h / -2 + "px");
    var w = $img.width();
    $img.css('margin-left', +w / -2 + "px");
});

How do I reinitialize this when PikaChoose loads the next image in the gallery?

Answer 1

According to the documentation, there is the animationComplete callback that you could use. Something like this should work...

Wrap your code in a function:

function centreImage() {
    var $img = $('img.galleryfull');
    var h = $img.height();
    $img.css('margin-top', +h / -2 + "px");
    var w = $img.width();
    $img.css('margin-left', +w / -2 + "px");
}

Call your function when the page loads:

$(window).load( centreImage());

Call your function when the image changes:

$("#id").PikaChoose({animationFinished: centreImage});