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]

I just posted v.0.91... which included a fix for IE browsers... I will continue to investigate other reported bugs

Thanks..

[BecomeUnbroken]

Originally Posted by GrendelKhan{TSU

hmm....doesn't seem work properly with vbCMPS v3.0

doubled up links and no images show up.

make sure that the fisheye folder is in your root directory and not in your forum directory.. it looks as if your browser cannot find the javascript files and images so it displays everything as plain links (the lowercase links aren't actually links.. they are the alt rollover captions for the images, but since the images aren't being loaded properly they appear as if they are links)...

I am pretty sure this is due to the fisheye folder being in the wrong place.. because it seems the template is being parsed, even by vbadvanced

[yoyoyoyo]

I would appreciate it if you would put the install info in a text file and add it to the zip file - that's usually how it is done.

[yoyoyoyo]

I uploaded the folder to the root public_html directory, as you suggested ,and in vbadvanced it does not display correctly - it displays all of the images on the left hand side all bunched up together, and in the forum the images are not visible at all.

[BecomeUnbroken]

Originally Posted by yoyoyoyo

I would appreciate it if you would put the install info in a text file and add it to the zip file - that's usually how it is done.

will do.. next time i upload an update

[TheBlackPoet]

i like it... im going to use it on my forum... i will change the images but the script is going in!!

installed

[yoyoyoyo]

Instead try this in vbadvanced:

upload the "fisheye" directory to the FORUM directory.

edit the afm_fisheye_menu template and replace the contents with this instead:

<!--top dock -->
<div class="dock" id="dock">
  <div class="dock-container">
      <a class="dock-item" href="index.php"><img src="$vboptions[bburl]/fisheye/images/home.png" alt="home" /><span>Home</span></a> 
      <a class="dock-item" href="vbms.php"><img src="$vboptions[bburl]/fisheye/images/email.png" alt="contact" /><span>Contact</span></a> 
      <a class="dock-item" href="forum.php"><img src="$vboptions[bburl]/fisheye/images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/music.png" alt="music" /><span>Music</span></a> 
      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/video.png" alt="video" /><span>Video</span></a> 
      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/history.png" alt="history" /><span>History</span></a> 
      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/calendar.png" alt="calendar" /><span>Calendar</span></a> 
      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/rss.png" alt="rss" /><span>RSS</span></a>
      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/rss.png" alt="rss" /><span>RSS</span></a> 
      <a class="dock-item" href="#"><img src="$vboptions[bburl]/fisheye/images/rss2.png" alt="rss" /><span>RSS2</span></a>
  </div> 
</div>

<!--dock menu JS options -->
<script type="text/javascript">
    
    $(document).ready(
        function()
        {
            $('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }
            )
            $('#dock2').Fisheye(
                {
                    maxWidth: 60,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container2',
                    itemWidth: 40,
                    proximity: 80,
                    alignment : 'left',
                    valign: 'bottom',
                    halign : 'center'
                }
            )
        }
    );

</script>

edit - well I tried it, but in vbadvanced all of the images are all bunched up together on the left hand side instead of being displayed in the middle, but it works in the forum now.

[BecomeUnbroken]

Originally Posted by yoyoyoyo

I got this to work in vbadvanced - here is how to do it:

upload the "fisheye" directory to the FORUM directory.

edit the afm_fisheye_menu template and replace the contents with this instead:

Thank you.. I will include this in the next release... :up:

[BecomeUnbroken]

Originally Posted by yoyoyoyo

edit - well I tried it, but in vbadvanced all of the images are all bunched up together on the left hand side instead of being displayed in the middle, but it works in the forum now.

try v.0.92.. I made similar changes to the script so it should reference the same directory, whether you are in your root directory or your forum/ directory... It might fix your problem

[Kaleem]

Update didn't work. But the older version working fine i m still making changes to it.

http://www.friendskorner.com/forum