Next Prev

FishEye

Have you ever look through a glass? This demo is exactly that effect of enhancing the image behind the glass, the Fisheye. It's not flash, only pure JavaScrip.

Here is a quick way to run your own popurls style website

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<html>
<head>
<base href="http://www.ajaxdaddy.com/web20/jquery/interface-fisheye/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fisheye - Interface plugin for jQuery</title>
		<script type="text/javascript" src="javascript/jquery.js"></script>
		<script type="text/javascript" src="javascript/interface.js"></script>
    <link   type="text/css"       href="css/interface-fisheye.css" rel="stylesheet"> 
</head>
<body>
<div id="fisheye" class="fisheye">
		<div class="fisheyeContainter">
			<a href="#" class="fisheyeItem"><img src="images/home.png" width="30" /><span>Home</span></a>
			<a href="#" class="fisheyeItem"><img src="images/email.png" width="30" /><span>Email</span></a>
			<a href="#" class="fisheyeItem"><img src="images/display.png" width="30" /><span>Display</span></a>
			<a href="#" class="fisheyeItem"><img src="images/clock.png" width="30" /><span>Clock</span></a>
			<a href="#" class="fisheyeItem"><img src="images/web.png" width="30" /><span>Web</span></a>
			<a href="#" class="fisheyeItem"><img src="images/home.png" width="30" /><span>Home</span></a>
			<a href="#" class="fisheyeItem"><img src="images/email.png" width="30" /><span>Email</span></a>
			<a href="#" class="fisheyeItem"><img src="images/display.png" width="30" /><span>Display</span></a>
			<a href="#" class="fisheyeItem"><img src="images/clock.png" width="30" /><span>Clock</span></a>
			<a href="#" class="fisheyeItem"><img src="images/web.png" width="30" /><span>Web</span></a>
		</div>
</div>

<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#fisheye').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.fisheyeContainter',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
			
		}
	);

</script>

</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Club Penguin

2010-07-25 06:07:06

At least for me in Firefox, the images get stuck in their current position when I leave their area, they don't fall back. club penguin cheats

Rajni

2010-03-10 05:41:29

This is linear. Any chances of making it circular? please help

Iwillgetulater

2010-03-04 06:22:24

error when I tried pasting it in my html editor. Whats wrong?

EarnestineKim

2010-03-04 04:16:05

It's understandable that money can make us free. But what to do if someone has no cash? The one way only is to get the personal loans or credit loan.

Akeem

2009-12-07 06:46:23

Hi, that`s nice. Is it possible to move the div "fisheyeContainter" with the mouse or automaticly (just like iphone) ) Thanks fpr answering this question...

Viresh Rajput

2009-12-03 23:16:53

Very Nice Script Thanks For Shairing

LadyH

2009-03-17 09:48:57

Just take this root : http://www.ajaxdaddy.com/web20/jquery/interface-fisheye and add at the end /javascript/jquery.js do the same thing for the interface, the css and the pics! :)

Çelik

2009-03-11 08:14:06

For download and info http://interface.eyecon.ro/demos/fisheye.html

Çelik

2009-03-11 08:11:52

@Finch You can configure that with proximity parameter. For more info visit interface site docs. see: http://interface.eyecon.ro/docs/fisheye And it was oringinally coded against Jquery 1.1

Lifuyun

2009-02-26 17:34:45

Good!How it is downloaded?

Ash

2008-11-28 02:31:31

can we have jquery.js and interface.js files

Dao Anh Phuc

2008-11-15 10:06:28

thanks for sharing

Hombre

2008-11-08 16:48:37

Same proble as Pulak. Works in an HTML file, but can't get it working on my site. Weird stuff.

Ahmet Rasit

2008-11-04 11:17:34

you can download these scripts with using FLASHGET and then you must open this scipts with a program like a macromedia dreamwiever.

Ahmet Rasit

2008-11-04 11:15:07

very vell.. but i cant use this in my sites. please someone help me. i downloaded everything. js, css, img png, in turkish:herseyi denememe rağmen yapamadım lütfen yardım

Finch

2008-10-03 04:01:13

to my mind a bit wrong behaviors. an icon starts to zoom while mouse pointer is moving to the icon. It should start to zoom then the pointer is just over the icon.

Pulak

2008-09-21 23:19:55

jquery.js,interface.js,interface-fisheye.css where are they?

Cory

2008-09-10 22:05:05

Ajax is Asynchronous Javascript and XML so yea i would hope its a lot like javascript.

Pugsx

2008-08-22 02:36:37

when i use this in my site all my pics are on top of each other but work fine in a blank html file

Sergey

2008-08-13 01:57:22

Great thing!!!!!

Eddie

2008-07-23 09:50:37

enjoyed it a lot

Pohvak

2008-07-21 16:42:37

how can i use this with another ajax example? i mean how can i code two base href ?

2008-05-27 19:26:43

Ajax is alot like javascript it seems.

Siddiq

2008-04-16 21:47:21

Very nice Script and can i have this

Clipzze

2008-04-01 09:47:16

how can i get this javascripts ?

Suresh

2008-03-26 01:47:58

This is very good but i did't get jquery.js,interface.js,interface-fisheye.css, and images.

Schnurr

2007-12-02 23:33:17

really nice script. "blacksmit": safari is the best web browser in the world. not an opinion

Moca

2007-11-24 09:14:46

i dont understand how you guys are downloading this script

Julz

2007-11-05 21:43:16

it works fine in firefox.. thanks for teh script

Blacksmith

2007-09-25 19:02:23

Leland... Safari is not a real web browser

Leland

2007-09-22 18:53:01

No Safari... You need to make this cross-browser compatible, else no one will use it...

Cosmin

2007-09-21 05:12:04

whatever png file i use as menu icons, the script/css turns the transparent background of the image to grey. How can I have the images roll-over with transparent background?

Keith

2007-09-21 01:18:21

hey this is really beatiful... yes this is JS, but not AJAX!

Amit Sharma

2007-09-18 11:02:25

Are there any copyrights compliancy involved here if we were to use this feature in one of our applications. We will provide appropriate credits link to this site and will not claim this is our work.

MiCRoSCoPiC^eaRthLinG

2007-09-17 03:31:31

Is it possible to implement this effect in a vertical way? If so can you please give me an idea on how to go about it? Thanks :)

Jargon

2007-09-14 12:10:31

What can i say....simply Wow!!

Kevin

2007-09-13 01:44:41

Thanks for your good scripts!

Graham

2007-08-28 07:40:13

Yes a mouse-exit function would be class although interface.eyecon.ro may be a better place to request this function.

Predrag Stojadinovic

2007-08-03 03:48:54

Simply AWESOME. Is there a way to detect mouse-exit? Because, at least for me in Firefox, the images get stuck in their current position when I leave their area, they don't fall back.

Kenan

2007-07-06 08:22:48

i like your scripts..Thanks for sharing.

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

FishEye

Have you ever look through a glass? This demo is exactly that effect of enhancing the image behind the glass, the Fisheye. It's not flash, only pure JavaScrip.

Comment on this example