dojo Fisheye Example

dojo’s Fisheye widget is fun. The link above is to a demo of the Fisheye widget.

Notes:

Code

<div dojoType="dojox.widget.FisheyeList"
itemWidth="50" itemHeight="50"
itemMaxWidth="200" itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="bottom"
conservativeTrigger="false"
>

itemWidth and Height refer to the images when they are displayed initially, before the mouse hovers over them. You can use them to size the images as they are displayed.
itemMaxWidth and MaxHeight refer to the images when they are active or the mouse is hovering over them.

For best results, the images should be MaxWidth and MaxHeight dimensions, or larger. Images usually look better after they have been reduced, rather than expanding a small image. It is also easier to use square images, and make all the images the same size.

Check the CSS carefully if you find your list wrapping down to the next line. I found using min-width was helpful.

Credit/Thanks to:

http://dojotoolkit.org/demos/fisheye-demo
http://www.ajaxdaddy.com/demo-dojo-fisheye.html