Expanding Images is a javascript class that enables the user to animate a row of images on the webpage, so that the focused image appears larger than the other images in the row. It can be used as navigation, gallery, thumbnail viewer, and so on. Use your imagination :)
There are a few parameters to specify for the script to work.
To start, we need all the id’s of the images to use in our script. We can specify these with our create-method. See below for more information.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | var BDEI = new BDExpandingImages(); // create a new BDExpandingImages object. //This thing will handle the animation. window.onload = function(){ // we can only initiate the expanding images // when the page is fully loaded. // optional parameters: BDEI.width = 120; // width of a single image, in pixels. default 100. BDEI.height = 182; // height of a single image, in pixels. default 100. BDEI.classNormal = 'normal'; // class of an image when not active. default '' BDEI.classHover = 'active'; // class of an image when active. default '' BDEI.scaleNormal = 0.6; // scale of an image when not active. default 0.8. BDEI.scaleHover = 1; // scale of an image when active. default 1.4. BDEI.range = 6; // number of images on each side of the active // image that are pulled. default 3. BDEI.create('scroller_image1','scroller_image2','scroller_image3', 'scroller_image4','scroller_image5','scroller_image6'); // id's of the images we're using for the animation. BDEI.init(); // initiating the script. BDEI.hover(BDEI.itemIDs[3]); // activate a default image. This will be image 4. // by default no images are active after initiation. } |
There are several scripts like this one available on the internet, but most of them are not working on all browsers or are taking WAY too much CPU. There are probably some other faults too, for example the need for absolute positioning, but these are the two main reasons why I scripted my own class. It has alot more parameters to set than most of the others too, for example the range-parameter or class-parameters.
There are 4 replies to this item:
February 13th, 2009
olivier says:
message from france thank you
October 20th, 2008
Sam says:
Very very nice :-)
October 15th, 2008
Nick says:
It feels like its shaking because the script only detects a change when you’re hovering on another image than the one currently active. When you’re moving your cursor but staying above the active image, the script will detect no change. This takes alot of CPU-load away, and make it run smoothly on most pc’s.
If you want to change the images on runtime, you can change the source of the images by accessing them through their ID’s. Sorting images isn’t available atm, that currently depends on the html. Maybe later tho :)
Should be fairly easy using the DOM-model from your browser, I might change that in the near future :)
October 15th, 2008
Ronny says:
Looking good. However it feels like it’s shaking a bit when hovering.
Also on roll out, I’ld thinkg it shrinks back to normal size (which it doesn’t).
Also: is there a way of managing the images at runtime? Adding, sorting, removing images from the array?
However: great stuff. I’ld love to see this evolve into a bigger project :)