Mini Mods - Ajax Fisheye Menu

This modification was just something random that I adapted to vBulletin.. I will release it with the status of beta, and when it has been proven to be stable, I will update it...

Demo of fisheye effect:
Demo
Demo - Vbulletin Live example (slightly modified from original release)

Installation:
Step 1:
- Extract and Upload contents of the "upload" folder to your server

Step 2:
Admin CP> Plugins and Products> Manage Products> Add/Import Product> Import> product-ajax_fisheye_menu.xml

Step 3:
Admin CP> vBulletin Options> Ajax Fisheye Menu >
Change.... Path to 'fisheye' directory
Attachment 72006

Step 4:
- Add

$afm_menu

in whatever template you decide to show menu (most likely navbar or header template)

Step 5(skip if vBa CMPS is not installed):
If you have vBadvance CMPS installed, you will need to do the following in order for this to work on your homepage as well:
- Admin CP> vBa CMPS > Default Settings> Main Options>
- Under the 'Portal Output Global Variables' setting you will need to add "afm_menu"

Step 6:
- Now you will need to configure the menu entries.. open the 'afm_fisheye_menu' template under the 'Ajax Fisheye Menu' template group.
- To add new menu items just use the following format:

<a class="dock-item" href="#"><img src="fisheye/images/home.png" alt="home" /><span>Home</span></a>

To Update:
- Reupload contents of upload folder to forum root...
- Import new product XML file with the overwrite setting on

V. 0.95-beta
+ Added a couple necessary AdminCP options
--- Enable/Disable option
--- Path to fisheye directory option

V. 0.94-beta
+ Fixed IE Quick Edit bug
+ Fixed IE font size drop down bug
(I have a feeling that this version will fix most of the Ajax related bugs, but members will have to let me know...)

V. 0.93-beta
+ Fixed fisheye directory error... now you only have to upload to your root..
+ Mood Manager now able to change moods in IE..
+ Added a folder in zip called 'extras' that include a set of blue themed icons made from the original set...

V. 0.92-beta
[s] + Added $vboptions[bburl] reference to images and scripts for smoother integration (thanks yoyoyoyo)[/s]
+ Added install.txt within zip file

V. 0.91-beta
+ Fixed IE blocks bug
+ Moved Stylesheet to Templates for easier editing
-- You can now edit the stylesheet by going to the 'afm_fisheye_stylesheet' template
+ Cached Templates

V. 0.9 - beta release
+ Fisheye effect

Step 6:
Come back to this thread and give me some feedback...

Known Bugs:
[s] - One user reports hover effect doesn't work in opera browser[/s]
- User Reports conflicts with shoutbox and casino mod
[s] - Unable to change mood in Mood Manager while using IE6.. works in IE7 and firefox[/s]
[s] - Unable to use Quick Edit in IE[/s]
- User Reports bug with VBPicGallery: "This mod looks fine everywhere except the gallery, where the icons show as a huge size, with text next to them."
[s] - Advanced Editor has weird code inside text size selector and font selector drop down boxes[/s]

Future Features
AdminCP Options
[s] - Enable/Disable[/s]
- Maybe options to set images and links in menu
- Any other suggestions welcome...


Script adapted from:
http://www.ndesign-studio.com/blog/mac/css-dock-menu

Here are some free icons you could possibly use with the dock:
http://www.dezinerfolio.com/2007/02/...a-gloss-icons/

This site has hundreds of icons.. but the site is in chinese...
http://www.tucoo.com/icon/index.htm
[S] I will provided limited support for this hack, and will continue to work on and update it when I can.. [/S]

I am no longer developing or supporting this MOD...

There are other things in life more important than VB you know

[BecomeUnbroken]

V. 0.95-beta
+ Added a couple necessary AdminCP options
--- Enable/Disable option
--- Path to fisheye directory option



**Don't forget.. now you have to change the path to the fisheye directory in the options.. or it will NOT work..

[BecomeUnbroken]

Originally Posted by sparky5693

I'm playing with this mod in a less used style in the forum. Click the link below, and switch the viewed style (drop down at bottom of page) from swirl, to default style.

http://www.theshaveden.com/forum/vbpicgallery.php?

BTW- Thanks for the great support. All too often a great hack is released, and then forgotten about. You've been all over this one since you released it... Thank You.

the .js files aren't being loaded.. check that the "Ajax Fisheye Menu headinclude Auto Edit" plugin is enabled...

[sparky5693]

Originally Posted by BecomeUnbroken

the .js files aren't being loaded.. check that the "Ajax Fisheye Menu headinclude Auto Edit" plugin is enabled...

I double checked, and it is indeed enabled. Please notice, that it is working fine, in all areas of the forum, except vbpicgallery (where the link took you)

[inciarco]

Great Improvements BecomeUnbroken!! :up:

The Possibility to Turn On and Off the Hack via Options of Control Panel is Great and Very Easy to Use!! :up:

My Best Regards!!

[inciarco]

Originally Posted by yeku

I have this problem...In Firefox it works perfectly

but in IE, I have this image.

Where is it my error? Some solution, idea? My version is 3.6.7


thanks

I had the Same Problem, and I Used .GIF Files and Works Fine with .GIF Files!!

Original Files are .png so use a Software like Microsoft Photo Editor and Save Them With GIF Format, and in Template "afm_fisheye_menu" change the Extension of the Files from .png to .gif!!

My Best Regards!! :up:

[BozzaJos]

Originally Posted by Yukino_AE

could someone please post how to make this vertical? ^_^ nice mod

I second that! I would love to use this in a vertical mode and within a vBA CMPS block. Is this possible and how could I do that?

[yeku]

Originally Posted by inciarco

I had the Same Problem, and I Used .GIF Files and Works Fine with .GIF Files!!

Original Files are .png so use a Software like Microsoft Photo Editor and Save Them With GIF Format, and in Template "afm_fisheye_menu" change the Extension of the Files from .png to .gif!!

My Best Regards!! :up:

Perfect, thank you very much...

Problem solved with the gif

[Yukino_AE]

anyone? help with making this vertical? plz?

[TheMilkCarton]

I've made mine vertical... but the JavaScript has been customized specifically for my layout, and there's really no possibility that it'd work perfectly for everyone if I were to release it here. Sorry.

If you're good with math, you can figure out the equations for the mouse pointer positions and the distance formula in the JS file.

Go to the Interface website and download the Fisheye source. Play around with it, and place it below the other JS files in your headinclude so that it overwrites anything different from the Fisheye JS does that comes in this package.

------------------------------

To elaborate:

1) Go here --> http://interface.eyecon.ro/download
2) Select Fisheye, then download the package.
3) Place that JS file below the others
4) Start modifying it.

Here's the code you'd need to modify:

function(e)
	{
		var pointer = jQuery.iUtil.getPointer(e);
		var toAdd = 0;
		if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'center')
			var posx = pointer.x - el.fisheyeCfg.pos.x - (el.offsetWidth - el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size())/2 - el.fisheyeCfg.itemWidth/2;
		else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == 'right')
			var posx = pointer.x - el.fisheyeCfg.pos.x - el.offsetWidth + el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.size();
		else 
			var posx = pointer.x - el.fisheyeCfg.pos.x;
		var posy = Math.pow(pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight/2,2);
		el.fisheyeCfg.items.each(
			function(nr)
			{
				distance = Math.sqrt(
					Math.pow(posx - nr*el.fisheyeCfg.itemWidth, 2)
					+ posy
				);
				distance -= el.fisheyeCfg.itemWidth/2;
						
				distance = distance < 0 ? 0 : distance;
				distance = distance > el.fisheyeCfg.proximity ? el.fisheyeCfg.proximity : distance;
				distance = el.fisheyeCfg.proximity - distance;
								
				extraWidth = el.fisheyeCfg.maxWidth * distance/el.fisheyeCfg.proximity;
								
				this.style.width = el.fisheyeCfg.itemWidth + extraWidth + 'px';
				this.style.left = el.fisheyeCfg.itemWidth * nr + toAdd + 'px';
				toAdd += extraWidth;
			}
		);
		jQuery.iFisheye.positionContainer(el, toAdd);
	}

I think that was all I modified, specifically the posx/posy and the distance formula. Good luck.

[toddos]

hi, where can i define the option when the icon is getting bigger if the mouse is coming ?

I put the menue in my navbar, but now i can't click on the logout link, because before i go to the link the fisheye menu icons are coming out