iFishEye

by Fabio Zendhi Nagao (http://zend.lojcomm.com.br/)

iFishEye is an open source (free) javascript tool for creating a fisheye lens effect.

index:

Index
Abstract
Examples
Browser compatibility
Features
Usage
License
Download
Version history
Comments

Handling a long list of contents is one of the oldest problems in browsing. Probably scrolling is the most common behavior to solve this problem, but after Mac OS X Dock another approach is becoming very popular. This is when FishEye effect comes to us, it can hold any number of items, and resizes them dynamically to fit while using magnification to clarify smaller resized items. iFishEye goal is to bring the FishEye effect into the web and provide an easy development alternative for content displaying with standard compliant XHTML and unobtrusive JavaScript.

examples:

O. Mac OSX Fisheye Dock

I. display: inline, vertical-align: top, caption: bottom

II. display: block, caption: bottom

III. display: matrix, caption: {first-line: top, second-line: bottom}

Home	To do	Tools	Stats	Users	Sync
Home	To do	Tools	Stats	Users	Sync

browser compatibility:

iFishEye is compatible and tested in Internet Explorer, Firefox (and its mozilla friends), Opera and Safari (thanks Erik for testing it). But it should work in other browsers too... If you successfully find another compatible browser, please let me know ;)

features:

iFishEye is fully configurable. You can change any default option just initializating the class with an object in JSON. The following options are available:

(object) container (default document)
(string) targetImageClass (default ".iFishEyeImg")
(string) targetCaptionClass (default ".iFishEyeCaption")
(jso) dimThumb (default {width:64, height:64})
(jso) dimFocus (default {width:128, height:128})
(int) eyeRadius (default 128)
(int) pupilRadius (default 50)
('x' || 'y' || "both") useAxis (default 'x')
("L1" || "L2") norm (default "L1")
(string) blankPath (default "images/blank.gif")
(function) onEyeOver(obj) (default function(){})
(function) onEyeOut(obj) (default function(){})
(function) onPupilOver(obj) (default function(){})
(function) onPupilOut(obj) (default function(){})

how to use:

First of all, iFishEye is built over MooTools v1.1, so both libraries are required.
Get MooTools at http://mootools.net and iFisheye here.
With scripts in hands, include them between your "head" definition:

Initialize the iFishEye class:

That's it, at this rate you should be able to use iFishEye. To enable the effect for something, just add the properties class="iFishEyeImg" to the image and class="iFishEyeCaption" to the caption.

Nothing better than an example to explain a tool usage, so here is the code behind this page examples:

<h3>display: inline, vertical-align: top, caption: bottom</h3>
<div id="iFishEye_example_1">
	<table>
		<tr>
			<td><a href="#"><img class="iFishEyeImg" src="images/home.png" alt="home" /><br /><span class="iFishEyeCaption">Home</span></a></td>
			<td><a href="#"><img class="iFishEyeImg" src="images/orders.png" alt="orders" /><br /><span class="iFishEyeCaption">To do</span></a></td>
			<td><a href="#"><img class="iFishEyeImg" src="images/tools.png" alt="tools" /><br /><span class="iFishEyeCaption">Tools</span></a></td>
			<td><a href="#"><img class="iFishEyeImg" src="images/stats.png" alt="stats" /><br /><span class="iFishEyeCaption">Stats</span></a></td>
			<td><a href="#"><img class="iFishEyeImg" src="images/users.png" alt="users" /><br /><span class="iFishEyeCaption">Users</span></a></td>
			<td><a href="#"><img class="iFishEyeImg" src="images/sync.png" alt="sync" /><br /><span class="iFishEyeCaption">Sync</span></a></td>
		</tr>
	</table>
</div>
<br />
<h3>display: block, caption: bottom</h3>
<div id="iFishEye_example_2">
	<ul>
		<li><a href="#"><img class="iFishEyeImg_2" src="images/home.png" /><br /><span class="iFishEyeCaption_2">Home</span></a></li>
		<li><a href="#"><img class="iFishEyeImg_2" src="images/orders.png" /><br /><span class="iFishEyeCaption_2">To do</span></a></li>
		<li><a href="#"><img class="iFishEyeImg_2" src="images/tools.png" /><br /><span class="iFishEyeCaption_2">Tools</span></a></li>
		<li><a href="#"><img class="iFishEyeImg_2" src="images/stats.png" /><br /><span class="iFishEyeCaption_2">Stats</span></a></li>
		<li><a href="#"><img class="iFishEyeImg_2" src="images/users.png" /><br /><span class="iFishEyeCaption_2">Users</span></a></li>
		<li><a href="#"><img class="iFishEyeImg_2" src="images/sync.png" /><br /><span class="iFishEyeCaption_2">Sync</span></a></li>
	</ul>
</div>
<br />
<h3>display: matrix, caption: {first-line: top, second-line: bottom}</h3>
<div id="iFishEye_example_3">
	<table>
		<tr>
			<td><a href="#"><span class="iFishEyeCaption_3">Home</span><br /><img class="iFishEyeImg_3" src="images/home.png" /></a></td>
			<td><a href="#"><span class="iFishEyeCaption_3">To do</span><br /><img class="iFishEyeImg_3" src="images/orders.png" /></a></td>
			<td><a href="#"><span class="iFishEyeCaption_3">Tools</span><br /><img class="iFishEyeImg_3" src="images/tools.png" /></a></td>
			<td><a href="#"><span class="iFishEyeCaption_3">Stats</span><br /><img class="iFishEyeImg_3" src="images/stats.png" /></a></td>
			<td><a href="#"><span class="iFishEyeCaption_3">Users</span><br /><img class="iFishEyeImg_3" src="images/users.png" /></a></td>
			<td><a href="#"><span class="iFishEyeCaption_3">Sync</span><br /><img class="iFishEyeImg_3" src="images/sync.png" /></a></td>
		</tr>
		<tr>
			<td><a href="#"><img class="iFishEyeImg_3" src="images/home.png" /><br /><span class="iFishEyeCaption_3">Home</span></a></td>
			<td><a href="#"><img class="iFishEyeImg_3" src="images/orders.png" /><br /><span class="iFishEyeCaption_3">To do</span></a></td>
			<td><a href="#"><img class="iFishEyeImg_3" src="images/tools.png" /><br /><span class="iFishEyeCaption_3">Tools</span></a></td>
			<td><a href="#"><img class="iFishEyeImg_3" src="images/stats.png" /><br /><span class="iFishEyeCaption_3">Stats</span></a></td>
			<td><a href="#"><img class="iFishEyeImg_3" src="images/users.png" /><br /><span class="iFishEyeCaption_3">Users</span></a></td>
			<td><a href="#"><img class="iFishEyeImg_3" src="images/sync.png" /><br /><span class="iFishEyeCaption_3">Sync</span></a></td>
		</tr>
	</table>
</div>

license:

This piece of code is is released under the Open Source MIT license, which permits you to use it and modify it in every circumstance. For more details read it below:

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

download:

iFishEye is available in the formats below:

packed version : Ultra compressed version (2.51KB) - The ready to use "as it is" version.
full version : Full version (5.20KB) - For developers who needs to change or just study it.

version history:

05/07/2007 : Page updates

[fixed] removed underlines from example anchors
[added] attached some style to the example captions
[added] the most wanted example: Mac OSC Fisheye Dock

05/04/2007 : v1.002

[changed] (fn) defaultOptions => (object) options
[fixed] Internet Explorer now uses Win32 AlphaImageLoader filter for a better scaling result
[added] blankPath option : set the path + blank image (1px transparent gif)
[added] smooth animation when mouse leaves the container
[added] useAxis option : set which axis will be used to compute the distance
[added] little comment with author, url and license in the compressed version.

03/21/2007 : v1.001

[changed] _getDistance default from L2-Norm (Euclidean norm) to L1-Norm. (thanks for Kalistek)
- [pros] lightweight calculation makes the algorithm faster (specially in Apple and Linux)
- [pros] you can easily change back to L2-Norm with {norm:"L2"} initialization
- [cons] instead of a circle eye is now a rotated square ;)
[changed] default eyeRadius from 128px to 192px
[added] container option : set the element where iFishEye will observe the "mousemove" event
[added] norm option : set the type of eye. L1 := Square, L2 := Circle

03/20/2007 : v1.0 - first public release

comments:

First release3/20/2007 7:15:44 PM

Author:Fabio Zendhi Nagao(http://zend.lojcomm.com.br/)

The first release of ifisheye is finally available. iFishEye brings the FishEye effect into web. You can create fisheye dock like menu with standard compliant XHTML and unobtrusive JavaScript.

Great!4/21/2007 10:34:59 AM

Author:Carsten Schwede

This is the best implementation I've seen so far!
Congratulations, really great work!

Wawaweewah!4/23/2007 4:43:05 PM

Author:Paul

This looks really nice!
Congrats on this great piece of scripting. Can't understand anything of scripts, but the results you can managed by some codes is really unbelievable!

Fantastic5/9/2007 9:21:17 AM

Author:Spence(NA)

This is a great use of MooTools!

dojo5/10/2007 11:50:02 AM

Author:Bob

Dojo has a simular, but nicer thing

Great job5/14/2007 1:19:49 PM

Author:Can YILMAZ

Congratz bro! Great job;)

MOOO!5/15/2007 11:46:26 AM

Author:Patrick

Is there a way to have this bottom justified, similar to the way the MacOS works? Yes, the first example is exactly what are you looking for.

Excellent!5/16/2007 1:47:09 PM

Author:Kagliostro(www.kagliostro.net)

Your fisheye menu is really fantastic!
But I have a problem: I downloaded directly your <a href="http://zend.lojcomm.com.br/ifisheye/example.asp">web example</a> (that works very very well both Firefox as IE6). I would run it locally for modify it. But when I try to execute it, in IE6 I see <a href="http://img512.imageshack.us/img512/2111/fisheyeproblemoe0.jpg">this</a> (instead on Firefox is identical to original).
I modified absolute url (and so on Firefox it absolute identical to you original ASP page) but again I' ve those "screenshots".

Can you give me some suggests (<a href="http://www.kagliostro.net/fisheye.zip">here</a> I've upload "my" broken copy of your ASP page)?

Thanks (and many many compliments for you incredibile work!!!)

PS: sorry for my bad english!Hi Kagliostro, I'll take a look in your .zip as soon as possible.

@05.17.2007: I found your problem. It's related to the missing blank.gif you can put it in the default directory: "images/blank.gif" or set the path in the class initialization: {blankPath: "your path"}. It's required because of the IE AlphaImageLoader behavior.

Ohhhhh5/17/2007 8:46:42 AM

Author:Kagliostro(www.kagliostro.net)

THANKSSSSSSSSS VERY MUCH!!!!

I know IE problem with PNG and overall I have noticed that your fisheye included default PNG correction by alphaloader (really professional), but I forget completely that requires blank gif...
Now it works perfectly!
Sorry for my (stupid) request.

PS: I want to add in my blog sidebar, your "logo" but... you don't have one? ;)))
Again, compliments!

PS2: if you want "suggest" for your next work, in internet I don't find "revolver photogallery" that clones Itunes music store cover rotation system (it would be fantastic to use as blog rotation header image for example). I propose me as your beta-alpha-gamma-whatyouwant tester ;))))))

cool5/22/2007 11:42:05 AM

Author:_lf

it's great, really! you guys probably have 30cm in JS skill or so ;)

How to make it statis5/27/2007 7:21:12 AM

Author:Agam(http://agam.punya.web.id)

I want to make it always on the behind of window. So if you scroll down or scroll up, it always on the behind of the window. Could ifisheye do that?Yes, since iFishEye is not fixed to any previous defined structure, it's up to you set by xhtml and css the right position you want for your widget xD

Awesome5/29/2007 5:54:48 AM

Author:Ahmed Maawy

Guys like you are the reason why technology moves forward.

These might look like addins today, but tomorrow they become an essential for web art! And it all begins with an idea, that with time evolves and rectifies itsself.

Thumbs up to the creator of iFishEye, and all those who thrive to improve it by eliminating its bugs.

You are one of the reasons why Web Developers like us keep up with time.

web5/30/2007 9:36:48 AM

Author:jacque

yes i love it, fairyuser

konqeuror5/30/2007 5:38:53 PM

Author:matt

works in konqueor too

help5/30/2007 9:15:48 PM

Author:nathan(n/a)

hi i can'tfigure out how to use this can you help me...i like example 1
thanxHi, take a look in the docs, the implementation of iFishEye is really easy...

Sorry...6/1/2007 12:11:54 PM

Author:BillyG(http://www.billy-girlardo.com)

I'm just not crazy about everything around it jumping with it. It makes the page too jittery IMO. If there was a way to isolate the container of choice, I think it would look a lot better. Nice work though."If there was a way to isolate the container of choice"

Of course there's a way oO;; check the documentation.

mootools 1.11 doesnt work6/6/2007 12:46:42 AM

Author:jony(na)

i like your widget. but i cant get it to work with the latest mootools. please verify if it works.
Checking...

'True' fisheye?6/7/2007 11:13:17 AM

Author:Jonathan Gray

Alright. Pretty spiggin' impressive - but how about a 'true' fisheye image system as opposed to a dock-a-like?

By which I mean an absolutely sized container, capable of fitting n number of images in and resizing without pushing them off the edge, or otherwise violating the bounding area? i.e. the menu is a constant size, images are resized with respect to this.

I was trying to work out how to do that, using your code as a jumping off point.. But the math and logic areas of my brain are failing today. (Either by shrinking items further from the center of focus, or fiddling the z-index of zoomed items so they pop out instead of pushing along. Just thinking out loud..)

Nevertheless - very cool, and much more readable than the dojo widget!

boxes on images6/9/2007 5:58:10 AM

Author:jox(http://dyocojm.googlepages.com/DC.html)

hi, how can i remove the boxes on images? please check out my site.. http://dyocojm.googlepages.com/DC.html.. tnx..Did you try:
#iFishEye_example_1 a img {border: none;} ?

Absolutely GREAT, but important question :)6/10/2007 4:45:59 PM

Author:Florian Hofmann

I love this, absolutely great! â€”>

Anyone with an idea how to make one item â€œactiveâ€ onload of the page? This should look like when you move your mouse over an icon as soon as the page loads. Possible? Again: When the page loads, one icon (for example â€œhomeâ€) should already be â€œbigâ€ (as it would be if you point the mouse over it). Please help Thank you!Hum... you want to set an active item... Hum...

name:
email:		website:
comment:
title:		rating: