Accordion Image Menu Plugin
This wordpress plugin is based on this Image menu Mootols plugin. Its allows to create a dynamical menu from your attached images (medium size).
You can see it on the right showing my recent posts.
Features
- Allows to combine pages and categories and apply order to them.
- You can list recent posts.
- Multiple transitions effects included (Elastic, Bounce, Sine, Pow, Quart, Back, etc).
- You can include or not “the title” of the target page.
- Compatible with: Firefox 2,3, IE 6, 7 Safari.
Installation
- Upload “Accordion Image Menu” folder to the ‘/wp-content/plugins/’ directory.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- Customize the menu under Settings/Accordion Image Menu.
Use
You can use the menu everywhere:
- On the sidebars as a Widget.
- On the content using:
- On your theme files using:
Download
accordion-image-menu on wordpress
If you find the plugin usefull you can leave a message or/and make a small donation,
Enjoy!!!
March 3rd, 2009
| Tags: accordion, image menu, jquery, menu, mootol
@Ryan
On the header of your page there is a function that is affecting the menu, I dont know if your theme or other plugin is calling it.
My plugin loads on my page correctly, but unfortunately the sliding feature doesn’t seem to be working. I only have the 2 default plugins installed, and they are not active. When I adjust the setting around in the back the plugin changes on the front end, for example if i change the open and closed dimensions the plugin adjusts accordingly, but when i mouse over other images they do not slide open, only the one that is open by default in the backend. anybody have any suggestions? here is a link to the site. http://www.mymadhatters.com/
thanks, ryan
@Alain
I’m using the Arthemia free theme and can’t get the slider img and the posts thumbnail img to show up at the same time. Is there another custom fields code I could use for the accordion?
@Stef
The images that you upload should be bigger than 300×300 px. In your menu the pink one looks better.
@Alain
My media settings are set at 300px for the medium size. I’ve tried to make the imgs bigger in the posts but it didn’t do anything different.
@Stef
You need to work on yous images size. You can use bigger images on your posts and set the Medium size on your settings/media “300 px” for example. The plugin uses the wordpress medium size images.
My images are showing up small on my testblog and I can’t figure out how to make them fill in the entire box in each area. What am I doing wrong? Please help this is making me crazy!
The pluggin is awesome but when i use it in a post it doesn’t display any animation . I am using wordpress 2.7.1
Very nice plugin! You could just put a demo link plz
Hi. I am excited about using this plug-in but my brain doesn’t seem to get how to make it work.
Take a look at this page:
http://littlegettysburgmusic.com/?p=322
What I would love to do is to just have the title of each song as an ‘image bar’ as opposed to the title, player, buy button, etc. This way I can have more tracks taking up less space.
I have activated the plug-in but hvae no idea how to make this design element come to life.
Here is what my html page for the above referenced link looks like:
Track Title: Walk the Walk
Price: $1200
Walk the Walk
————————————————————————-
Track Title: Cherries in Pairs
Price: $1200
Cherries in Pairs
————————————————————————
Track Title: The Hi-Fi
Price: $1200
The Hi Fi 10
I would really appreciate any help ANYONE might be able to give…Thanks so much!
Well, I figured it out all ready, so no need to reply and all… Bye
Hello there,
I’m not an expert on any of this – pls don’t laugh @ me if I ask somethinh really stupid
– but I would really like to know ‘if and how’ I can manage to change the pictures selected for the accordion menu – Cause most of my posts have more than one pic in them.
And my second question concerns the pages which do not necessarily have pics at all – can I have a pic in the accordion menu for a page withouth having a visual pic in the page itself?
(Hope u don’t mind my questions, but if you do so, please consider them as non existent) Ciao
Hmm.. It does not appear at all.
I tried to set up on a local apache server and i could see one of the menu images.
@ufukerdogmus
You can edit the “imageMenu.css”
.imageMenu a {
…
background:#FFFFFF none no-repeat scroll bottom center;
instead of
background:#FFFFFF none no-repeat scroll center center;
Thanks,
Great plugin, easy to use and implement
Thx a lot!
I have a simple fix I need to do but I can’t find how to since I suck at javascript and have no idea yet about mootools.
I want my images to be closed down to bottom of the image instead of the center. How can I arrange that? At least from which file? I am willing to hack the code if needed
playing around with the css is not the solution since it kills the smooth opening effect
note: obviously, I use it vertically.
Trying to get this accordion to work using the premium arthemia theme and I don’t know where to insert the code to take over my headline area. Any tips?
Your image demo is beautiful and fast. Can you do similar for expandable Page/Link list? wp-dtree variations seem to be dead for wp 2.8.x.
Thanks
Very great plugin
Very useful plugin. Thank you for making it.
@Mr. Mixed Media
Maybe something in the database I can get rid of or something so that it can be as though I installed this for the first time(because I’m pretty sure the uninstall does not remove database entries). Please help
Even version 2.0 isn’t working. I’ve used this before so I know how it works. I created the pages and put the images in but I ended up deleting the pages and creating new ones at some point. Now, no matter what I do, the menu doesn’t appear. Is there a way to start from scratch or something to get this working again?
Version 2.0 released
Any idea why it wouldn’t work when Photojar is installed?
I see it doesn’t RETRIEVE the image well:
Ati ghicit: e Tania Budi!Ati ghicit: e Tania Budi!
If you check the source you will see that there is no image after /cache/ of photojar.
Please help me with this.
Thank you.
@Deniz
If you select categories in your menu it will take the last image attached to the last post under this category.
@alain
How can i attach images to categories ?
@Deniz
Are you attaching images to your post?
Did you try using the widget?
Anyway, next week I’m planing to release a new version that allows multiples menus, vertical or horizontals and fix some bugs and javascript interactions.
Thanks.
http://www.pembegozluk.com
@Deniz
Can you include a link?
i uploaded accordion-image-menu folder to plugins
actived the plugin and checked categories and pages ( also tried with recent posts ) in settings . added echo do_shortcode(’[a_image_menu]‘); in sidebar.php . But it didnt work . What’s wrong with that ?
P.s : i’m using wordpress 2.8.1
I’m running your plugin on a wordpress mu site (multiple blogs). The menu works fine on one site but not another. Any ideas?
Working: http://trusupremekillaz.com/tskgaming/
Not Working: http://trusupremekillaz.com/tskgaming/clan
Hello Alain,
This is a great plugin and it looks great in my blog. However, i verify that the slider that i have in the main page doesn’t work with your plugin activated. Any reason for that? I would love to use both solutions.Help!
Regards
@PC User
That is weird. You don’t need to edit the script, the menu just uses the link of your post or pages automatically.
I’m using the “accordion menu” (aka “switch menu”) which I like very much and I have it on each of my webpages so that the user can go back and forth on the website. The links in the menu’s script are on each of the seperate pages, which causes a problem when I add or delete a webpage. Each time that I do that I have to edit the menu script on each webpage to keep all the links correct.
I’m looking for a script to centralize the links where I can edit them in one place to update them for all pages. Please let me know if there is a way to reprogram this script or if there is another script for the same type of menu that I’m using.
@Rob
Your Theme is overwriting the styles of the accordion menu.
Look in the style.css this two styles:
#sidebar2 ul li{ ... width:100px; } and #sidebar2 a:link, #sidebar2 ul li a:link, #sidebar2 a:visited, #sidebar2 ul li a:visited { ... width:100px; }I am trying to set it up like yours is at the top but it’s giving me everything in squares not a rectangular block like yours are. I go to the settings and It will only allow me to do a 2 digit variable for the pixels in any of the selections. If I try to type in 300px it makes it 30px etc I am using a self hosted version of WP version 2.7.1
@alain
Hi Alain,
Thank you for your reply.
At recent post, i checked all the post.
No menu is shown still after i enter [a_image_menu] in the html context of the post.
When i view the source, there is string of codes shown:
#imageMenu ul {
height: 0px;
width: 300px;
}
#imageMenu ul li a {
height: 100px;
width: 300px;
}
#imageMenu {
height: 0px;
width: 300px;
}
Now, i am wondering, where am I able to state the images that I will be using for each menu?
Thanks,
Aston
@Mikey Jay Morgan
I see the plugin now on your site. But I think you need to set a different “Lines Height when the menu is open ” to make it works.
@aston
I see that I haven’t default values for the plugin so, the first time you install it you need to go to the plugin options page under settings and save your plugin options, for example: check the “recent post”. After that it should works. Let’me know. I’ll fix this bug and I’ll test it on the version 2.8.4.
Thanks
@aston
Pardon me, its Wordpress version 2.8.4.
I can’t seem to get it work on wordpress 2.8.3.
Tried all the three method but nothing is shown.
Any tips?
@Mikey Jay Morgan
In this site I’m using the menu as a widget. Did you try another theme?
Right, I have installed this menu and its displaying the widget in the widgets list, so thats fine, I added the widget to my sidebar and saved it, a-ok so far. I’ve gone into the settings and changed and saved them too. Right… Where the hell is the menu?
Would be nice to get an answer on that.
I have the problem that everything works fine – until I insert a second image into the page. Now the menu shows this image. What I do not intend to do. The only possibility is to delete the second image – not only from the page, but out of the mediathek. Then the first one is chosen for AIM.
The only trick I found is to change the order of uploading. While it takes the last one integrated, this should be the one you want to have inside of your page.
Do I have a better chance to get influence on this?
Not working at all. Did the install, activated the plugin. Nothing. Adjusted the settings, nothing. Tried to figure out what to do with the code snippets under “Use”, nothing. Went looking for detailed install instructions, nothing. Glad I didn’t donate yet.
Great Plugin!
How can i align it to the right, such that it stays in my sidebar?
theveryhungrycook.com
Thanks
Raghu
@Marj Wyatt
Can you please send me the url?
I’ve tried installing this plugin on an ecommerce site with 25 posts leading to product pages. There seems to be some menu height dictated that I cannot quite suss out from the code. I’d like to overcome this because those post images would make the site really look nice.
I tried describing “height” in the style sheet to no avail and, since I am not a Java programmer, glancing at the code didn’t reveal anything obvious.
Scroll bars present the whole menu but destroy the visual effect. Can you help?
This is not working with postwiev plugin..
Hi. This is great plugin, but in my blog i’m using blocks in sidebar. So how can i get in this menus in sidebar?
Can you help?
Hi!
cool plugin and works great! thanks a lot.
I just ran into a small compatibility issue with the “Hybrid” theme from themehybrid.com
For some weird reason the “breadcrumb trail” gets confused as soon as I acitvate the accordion plugin. It happens on “PAGE pages”, there the breadcrumb always pretends you are looking at the latest POST instead, no matter on what page or sub-page you are. It works fine on post pages (single, archive, etc.) though.
Does the plugin change any page-related variables or does anything else that would explain this effect? Would hate to remove the breadcrumbs, and would hate as well to kick out your plugin…
Any hints much appreciated!
Can this be used horizontally as a header menu?
Just had a look at your plugin,
curious to know why there’s jquery javascript and mootools js?
I’ve made a bunch of mootools/wordpress plugins, I highly suggest that you use the wp_register_script(’moocore’,
‘mootools-1.2.1-core.js’,
NULL, ‘1.2.1′);
then:
wp_enqueue_script(’moocore’);
this prevents double loading of the script.
i’m arthemia-premium with this plugin used now.
but active accordion plugin script error happened.
Hi…! This rocks. You rock. Thank you for sharing and helping people out. I send you a virtual beer
What have you done to solve this probkem?
Your menu dont working with opera browser!
I am sure I am missing something simple.. but I am confused as to what (and how) the images are pulled for the menu.
If I make a page and place a medium image it seems to pull it fine. However what if want an image in the menu that is not on the page I want called in the menu?
Somehow you have done it here as the “Accordion Image Menu Plug-in” page has no image yet on the sidebar the accordion menu shows an image with a dog.
How do you setup this plug-in to pull an image that is not on the page it links to?
Hello there,
I am trying to center the text but I get that the “shadows” doesn’t move with the text. Any clue would be very apreciated.
Thanks for this nice plugin!!
javier.
It looks like the theme was at least part of the problem. Atahualpa 3.2 works, 3.3.2 does not.
I have installed your plug in on this site: http://jeffday.timmcnabb.com/
For some reason, it will not “open” – I would welcome your input. I have made this work on another site using the same theme. Right now no other plugins are running.
i’m using this and very nice plugin..thanks
I am stumped. On this site I have 180×250 images http://printing.knowspark.com/ and it is working fine.
This site http://jeffday.timmcnabb.com/ uses 300×200 images, and the silly hting won’t open. I know I am missing something…
I pasted the echo code into the PHP file of my home page template and nothing happened. Do I need to install Moo Tools or the earlier Image Menu plugin that you based this on?
Also, can it be configured to open by sliding horizontally?
If it must open and close vertically, can the height be fixed?
Is there a simple way to propel it, so it changes on its own?
(I’m trying to get it going on a test site, not our old site at the URL I’ve given.)
Thanks for a very promising plugin,
Steve
@Richard, I am also having the same problems
oye, está volao el plugin, ahora mismo lo instalo y en 2 meses haré famoso mi blog loco
verdad que un artista siempre hace diferencia jejeje
Un abrazo desde Cuba!
ydeya
I have found that when I view a post and select the Edit (Edit this Post) link from below the content, that the link too that post’s edit page corrupts and sends me to an alternative (wrong) post. Also my NavXT Breadcrumb (Core) plugin gets confused as well.
This only happens when I have the Accordion Image Menu Plugin activated.
Using WP 2.7.1
Any Ideas?
@Alain
If you are using lightblox – jquery this plugin Flexible lightbox” is compatible.
@Chad
I see a lot of javascrip files on that page included “scriptaculous” and “lightbox” you can try uninstalling others plugins to see what is the interaction.
@Chad
Here’s the error I found..
TypeError: Result of expression ‘this.elements[0]‘ [undefined] is not an object.
Is the prototype framework not included in the plugin install? maybe I need to install that..
@Alain
Thanks – here’s the link. The site is still in progress so I’ve just uploaded some placeholders for images. http://74.220.207.197/~spicyfis/?page_id=284
@Chad
There is javascript errors on the page, please include a link.
Thanks.
I’m excited to get this plugin working. I’m trying to use it to link to my photo albums, I’ve uploaded 3 test pages/photos and they show up using the a-image-menu tag but the script isn’t working to make it elastic. I just sits there and fades the text in and out when I roll-over. Any ideas? Do I have a conflicting script? or am I just doing something stupid
Thanks!
This is a great plugin! I’m not saying to change it, but add some things like: 1. configurable “from your attached images” size small/medium/full 2. add the ability to point to an image in the sites media gallery 3. Link Behaviour – image links to : image, post/page, custom URL.
Thanks
@Sushi Freak
Sure, just edit “.vai_title” on plugins/accordion-image-menu/css/vimageMenu.css.
Thanks.
This plugin is awesome. Is there any way to change the font color when displaying titles?
hi. Thanks for plugin
perfect.
Regards
Just upload the images when you write a post/page using the “add media” button. The plugin use the medium size generated.
Thanks,
Alain
i need help with adjusting the widget. into which folder i must load the pictures.