Include a reference to com.bydust.ExpandingImages.js in your head-tag. You can use following parameters to modify the script:
Required parameters are marked.
var BDEI = new BDExpandingImages(); // create a new BDExpandingImages object. This thing will handle the animation. REQUIRED
window.onload = function(){ // we can only initiate the expanding images when the page is fully loaded.
BDEI.width = 120; // width of a single image, in pixels.
BDEI.height = 182; // height of a single image, in pixels.
BDEI.classNormal = 'normal'; // class of an image when not active
BDEI.classHover = 'active'; // class of an image when active
BDEI.scaleNormal = 0.6; // scale of an image when not active
BDEI.scaleHover = 1; // scale of an image when active
BDEI.range = 6; // number of images on each side of the active image that are pulled.
BDEI.create('scroller_image1','scroller_image2','scroller_image3','scroller_image4','scroller_image5','scroller_image6','scroller_image7'); // id's of the images we're using for the animation REQUIRED
BDEI.init(); // initiating the script. REQUIRED
BDEI.hover(BDEI.itemIDs[3]); // activate a default image. This will be image 4
}
Click here to download this example, including the javascript Class file.