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.
Subscribe to:
Post Comments (Atom)
65 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
Hi, I am very new to javascript and especailly mootools. But its something I am very much interested in.
Can someone direct me how I can use mootools in a wordpress driven website? Has anyone done that before?
Please let me know.
Thanks,
Asfahaan
Auckland, New Zealand
Hi,
does somebody can help me with ImageMenu. I want to import some rows with text as a textlinks on each image from the menu. I know that this is possible, but don't know how to do it.
Please for advice and help. (for example see here: http://www.bnt.bg)
Thanks!
I have a strange issue with imageMenu in Safari. When opening a link, apparently the menu in the new page is working as it should but on mouseover it "shrinks" and remains "shrinked". Refreshing the page everything is working again. Maybe a bug in Safari? Firefox does not show the same problem.
Someone has a solution?
Also, I would like the menu element of the active page to stay open (as in the demo). Any help?
Thanks for the help with following links guys!
to The Walrus -
thanks, man
Hello, I pulled the Imagemenu from a Wordpress Template called "sliding door". I pulled the code to adapt it to a Joomla website I am building as my friend loves this imagemenu. I got everything to work but I have a transparent 20-25px right border. This 20-25px shows in every browser from IE 5.5 to FF3 and Opera.
Does anyone have any idea as to how to remove it? I've tried everything!
-DK - my email is dkartuzinski (at)gmail.com.
Thank you very much.
First of all, thank you Samuel for your fine code, it is fantastic!
I've searched the blogs and tried to make it so image 'Five' will open on page load. But ..:-(
Can someone help? :-)
I have a page at http://www.islam.willhelp.com.au/services/trans/dsabry/index.html
The Java script is:
//var myNav = new ImageNav($$('#kwick .kwick'),320,onClick function);
var ImageMenu = new Class({
initialize: function(myElements,options){
options = Object.extend({
onClick: Class.empty,
start: -1,
openWidth: 0,
smallWidth: 0,
itemWidth: 0,
selected: -1,
open: 'Five'
}, options || {});
this.myElements = myElements;
this.options = options;
options.itemWidth = myElements[0].getStyle('width').toInt();
options.smallWidth = Math.round(((options.itemWidth*myElements.length)-options.openWidth)/(myElements.length-1));
var fx = new Fx.Elements(myElements, {wait: false, duration: 400, transition: Fx.Transitions.quadOut});
myElements.each(function(el, i){
el.addEvent('mouseover', function(e){
e = new Event(e).stop();
el.show();
});
el.addEvent('click', function(e){
el.select();
});
el.addEvent('mouseout', function(e){
e = new Event(e).stop();
el.hide();
});
el.show = function(){
var obj = {};
obj[i] = {'width': [el.getStyle('width').toInt(), options.openWidth]};
myElements.each(function(other, j){
if (other != el){
var w = other.getStyle('width').toInt();
if (w != options.smallWidth) obj[j] = {'width': [w, options.smallWidth]};
}
});
fx.start(obj);
};
el.hide = function(){
var obj = {};
if(options.selected == -1){
myElements.each(function(el,i){
obj[i] = {'width': [el.getStyle('width').toInt(), options.itemWidth]};
});
}else{
myElements.each(function(el,i){
if(i != options.selected){
var w = el.getStyle('width').toInt();
if(w != options.smallWidth){obj[i] = {'width': [w, options.smallWidth]}};
}else{
obj[i] = {'width': [el.getStyle('width').toInt(), options.openWidth]};
}
});
}
fx.start(obj);
};
el.select = function(){
if(options.selected == i){options.selected = -1}else{options.selected = i}
options.onClick(options.selected,options.open);
options.open = options.selected;
};
});
if(options.start != -1){
myElements[options.start].show();
myElements[options.start].select();
}
},
reset: function(){
this.options.selected = -1;
this.options.open = -1;
this.myElements.each(function(el, i){
el.hide();
});
}
});
And.... if there is anyone enterprising out there, perhaps you could tell me how to have information appear in a table cell (crude, i know) or a DIV on hover?
i.e. when hovering over slide 5 (far right), information pertinent to that slide would appear int he box to the far right.
Oops! the page is:
http://www.islam.willhelp.com.au/services/trans/dsabry/index.html
Let's try that again!
http://www.islam.willhelp.com.au
/services/trans/dsabry/index.html
Hello. Thank you for this great script. I have a question... for example you choose a first picture. Is there any way to load a "div" tag with mysql query? ;)
Hi Mr. Samuel I would like to ask you some question because someone told me that your code in imagemenu was created by someone and that was really makes me ROFL when someone told that to me and the someone told me that you own http://dubbo.org/ because this blogger used your imagemenu script for his free theme and I can't stop laughing because this someone wants only to pinpoint that the imagemenu wasn't created by you but by this person http://dubbo.org/ and this person told me he contacted this person and whatever stuff he made and http://dubbo.org/ told to him that it was created by http://dubbo.org/ and not you well just want to inform you and also I want to hear you side since I don't know where to contact you
Hi,
Nice script - thanks!
However, I notice that the order of the images does not appear as per the order of the li list markup. Any idea why? It doesn't even do this properly on your own phatfusion site demo. If you can fix this, I'm interested in converting it in to a Wordpress plugin.
Thanks. :-)
thanks!! nice script
xmeele said...
For show array zero change line 73:
if(this.options.open){
for this:
if(this.options.open!=null){
yea now show item zero
Thanks, xmeele - that works perfectly!
For some reason an item only stays open if it is specified via open:0 and the number of the corresponding item. If you use id's it won't stay after you rolled over the menu...
Hello, please I need someone's help. I see the the image menu is supposed to stay open when a link or the picture is clicked so you can see which page you are on. However on my site when I click on the link it simply changes the pages and does not leave the link or the picture open!! What do I have to do to change this or fix this???
Like many others I have tried, tried and tried again to get the image menu to appear open on a specific tab when the page loads whilst preventing the animation from happening (effectively simulating how the menu would work on an ajax based site). I have worked out a solution although I must admit it is not as elegant as I would want from a code point of view.
Basically you need to place this javascript in the header which will change a div from being hidden to being displayed:
function showhide(divid, state)
{
document.getElementById(divid).style.display=state
}
Then the image menu element needs to be styled have a display of "none" and the following javascript placed after the image menu element:
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:250, border:0, open: 4});
});
window.setTimeout('showhide(\'frameImageMenu\', \'block\')', 500);
This javascript opens panel 4 on page load but you don't see the animation because the image menu element remains hidden for the first 500 milliseconds thanks to the setTimeout function.
All that is left to do is to place an absolutely positioned div behind the image menu which is essentially a screen shot of the open menu (how you would want it to appear on pageload). If positioned pixel perfect you will never see when the image menu element appears (in its fully open state).
Creating a div with display:none will cause problems for google when indexing the links on your site. For my use I improved it so that the showhide function is also used to make the image menu element initially hidden (rather than using styling).
Hope this helps people to get the most from the image menu (which is amazing btw)
p.s I hope that someone works out how to hard-code this functionality into the image menu - as I said my solution is more like an ugly hack!
I hate spam, for those of you interested in the topic you can see my final image menu result on TheBigOrchard.com. It could be further improved by pre-loading all of the screen shot images I mentioned in my last post.
my very good friend Patrick was asking me to teach him how to open the links that are used in ImageMenu and I did not know that it was this simple, I will tell him now, thanks!
Hi, great script. I wante to add extra feature to that, but failed (spent several hours with no result).
Is there any way to put some text data, links, etc on the hidden part.
Say, that data stick to the right side and is basically hidden. But when you hover the image it unfold and you can seen the datails.
Thanks a lot.
I was wondering how can i put hotspots (image mappings)on images so i can create subcategories for example in a picture
Hey, many thanks to xmeele with his tip on the 9th May 2008 - to get the first image to stay open by default on loading. That works great but add "open:0," to the function options on the page with your imagemenu on it. See the source on my page to see exactly where to put that...
http://www.collents.eu/begin.php
Here's how that works for me - I also got it to work in conjunction with wlated.com's javascript tabs so you click on the menu images to change the content below, but it's all on the one page.
Post a Comment