To open links that are used in imageMenu, simply remove the onClick option:
var myMenu = new ImageMenu($$('#imageMenu a'),{
openWidth:310,
border:2
});
I've used the onClick option in my example code to demo some of the other features of the menu.
Tuesday, 12 February 2008
opening links with imageMenu
Subscribe to:
Post Comments (Atom)
42 comments:
Is there any way to make this menu so that it is vertical instead of horizontal?
Yes, just change in imageMenu.js "width" to "height" (3 times) and make some changes in the css, if you like the pictures not side by side.
can someone please shed some light onto how to get one of the elements to be open by default. i have a list of 9 "li" items and I would like one of them to be expanded when the page loads.
-thank you
Thanks so much for your work on this!
I'm unfortunately having some troubles with it (when I try to make it open a link).
Could I possibly get a more elaborate walkthrough on how to make this happen? Sorry for the newb question...
thanks again for all your work! I love your projects!
I can get it to open a link, however, removing the on click event means I also loose the animation effect. Any way to have it linking to a new page but maintaining the mouseover animation/?
insitges, i'm having the same issue...
can anybody help out a couple of noobs? :)
thanks!
I too am having some problems getting the (open: ) function to stick when a page loads. I have four items in my list and tried using an array, but the 0(zero) would not work - I could get it to work with 1-3 however. So I tried passing an ID instead. This method works for all items and opens the declared ID when the page loads, but as soon as the menu is interacted with in any way, the items are reset.
A quick look at the code revels the following:
if($type(this.options.open) == 'number')
When using ID's, this will never be the case. Is there an easy way to change this so that ID declared in the open: field will retain the open status once the menu is interacted with (like it does when using the array)? Or is there a reason that this script doesn't work for the first item in the array 0 (zero).
Any help on this matter is greatly appreciated.
Thanks
I'm also having the same issue trying to open an item on load. Someone please help!
Sorry i haven't responded quicker, for some reason blogger has stopped emailing me when comments where posted?
Anyway, i will write a more detailed useage post for imageMenu in the next couple of days.
Samuel,
This is a GREAT app. A more detailed usage post would be a great help. Thanks!
I must be missing something, but when I increase the number of images from five to say six, and then increase the width of the imageMenu in the CSS to 600, it doesn't show the 6th image.
It only shows the 6th image once you move your mouse over the menu once. Then it all works fine.
Could someone point me in the right direction in terms of adding more images to the menu?
Please, it's urgent that I get this open links to function. I hope you can at least post this code modification for us within a day or two as it's very important for me. Thanks!
Fantastic work regardless.
How's the manual going? I really need a good usage guide :( I can't seem to get it to work...
Great app btw ;)
Thanks!
Hello there,
very great script, but i have a small problem with it.
I tried to implent the menü in my site, but whenever i hover the items, the right side of the menu... vibrates... or something like that.
You can see it here: http://cyone.funpic.de/web2.0/
How can i fix that? I think, its a css-issue (http://cyone.funpic.de/web2.0/src/main.css).
I hope, you can help me... Tanks :)
try this:
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){window.location=(e);}});
});
Hi!
Great menu!
What should I delete from the javascript if I don't want a click to close an opened menu/image? I just want a click to open a menu and close the one that's already opened, nothing should happen when you click an already opened menu.
Thank you!
Hi Samuel Birch,
I use the provided code in my website and it works quite good.
var myMenu = new ImageMenu($$('#imageMenu a'),{
openWidth:310,
border:2
});
However, after clicking on the images to specified link, the pop up window with the URL is shown and never link to destination.
How should I fix it?
My website http;//www.seacanoe.net
For those who having problems with opening links.
Open imageMenu.js , look for the word "click" and remove it.
Psst. Its not offficial, I just tried it out and it worked :) .
Please ignore my last comment, Its having problems in Internet explorer.
Ok this works :)
Remove the following from "imageMenu.js" :
el.addEvent('click', function(e){
if(obj.options.onOpen){
new Event(e).stop();
if(obj.options.open == i){
obj.options.open = null;
obj.options.onClose(this.href, i);
}else{
obj.options.open = i;
obj.options.onOpen(this.href, i);
}
}
})
Fantastic!
Sreejith's suggestion seems to work fine! What I've been looking for, thanks!
Thank you Sreejith R
It works fine. You've done the great job.
That's what I looking for.
Hi great script!
I was wondering how can i put hotspots (image mappings)on images so i can create subcategories for example in a picture, like we do with normal pictures with usemap="#Map"
Anyone knows ?
Thanks
Hey, felt like I *had* to leave a quick note here to say thanks for making this control. It really is fantastic.
That said, I'm also having the 'item open on load' issue. It works with every index but 0. I hope you can shed some light on this for us when you get the time.
Thanks again for putting this out.
I seem to have a problem with safari. I posted my problem on the mootools forum http://forum.mootools.net/viewtopic.php?pid=46648#p46648 but got no answer.
The problem with safari happens only when open is set to a value. Without open it works great.
Here is a screenshot of how it looks with safari: http://demo.lcx.at/imagemenu/menu_safari.png
The strange thing is, when I refresh the page everything is working again.
Hey, I would very much appreciate a detailed how-to for installing this menu. The error I'm getting right now is in the imageMenu.js file. The error is as follows: this.elements[0} has no properties.
this.widths.closed = this.elements[0].getStyle('width').toInt();
This script is great.
I am just having trouble as I currently have the menu in an iframe and I need the links to open in the parent window. Anyone know how to do this?
thanks
I just figured it out. I was making it hard for myself trying to do it in the javascript, when all I needed to do was add the target to the "li" url
I figured out how to get it to open the first image on default.
You will want to add an id tag to your href (name it the same as the "li" class so there is no confusion):
a href="#" id="welcome"
Then replace "null" in your imagemenu.js file with the id:
open: 'welcome',
Also, you'll want to make the "mouseleave" code the same as the "mouseenter" code to prevent it from going back to the default:
el.addEvent('mouseleave', function(e){
new Event(e).stop();
this.reset(i);
-- It's a hack, but it works.
Thanks very much for making this fantastic tool available.
I've managed to alter the code & css to create a vertical version of this which can be viewed here:-
http://www.portal-gaming.com/ailsa/plugins/imagemenu/index.htm
I've been having some problems however when attempting to add this vertical bar to a site. The problem is that in Firefox because the images are defined as li elements it adds a horrically large margin to the left hand side of the div it's in. Has anyone come across this issue and managed to fix it??
For implementing this I changed all of the 'width' to 'height' and 'widths' to 'heights'. I also changed the css properties to make them compatible with the new width and height of the images.
spartin,
have you tried changing the li setting to
margin-left:-40px
That helps me out.
----
I too would like to see a phatfusion manual for this with some examples. I did find the example of aaron's site very useful.
---
Thanks so much for this amazing bunch of scripts. I am inspired.
I think that the time and effort that you folks put in to help us poor newbees is amazing.
I’ve been creating a site for my partner at www.elleschorrphotography.com based on the imagemenu concept.
I’m almost there but could use some help with a few details.
I’m trying to make the rightmost (about) image link to another page while still allowing the other images to bring up the lightbox images as they do now.
I’ve read the previous posts and have tried to follow their instructions but I must admit that I’m lost.
Could someone look at what I’ve done and give me a hand.
Thanks
Jerry Kornbluth
Great Script. I'm after a little tweak. How would I use it as a 'reveal'. For example, make the image only 110px or so wide and then reveal text underneath when the mouse is moved over.
For those trying to get rid of the error box displaying instead of the link page remove the error function on the end of the function call as said by Walrus above^^
Thanks go to Walrus
Function should look like this:
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){window.location=(e);}});
});
One other issue if you want the menu display properly in Opera and Firefox WITHOUT using the mootools_main.css file, because there is only one rule in that file that applies to the menu and that is:
ul,li{padding:0;}
So remove the main.css file and add:
padding: 0;
to:
#imageMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1000px;
}
in the imageMenu.css file.
This way you can loose the overload of the extra css file that doesn't really apply to the menu itself.
Is it possible to get the image menu to work inside of a table? Would like to use this effect as a header on a page within a table. When I try and use this and paste the content between the div tags the effect doesn't work
@Sean
Yes you could put the container div for the menu inside a table cell i.e. td but you would be better using div's and css for your mark-up, tables are useful for tabular data i.e. charts and lists of data and not a great way to code pages with. Albeit possible.
other then showing the menu image on mouse click over the anchor tag, I also like to show the same menu image under a different condition, say another button click within that page.
is there anyway i can trigger the image to slide without calling that window.addEvent thing?
thank you
For show array zero change line 73:
if(this.options.open){
for this:
if(this.options.open!=null){
yea now show item zero
I'm still lost...
Could someone take a look at my post of May 1 and give me a hand?
It's the one regarding linking only some of the imagemenu images to open another page while the other images bring up the lightbox thumbnails as they do now.
Thanks,
Jerry
Post a Comment