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.

Visit PhpDaddy.com

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

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