Fisheye / Dock Menu

Here is a simple port of a Fisheye or Dock menu.
It is meant to be fairly quick and easy to get up and running so has a limited set of additional features.
Aimed at smaller sites and or users who aren’t confident with template chunks?
See a working demo in two level mode at http://www.3913.co.uk.
The snippet embeds the standalone Javascript within the page.

The default set-up :
images based on the doc id e.g. 1.gif & 1_small.gif for the home page
image sizes to be 128 px & 64px respectively
directory path to be assets/snippets/fisheye/
outputs top level pages that are both published and show in menu

You can customise any of the above and more with a smallish range of optional parameters.

It’s very basic PHP (my skill level) and could do with some tidying!
In particular the SELECT COUNT(*) query I used to check for no records to avoid output of useless HTML & JS.
I’m sure there’s a better way of doing it along with the SELECT * FROM query to get the document data, if someone can offer advice.
Any help or feedback appreciated before possible release to a wider audience.

Regards,

David

Very cool and even plays nice with Safari!

I’ve updated the snippet to include an &orderField
I’ve also streamlined the DB Query using one of the DBAPI functions (must look into what else they can do!)

David

Works nicely once it’s fully loaded, but for approx. 1-2 seconds, I see the big images overlapping content (see screenshot). Any chance to add a preloader or something?

I wondered if a preloader would help or not.
My thinking was that the large menu images are called earlier in the HTML than the JS that controls the transition from large to small and therefore the delay was in waiting for the JS to do it’s thing.
Or should I look at preloading the small images ready for the JS, which might minimise the delay?
Any help appreciated as I’m a beginner!
David

David this looks HOT. I saw it few days ago and I think this is as close as I ever going to get to my Mac workstation im dreaming about.
but the large images do ruins it for me too, there gotta be a way and I wish you’ll find it soon.
thanks for sharing!

Why don’t you make it initially load the smaller images as the placeholder image? Seems like this would make more since anyways since they start small anyways until they are hovered. I didnt look at the script at all but it appears that the small image expands until it reaches full size and then is swapped out for the full size image to get rid of the pixelation.

Thanks for the pointer.
The JS is not my strong point, but I’ll look a bit deeper.

I was looking for something like it for a client demo.
This will be a cool modx integration now ;-)

Thanks a lot.