Image Menu with Jquery

Creating a Smooth Image Menu with Jquery

I have always thought that imagemenu sliding effect is really cool and that it would be nice if it worked with jQuery. Introducing a Mootools image menu ported to Jquery. If you have ever seen the image menu javascript for mootools by phatfusion and liked what you saw well here is a Sliding Image Menu alternative I've come up with using the power of jquery javascript.

Functionality Checklist for our Sliding Image Menu for Jquery.

Here is what we need our Jquery horizontal sliding image menu to do:

  1. Jquery compatible script.
  2. Mootools like sliding effect.
  3. Valid XHTML degrades well.
  4. Lightweight customizable script.
For this Image Menu we will be using jQuery and jquery-easing effects. I ended up adapting two versions of the image menu and will start with the more basic and straightforward one first. For the purposes of helping visualize this demo I am using the same images found in the original Mootools ImageMenu.

Let's take a look at the XHTML, CSS, and JavaScript that makes it all work.

Jquery Image Menu Version 1, View Demo, Download Source.

Jquery ImageMenu

Here is the HTML for just the jquery Image Menu itself:


<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#">Landscapes</a></li>
    <li class="people"><a href="#">People</a></li>
    <li class="nature"><a href="#">Nature</a></li>
    <li class="abstract"><a href="#">Abstract</a></li>
    <li class="urban"><a href="#">Urban</a></li>
  </ul>
</div>


Here is The CSS

.jimgMenu {
	position: relative;
	width: 670px;
	height: 200px;
	overflow: hidden;
	margin: 25px 0px 0px;
}

.jimgMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 200px;
	width: 1340px;
	
	}

.jimgMenu ul li {
	float: left;
}

.jimgMenu ul li a {
	text-indent: -1000px;
	background:#FFFFFF none repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow:hidden;
	width:78px;
	height: 200px;
}

.jimgMenu ul li.landscapes a {
	background: url(images/landscapes.jpg) repeat scroll 0%;
}

.jimgMenu ul li.people a {
	background: url(images/people.jpg) repeat scroll 0%;
}

.jimgMenu ul li.nature a {
	background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
	background: url(images/abstract.jpg) repeat scroll 0%;
}

.jimgMenu ul li.urban a {
	background: url(images/urban.jpg) repeat scroll 0%;
	min-width:310px;
	
}

The JavaScript

In the header section of your HTML file, you'll need to include jQuery and all the plug in files listed. The bare minimum setup look like this:



Finally include the jquery in your page or in an attached file.


This will activate our image menu, just remember we have css controlling most of the image menus style. You can customize the easing type and duration with the jquery easing plugin that we are using to achieve different slide effects.

Jquery Image Menu Version 2, View Demo, Download Source.

Image Menu For jQuery

For this second version I have used kwicks to help with the ImageMenu animation. The advantage to using kwicks with our sliding image menu is the additional functionality that it brings in the form of sticky menu items which will stay open and custom events such as on click actions instead of hover.

The HTML remains the same for this version of jquery Image Menu except for the use of id instead of class.


<div class="jimgMenu">
  <ul>
    <li id="landscapes"><a href="#">Landscapes</a></li>
    <li id="people"><a href="#">People</a></li>
    <li id="nature"><a href="#">Nature</a></li>
    <li id="abstract"><a href="#">Abstract</a></li>
    <li id="urban"><a href="#">Urban</a></li>
  </ul>
</div>


The CSS is adapted slightly for kwicks

.jimgMenu {
	position:relative;
	margin: 0px 0px 0px 50px;
	padding: 0px;
	width:475px;
	height:200px;
	overflow: hidden;
}
.jimgMenu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	display: block;
	height: 200px;
	position: relative;
	}	
.jimgMenu ul li {
	width: 95px;
	float: left;
	display: block;
	overflow: hidden;
}
.jimgMenu ul li a {
	text-indent: -1000px;
	background:#fff repeat scroll 0%;
	border-right: 2px solid #fff;
	cursor:pointer;
	display:block;
	overflow: hidden;
	height: 200px;
}
.jimgMenu ul li#landscapes a {
	background: url(images/landscapes.jpg) repeat scroll 0%; 
}
.jimgMenu ul li#people a {
	background: url(images/people.jpg) repeat scroll 0%;
}

.jimgMenu ul li#nature a {
	background: url(images/nature.jpg) repeat scroll 0%; 
}
.jimgMenu ul li#abstract a {
	background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li#urban a {
	background: url(images/urban.jpg) repeat scroll 0%;
	border-right-style: none;
}

The JavaScript

In the header section of your HTML, you will need to include jQuery and all the files below. The bare minimum setup will look like this:


This will activate our jQuery Sliding Image Menu plug-in. The last step is to include the script in our page by placing this script in your html head or document body.



Enjoy an Image Menu sliding effect for Jquery.

Related Topics

86 Comments Subscribe to this Entries Comment Feed

Sam MT

Good stuff thanks for the help.

Facebook

Nice script, thanks sharing.
I just wonder if it possible to have an other item selected, displaying the current page ?

Dylan Wagstaff MT

Aloha, Thanks
Not sure if I understand exactly what you want to do but you can Use Sticky and Custom Events.

For Example: sticky : true, to have an image stay open or you can add
event : 'click' to make the menu animate on click instead of hover.

The code for the second image menu version with sticky images and on click events instead of hover would look like,

$().ready(function() {
$('.jimgMenu ul').kwicks({max: 310, duration: 300, sticky: true, event: 'click', easing: 'easeOutQuad', complete: 'callback'});
});

Perfect, just what I was looking for thanks!

DigitalBill MT

Thanks for the great tips. I've been wrestling with the original mootools imagemenu, and I was happy to see this jQuery solution as an alternative. But I'm running into some of the same problems with this one...

I find I can get everything to work as long as I stick to five images and keep the ref names the same (i.e. Landscapes, People, Nature, etc.), but as soon as I introduce a 6th -- or in my case, a 6th-7th-8th-9th -- image or reference the image(s) by a different name, everything breaks.

What I'm looking for: Nne (9) images to load, the far left image to be displayed onOpen, the images to slide on rollover and an on click action which calls a URL for each image. I've checked and re-checked spelling and syntax, but I'm lost.

Any thoughts?

Dylan Wagstaff MT

Hi,
To include more images you have to add them to both the css file and to the page list of images. You will also need to adjust the css .jimgMenu width to match how may images are included and make sure that overflow : hidden is not hiding your included images. As long as you use the same id labels within the css and page it will be called.
I cant seem to duplicate your issue. A sample to look at might help but you are able to add more images through adjusting the css and in-page html.

DigitalBill MT

Thanks, Dylan. I've tried that and so far come up empty, but I've worked and re-worked this page and its support files so much now that it's a mess.

I'll go back and start the page from scratch and post the URL of the work-in-progress if I continue to have probs.

Either way, I'll report back on my success/failure.

DigitalBill MT

Baby steps, I guess...

I have my nine 99) images in place, a 1px right border separating them and the slides perform as they should. But I'm still wrestling with an issue where the jimgMenu div is pushing the images to the right 40px, and apparently I have a conflict with .js libraries because I can either get a LightWindow effect to work on a link in a div above the imagemenu OR the imagemenu works, but not both. And it appears to be affected not only by the order of the .css files but by the .js libraries themselves.

I'll post a URL, but can you really tell much without the .css files too? (Ah, yes, Firebug!)

Dylan Wagstaff MT

Good to hear your making progress.
Yes javascript has to be called in the order it is written or else you wind up with undefined variables and functions. Jquery will always conflict with lightbox as it is Mootols based. As an alternative jquery thickbox works great and is actually faster than lightbox. Or you can add a jquery no conflict to the jquery call and script.
Example:
add var $j = jQuery.noConflict(); to top of script than replace all the $ symbols with $j
Long live Firebug :P

DigitalBill MT

Well, "progress" is a relative term...
Please take a look at: where I am right now
The image menu works, but I still haven't been able to figure out the 40px "push" to the right. The min-width on the last image is what I'd like on the first image onOpen, but when I move the property up to the first image it throws things off even more. The HREFs work, but ideally I'd like to try a click-to-open/stick/2nd-click-to-gotoURL option. And of course there's the lightwindow conflict, as this page doesn't reflect any of the changes you suggested (I may try the no-conflict first, then take a look at thickbox if/when I ever get these other issues under control).
In a nut shell: Slides work. 40px shift to the right. Images don't "shuffle" to fill the space. Menu opens with last image open when I'd like it to open with the first image.
Closer, perhaps. Any less frustrated? Negatory!

Dylan Wagstaff MT

Hi Bill,
Your most certainly are getting conflicts by calling scriptaculous and portotype / lightbox and jquery. I didnt realize you were referencing the first version of the script.
For the 40px margin you want to add
left : -40px;
position : relative;
to .jimgMenu ul

I would also change the width in your #imageMenu_jq to 100%
To have the firstimage open add width : 415px to first image .css but keep the min-width on last as well.

This works but the only problem is the script is only looking at the hover state. So all is well as long as the user actually hovers over the first open image but if the other images are hovered over before it will not collapse. This is one of the reasons I developed version 2 of the script with kwicks which has a 3rd animated state and enabled me to not reinvent the wheel so to speak.

DigitalBill MT

OK, I got it working, thanks to your tips. Thanks!

Before I take a look at the second version of the script with kwicks and solve that sticky dilemma, I experimented with the jquery no conflict to avoid the lightwindow issue. But I made these changes to the page:


add var $j = jQuery.noConflict();
$j(document).ready(function () {
// find the elements to be eased and hook the hover event
$j('div.jimgMenu ul li a').hover(function() {
// if the element is currently being animated
if ($j(this).is(':animated')) {
$j(this).stop().animate({width: "415px"}, {duration: 450, easing:"easeOutQuad", complete: "callback"});
} else {
// ease in quickly
$j(this).stop().animate({width: "415px"}, {duration: 400, easing:"easeOutQuad", complete: "callback"});
}
}, function () {
// on hovering out, ease the element out
if ($j(this).is(':animated')) {
$j(this).stop().animate({width: "48px"}, {duration: 400, easing:"easeInOutQuad", complete: "callback"})
} else {
// ease out slowly
$j(this).stop(':animated').animate({width: "48px"}, {duration: 450, easing:"easeInOutQuad", complete: "callback"});
}
});
});

and it didn't work. So I did a find-and-replace in the jquery.js itself ($j for $ throughout) and it still didn't work. (Well, the conflict went away, but the imagemenu stopped working.)

Must be sloppy typing or ADD on my part, eh?

DigitalBill MT

Well, here's the kwicks version:
tester
Looks great in Firefox; breaks in Safari.

Back to the drawing board in search of a fix and a combo of script #1';s ability to open with the first left-hand image displayed and script #2's ability to slide all of the images back equally.

Dylan Wagstaff MT

Looks Great! I think if anything my examples above of a jquery image menu really point out how jQuery is css based. Whether it be a small custom written script or full on plug-in jquery output is based on the css you can throw at it.

If Safari is not agreeing I'd bet it's a simple css fix. Try searching for safai css issues and fixes. Many times mac compatibility requires a small css hack depending on the rest of your layout. Also I'd suggest valid xhtml strict. I've viewed this menu on an iphone and it looked just as good with valid xhtml strict. You could also serve up a page just for safari users. ;P

Your second attempt at jquery no conflict would have worked if I had been carefuller typing. I meant add as include. :P
Change:
add var $j = jQuery.noConflict();
To:
var $j = jQuery.noConflict();

DigitalBill MT

Thanks for the clarification on that no conflict -- I made the change and it works like a charm on both pages!

But why, even the -50px cheat on that div to get the banners to align left in the first page throw things off for me in IE7, suggesting the cheat *isn't* needed for IE. @#$%^*!!

I guess I'm staring at either some browser-specific CSS or choosing which platform(s)/browser(s) to ignore.

Dylan Wagstaff MT

Hi I see what your saying. The 50px margin comes from the margin setting.
.jimgMenu {
height:426px;
left:-50px;
margin:0 0 0 50px;
overflow:hidden;
padding:0;
position:relative;
width:801px;
}
Your left:-50px is not needed, simply change to:
.jimgMenu {
height:426px;
margin:0;
overflow:hidden;
padding:0;
position:relative;
width:801px;
}
Overall it seems like the trouble you ar having is with your css. When you view my example you will see the 50px margin is just for placement on the example page. If you toggle the css on and off with firebug this becomes very obvious. It is also very easy to set css for ie using an if ie conditional css statement. IE conditional CSS is a practical and common work around that gets placed in your pages head and look like:
<!--[if IE]> <style type="text/css">.jimgmenu {example:css;} </style> <![endif]-->

DigitalBill MT

Just wish I could use firebug in Safari or IE to test some changes on-the-fly as I can with FF. :-(

First I'd like to say thank you for this jQuery version. The issue that I'm having is, of course, in IE6. On Menu v.1 the graphic assigned the min-width will default to the preview width of 78px after I have hovered out; leaving an ugly space to the right of "Urban."

Anyone find a work around for this issue? Please advise. Thank you.

Dylan Wagstaff MT

You can try display:inline-block instead of block.

Tim MT

Hello adriang, I would first try inline-block in your style sheet as suggested. If that doesn't work take a look at any possible css in your current page that could be effecting the menu. Most likely a margin or padding element is throwing the block display alignment off.

Rainer MT

Very nice script - thanks a lot!
Is there any way to address active and hover states for the menu?

Rainer MT

Hi, thanl you very much!
Just what I was looking for.
Perfect.

Dan MT

Hi Dylan, I took a look at your version 1 and it's good with one small exception. In order to get the active class included and removed on a quick mouse roll over you should put the .addClass and .removeClass call before stop().
Like so: .addClass("active").stop()

Dylan Wagstaff MT

...nice, included and updated in the Demo. thanks for spotting and pointing that out.

DigitalBill MT

Dylan, just wanted to thank you again for your help with this. V2 is working flawlessly now, due in no small part to your advice and guidance.

The use of kwicks is terrific. I haven't done much experimentation with sticky menus, but on-click events work just fine.

Dylan Wagstaff MT

Hi Bill, Good to hear. You integrated the image menu very nicely into the site, well done.

leo MT

This system works great on my computer but refuses to work when uploaded to host server: http://aercosystems.com/image-menu-2.html . Any thoughts?

Dylan Wagstaff MT

Aloha Leo,
It would appear that the packed js files have become corrupted upon upload as they are throwing errors. Try to upload an unpacked and un-minified version of jquery, kwicks and easing to see if that is the problem.

leo MT

Thanks! The third time was a charm.

leo MT

Is there an option to select which image will be open when the page first loads?

My current code:


$().ready(function() {

$('.jimgMenu ul').kwicks({max: 310, duration: 1500, sticky: true, easing: 'easeOutBounce'});

});

Thanks for a great application!

leo MT

Sorry. I found the option:


$().ready(function() {

$('.jimgMenu ul').kwicks({defaultKwick:2, max: 310, duration: 1500, sticky: true, easing:

'easeOutBounce'});

});

Rainer MT

Oh, this is great... I was just about to ask how to address which kwick will be open. But... is there a way to even address a certain state of this kwick?
For example the actice one?

Dylan Wagstaff MT

Hi Rainer, thanks.

Kwicks should be adding the class="active" to each pic as it is hovered over. From there you should be able to style the active class via css.

Rainer MT

I'm not sure if you got my question wrong or I do not understand your reply correctly...
I would like to open the page with a certain kwick (for example "defaultKwick:2") and in a given state (i.e. active or hover or...). Is tehre a way to address a) which kwick to open and b) in which state it is shown?

Thank you very much in advance...

nemo MT

Using image menu vs 2
Works fine in Dreamweaver CS 4 in all respects when saved and viewed in browser it looks great. When i upload to server and go to link in browser one of the images will not show it is just a blank spot. The blank one is the 7 th image of 9 total. Also all of the images past the 5 th one do not have a white edge like 1-5 images.

Any thoughts?
Thanks

DigitalBill MT

Well, I'm back again. I've enjoyed months of error-free performance, but now that changes have been made to the client's page which require six banners to the right of a left-hand sidebar in place of the previous full-width 9-image setup, I'm getting headaches from IE again.

Page displays and works fine in Firefox and Safari, but all flavors of IE render the slider images as invisible. In other words, they're not there at all.

I've kept the ref files the same, changing only the params regarding location, no. of images, width, etc., but I'm lost on what IE is barfing on.

???

Rob El-Hani MT

Hi,

This is a fantastic scrip and many thanks for sharing..

Can this image menu be positioned vertically rather than as is horizontal? If so, which bit of code needs to be changed.

Many thanks

Facebook

These are amazing! Thank you!

aolee MT

Is it possible that when user click the image, the image stays open? (hover should still works). What I have in mind is, when u hover on the image, kwicks perform normally. Upon clicking a specific image, the image stays open, and i will load something on the body, based on the image clicked? hope you didn't got confused. Thanks.

Hi,

I installed this on a WordPress MU-BuddyPress site.

It works perfectly on FireFox and Chrome, but on Internet Explorer it won't work.

Error: j( ---- ).livequery is not a function.

Any ideas? I haven't been able to fix it.

I solved the "not a function" error code.

Now I isolated to problem to kwicks-1.5.1.js

This works beautifully in FF and Chrome.
But it doesn't work at all on IE.

When I delete kwicks, there are no error codes, and when I return it, IE is giving me the error:

"object doesn't support this property or method"

Hmm...

aolee MT

looks like there's now way for the image to stay open when clicked? in http://www.phatfusion.net/imagemenu/ image stays open but hover still works when mouse-hovered on other images.

Found the solution!

For this to work in IE, you need to open Kiwicks-1.5.1 file...

Look for:
container=$(this);

And replace with this
var container=$(this);

Now it works in IE!

Thanks for sharing the ie fix.

In response to aolee you can implement the sticky function within kwicks as well as a click event to have them stay open like so...

$().ready(function() {
$('.jimgMenu ul').kwicks({
isVertical : true,
sticky : true,
event : 'click'
});
});

In response to Rob El-Hani the above example also shows the use a vertical setup option which will require the css to be adjusted as well.

artzy65 MT

I'm working in Dreamweaver CS4 (Mac) and need help inserting the Jquery Image Menu (version 2) into my document. I have the basic layout (without images) at http://pages.interlog.com/~pagewise/basiclayout.html

I'm currently using the Phatfusion version, and although it works fine in all Mac browsers and in IE 8, Firefox and Safari in WinXP, it breaks in IE 6/7. I'm at least able to center it in XP using conditional style sheets, but cannot edit it furthur; I know some css and js tweaks but not nearly enough.... I'm not a coder.

Here is the test page with images (using Phatfusion version): http://pages.interlog.com/~pagewise/carbonneon5.html

Any suggestions would be greatly appreciated.

aolee MT

hi Dylan,
sorry but your code doesn't work, it stays open when clicked but doesn't ease when hovered. Check out the original from mootools version. when u clicked on an image it will open, but when u try hovering the other images, it will move. http://www.phatfusion.net/imagemenu/

thanks

Hello,

I, too, was having a lot of problems getting this going how I wanted with Mootools. Within 15 minutes, I had this one pretty well laid out how I like it. One question, though - Can I make my first graphic sticky, use mouseover to scroll effects, and make onclick make the graphic that the user clicked on sticky?

Thanks,
Scott

MasterJuh MT

I've tried to have this awesome menu system as a "main categories" menu, and to insert two level submenu inside the different parts. But I didn't manage to get it work: the second level of menu doesn't develop.
If somebody want to check and give advise, he or she is very welcome.
My test page is here.

Thanks for your work

Once switching the menu to be vertical, awkward spacing appears between the images when hovering.

Image height: 200px
The images below cover 50% (100px) (can't figure out how to change that) and the space is another 100px.

Anyone got any idea how to eliminate the spacing? All margins and padding are set to 0.

Cheers.

I set the menu to be vertical and now spacing shows between the images (about 100px) when they slide out to show the active image. (images A,B,C: B and C slide down, leaving a 100px gap between the bottom of A and the top of B)
Also I can't, for the life of me figure out how to adjust the size of the preview image (how much is covered).

Anyone got any ideas?

Cheers.

Dirk MT

Just to settle my own curiosity please...
I used your image menu on a website and it worked 100% in Firefox, Opera and IE7. Than came IE8. It kept pushing my menu to the right & down. When one changed IE8 to compatable mode, it was fine again.
After days of very little sleep & a lot of stress I changed to another menu alltogether.
What was / is the bug between Image Menu & IE8??

luke MT

Dear Scott
Did you ever resolve your issue. I'd like to do the same.
Many Thanks
luke

Has anyone had any success getting "sticky" to work in Internet Explorer?

I'm using Version 2, and have been able to get the items to work flawlessly in Safari and Firefox. But for IE, I can't seem to get "sticky" to work. I've tested in IE8 and IE 6 so far.

Thanks!

Andreah

lia MT

Awesome script! Does anyone know if there is a way to automate the hover effect? That would make a very cool header nav. THANK YOU!

Great menu :) I like it..

I use it in vertical mode and it works grat. To remove 100px gap between lines, you have to put variable "max:" on to your picture height (200px) and that is almost it :)..

$('.jimgMenu ul').kwicks({max: 150, duration: 300, isVertical : true, easing: 'easeOutQuad'});

gm MT

Hello All,
Is there a possibility of autoscroll? Can we give a time limit to autoplay the slides?
Thanks in advance... Pls advice

Thank you very much for the code. But I do have problems with chrome in Linux. I really don't know how to explain what is happenning. It is just caothic. Has anybody else experimented this?

slager MT

How to change opened tab, from the last to the first?

(in demo landskapes)

thanks for help

rlnd MT

Hi! I'd like to use the sticky function in version#1. How is it possible?
Thank you in advance.

Hi, i want to erase 2 sections from the original code but if i do that i make a mess with the code and the menu acts funny, can you help me please?

mikeg MT

How can i have the active item stay open after click and site load? Thought it'll will be possible with sticky but this would only be enable this for one specific tab.


Thanks for your great work, it's quite simple to add and modify.


Kind regards
Mike

Is there any way to have the slide out images have multiple links within them, imagemap like (for a ghetto comparison)

vujč MT

and sorry for my language and mistakes :)

vujč MT

why doesnt work this image menu with/in wordpress?

usugarbage MT

I wanted a stick'ied version of #1 as well. This is what I've came up with.


$(document).ready(function ()
{
// find the elements to be eased and hook the hover event
$('.jimgMenu ul li a').hover(Hovered, Unhovered);

// handle the click and bypass hover for the clicked element
$('.jimgMenu ul li a').click(function ()
{
// reset
$(this).parent("li").siblings().children("a.unbound").stop().animate({ width: "78px" }, { duration: 350, easing: "easeInOutQuad" })
$(this).parent("li").siblings().children("a.unbound").hover(Hovered, Unhovered);

// turn off my leave
$(this).addClass("unbound").unbind('mouseenter').unbind('mouseleave')
});

});

function Hovered()
{
// if the element is currently being animated (to a easeOut)...
if ($(this).is(':animated'))
{
$(this).stop().animate({ width: "310px" }, { duration: 450, easing: "easeOutQuad" });
} else
{
// ease in quickly
$(this).stop().animate({ width: "310px" }, { duration: 400, easing: "easeOutQuad" });
}
}

function Unhovered()
{
// on hovering out, ease the element out
if ($(this).is(':animated'))
{
$(this).stop().animate({ width: "78px" }, { duration: 400, easing: "easeInOutQuad" })
} else
{
// ease out slowly
$(this).stop('animated:').animate({ width: "78px" }, { duration: 450, easing: "easeInOutQuad" });
}
}

db4l MT

i think this is a lovely tutorial / example. i am curious though how to include an image swap on a mouseover / hover on the 5 source images defined in the CSS and how that would mesh with the existing javascipt.

please forgive my ignorance...this is day two of forcing myself to learn web design. many thanks for any help.

Dylan Wagstaff MT

Very slick sticky usugarbage. Thank you for sharing

pmz MT

Hi,
great stuff but is there an option to change this to show for eg. first photograph on the left as big one and others which are on the right as thumbs and when You mouseover second image (thumbed) it will slide and cover the image on his left. So change the direction of sliding/hiding images? I hope You understood me.

Ritchie MT

Thx4 this Awesome script!
I want it vertical, but what are the steps to do that?
In firefox/firebug its working and putting it in the server not.
Please help.

Ritchie

sho MT

Thanks for making the sliding menu available. I believe I have the basic functions working. However, I am new to this and am unable to figure out how to place my own images into the frame work. Any assistance would be greatly appreciated.

Thanks

card MT

Hi
Pls can i get some help i want to change the picture size i need the width: 1000px and height: 200px can someone help me

Robin MT

Hi,

I integrate version 2 of this jquery on a wordpress template. The script by self works without any problem, but I got trouble with other jquery scripts who I have installed over the plugins.

I try to embed the FancyBox (http://fancybox.net), but with the installed imagemenu it doesn't work. Same with some other query plugins.

If I load another template in WP without any code around imagemenu, the plugins work absolutely fine.

I spend now several hours to fix it, but I found no solutions.

Anyone an Idea what I can do??? I also try to fix the problem with the noConflict part. No way :-(

Robin MT

Hi,

I integrate version 2 of this jquery on a wordpress template. The script by self works without any problem, but I got trouble with other jquery scripts who I have installed over the plugins.

I try to embed the FancyBox (http://fancybox.net), but with the installed imagemenu it doesn't work. Same with some other query plugins.

If I load another template in WP without any code around imagemenu, the plugins work absolutely fine.

I spend now several hours to fix it, but I found no solutions.

Anyone an Idea what I can do??? I also try to fix the problem with the noConflict part. No way :-(

Jay MT

Hi...
Is it Possible that Sliding Works in Reverse Order..
Means Floats in Left direction.

I can not put on my website. He's making many mistakes, but I did and redid the procedure several times the way it was passed and does not work at all. Please, Help me!

For anybody who's trying to get this great script working on Mootools 1.3 be sure to check updated version by Arian here https://github.com/arian/ImageMenu
There were some major changes with new version of Mootools so sliding wont work fine without this updated jscript.

PeterU MT

Hi
Is there a way to adjust the size of the inactive slie?

I mean when you hover over a slide, that becomes bigger and the rest smaller. I would like to have the one i hover upon even bigger, and the rest even smaller. Is there a way to do this?

PeterU MT

Hi
Is there a way to adjust the size of the inactive slie?

I mean when you hover over a slide, that becomes bigger and the rest smaller. I would like to have the one i hover upon even bigger, and the rest even smaller. Is there a way to do this?

PeterU MT

nevermind, I got it

jastech29 MT

Great tutorial! I got this working but would now like to add submenus to Version 1. Do you have another tutorial that does this?

rafia MT

Great tutorial,it works for me.currently image become bigger in right side,i want it to left..How can i do it?

rachel xu MT

Great post!
My images are 400x300, so the images are shown partially except the very right one, which i've changed the min width to 400.
Is there a way to adjust the width of the images that are hidden by default? Thanks!

i would like to ask if this can be used commercially? because our Head manager for marketing liked this kind of menu slider for a new website for our company and since we would have different branch of sites and want to link them in one page for easier navigation.

Posting Comment...

Leave a comment...

Tweet

what will you say?

Sponsors

hawaii web design demo demo