I posted a site I'm doing with the default Atahualpa header image(s) replaced by a 'sliding image menu' and several people have asked how it was done. To see what I'm talking about see http://www.whiteravencenter.org

The 'sliding door image' effect is described at http://www.phatfusion.net/imagemenu/ along with the files my solution was originally developed from. Also, Wayne Connor used this technique in another Wordpress theme -http://mac-host.com/slidingdoor/ and I learned some more from his support forum, especially http://www.mac-host.com/support/view...php?f=10&t=124

How I used it in Atahualpa

First, you need to obtain the image menu HTML, CSS, and image directory, plus the mootools.js file and load them into your .../themes/atahualpa/ directory in a folder imagemenu/ You can get these from the sites mentioned above, or I have a zipped file that contains a complete imagemenu/ directory similar to what I'm using - you can download at http://highsierradesign.com/library/imagemenu.zip
It's password protected - use: username: monami and password: 4monami
Just unzip and install the folder under altahualpa/ - the imagemenu/images/ directory contains the initial images I used - which you will replace with your own...

Now for Atahualpa itself -

To establish links to the imagemenu specific CSS and mootools, use the Atahualpa administration, go to ATO->Add HTML/CSS Inserts->HTML Inserts: Header and add:

<link rel="stylesheet" type="text/css" media="screen" href="http://www.yourdomain.com/wp-content/themes/atahualpa/imagemenu/imageMenu.css">
<script type="text/javascript" src="http://www.yourdomain.com/wp-content/themes/atahualpa/imagemenu//mootools.js"></script>
<script type="text/javascript" src="http://www.yourdomain.com//wp-content/themes/atahualpa/imagemenu/imageMenu.js"></script>

[be sure to replace 'yourdomain' with, well, your domain!]


Then, to de-activate the default %image and replace it with the imagemenu, go to ATO->Style & edit HEADER AREA->Configure Header Area and replace the current header specification with:

%logo <div id="imageMenu">
<ul>
<!-- THESE ARE THE LINKS YOU GO TO WHEN YOU CLICK ON A SLIDING DOOR IMAGE-->
<!-- change the href to look like this: <a href="yourlink.com">     -->
<li class="bk1"><a href="http://www.yourdomain.com/yourpage.html">Methods</a></li>
<li class="bk2"><a href="<?php bloginfo('url'); ?>/?cat=2">Services</a></li>
<li class="bk3"><a href="<?php bloginfo('url'); ?>/?cat=1">Workshops</a></li>
<li class="bk4"><a href="<?php bloginfo('url'); ?>/?cat=2">Testimonials</a></li>
<li class="bk5"><a href="<?php bloginfo('url'); ?>/?cat=2">Gallery</a></li>
</ul>
</div>
		
<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:275, border:2, onOpen:function(e,i){location=(e);}});
			});
</script>

This will place the %logo at the top of the page followed by the sliding door imagemenu, using the images named in each <li... statement and clicking on that image when it expands will take the user to the link specified. Notice you can hard-code the links, or align them with categories, etc. You can use more or less sliding panels as you wish. The CSS in ...atahualpa/imagemenu/imageMenu.css controls the formatting of the image menu - modify as appropriate.

Finally, to finish cleaning up the header, set:

Show Blog Title? No
-and-
Show Blog Tagline? No

That's it - easier to do than describe. It could be done differently, like integrating the imagemenu images in the Atahualpa img/ directory or integrating the imageMenu.css directly into Atahualpa so it could be edited with the Wordpress editor, etc., but for now, I like having all the imagemenu stuff separate and in one place, making it easier to upgrade. Note that none of the core Atahualpa files have been altered manually, so these changes should survive updates automatically.

Hope this makes sense - If anyone has trouble getting this to work - drop me an email.

Jack

Hello there,

Just throwing a quick note in here to say THANK YOU for taking your time and sharing this. I'm sure you'll have a host of questions headed your way soon.

One initial question from a non-developer guy who's just done some reading - did you encounter any mootools/jquery issues in implementing this? I only ask this as I've noticed that can be an issue in some instances (apparently Featured Content Gallery).

Regards,

Eddie

Originally Posted by tiber

Hello there,

Just throwing a quick note in here to say THANK YOU for taking your time and sharing this. I'm sure you'll have a host of questions headed your way soon.

One initial question from a non-developer guy who's just done some reading - did you encounter any mootools/jquery issues in implementing this? I only ask this as I've noticed that can be an issue in some instances (apparently Featured Content Gallery).

Regards,

Eddie

I haven't seen any problems using mootools/jquery, but I'm not using Featured Content Gallery. If I understand Flynn's 3.4.3 TO DO list (http://forum.bytesforall.com/showthr...light=mootools), there is an issue with the placement of jquery and initiation of mootools that he intends to address in the next release, but I haven't seen a problem with the placement I described in my earlier post. I hope this is not a serious problem, because there are some really interesting things that can be done with mootools.

Jack

Wow , does being promoted to 'sticky' mean I've arrived?

On the topic of jquery conflicts, I discovered a wonderful (and current) discourse on using jquery in Wordpress - http://digwp.com/2009/06/including-j...the-right-way/

The author makes some thoughtful and useful points, and some of the comments are useful as well. Now I have to go back and look at my work and see how many copies of jquery are getting loaded with my pages, and how to avoid conflicts. I think it was just dumb luck I avoided problems with the header modification described above.

Jack

Thank you very much for a very useful post. I saw the sliding door header first on the "Sliding Door" wordpress theme, and was wondering how I could implement it on my blog. After reading your forum post yesterday, I tested it on the blog on my local machine. It was wonderful. Now, I have implemented it on my blog online. Please see the sliding door category header at Myanmar Today website.

Very nice implementation and a beautiful site! Glad it worked out for you.

Jack

Jack,

Very Kool! I am new and been working on this less than a week. Really need a killer header, any thoughts? What I do is very competitive here in Atlanta.

Thanks.

http://alliantdatatel.com

Michael
770.441.9999 x307

For anyone who tries this sliding menu trick, I have a warning - this feature uses the mootools library and if you later use another feature or plugin that also uses mootool, you may wind up with two copies and they seriously get in each other's hair. In the Plugins & Atahualpa part of this forum, I describe just such an experience - and a solution. See http://forum.bytesforall.com/showthr...2850#post12850.

In my original post above, I add some HTML to the Atahualpa header:

<link rel="stylesheet" type="text/css" media="screen" href="http://www.yourdomain.com/
wp-content/themes/atahualpa/imagemenu/imageMenu.css">
<script type="text/javascript" src="http:/www.yourdomain.com/
wp-content/themes/atahualpa/imagemenu/mootools.js"></script>
<script type="text/javascript" src="http:/www.yourdomain.com//
wp-content/themes/atahualpa/imagemenu/imageMenu.js"></script>

The second statement there loads the mootools library used by the sliding door menu. The new gallery WP plugin I added later also used mootools, but a newer version and an additional library as well, so I changed the lines above to:

<link rel="stylesheet" type="text/css" media="screen" href="http://www.highsierradesign.com/testsite/whiteravencenter/wp-content/themes/atahualpa342/imagemenu/imageMenu.css">
<script type='text/javascript' src='http://www.highsierradesign.com/testsite/whiteravencenter/wp-content/plugins/superslider-show/js/mootools-1.2.3-core-yc.js?ver=1.2.3'></script>
<script type='text/javascript' src='http://www.highsierradesign.com/testsite/whiteravencenter/wp-content/plugins/superslider-show/js/mootools-1.2.3.1-more.js?ver=1.2.3'></script>
<script type="text/javascript" src="http://www.highsierradesign.com/testsite/whiteravencenter/wp-content/themes/atahualpa342/imagemenu/imageMenu.js"></script>

This works for both the sliding menu and my new gallery plugin - which fortunately has an option to prevent it from loading the same libraries itself. Other mootool using plugins may have to be modified manually to disable loading another copy.

Jack

Hi Jack

I have just tried to download this from you thread many times but it does not allow me !!??

"you can download at http://highsierradesign.com/library/imagemenu.zip
It's password protected - use: username: monami and password: 4monami "

Did you change the password and username?

Regards
Ray

Strange... I just clicked on the link in your message and used the user name and password I provided -- it worked fine. I'm on a different machine, different location and ISP that the one used when I set this up, so I don't know what to suggest. How is it failing to work? Does it ask for the log in information?

If you still can't make it work I can zip the files and email them to you but at the moment I'm on a very slow dial-up connection - I'll be back home to a better setup in a few days.

Jack

I just tried it and it downloaded fine.

Very odd indeed tried Firefox many times...just tried Google Chrome and it allowed me to download..

I have uploaded the file but I get an error of "Stylesheet is missing" when I know I uploaded it .I am using Atahualpa 3.4.1 version.



Now for Atahualpa itself -

Plus I cannot find this below on the theme to add... <link rel="stylesheet" ty etc

To establish links to the imagemenu specific CSS and mootools, use the Atahualpa administration, go to ATO->Add HTML/CSS Inserts->HTML Inserts: Header and add:


<link rel="stylesheet" type="text/css" media="screen" href="http://www.yourdomain.com/
wp-content/themes/atahualpa/imagemenu/imageMenu.css">
<script type="text/javascript" src="http://www.yourdomain.com/
wp-content/themes/atahualpa/imagemenu//mootools.js"></script>
<script type="text/javascript" src="http://www.yourdomain.com//
wp-content/themes/atahualpa/imagemenu/imageMenu.js"></script>

Has anyone else had this issue??

Sorry you're having problems getting this to work. I'm not sure what the issue is with missing stylesheet -- please note that the file I made available simply has the bits and pieces you need - each of which needs to be loaded and or inserted into Atahualpa appropriately according to my description here.

You asked:

Plus I cannot find this below on the theme to add... <link rel="stylesheet" ty etc

To establish links to the imagemenu specific CSS and mootools, use the Atahualpa administration, go to ATO->Add HTML/CSS Inserts->HTML Inserts: Header and add:

This is a normal feature and location in the Atahualpa theme -- I'm using 3.4.2 but 3.4.1 should be identical:

On the Wordpress Administration page, select Appearance, then Atahualpa Theme Options. Under the category Various Content Items select Add HTML/CSS Inserts. The first item at the top of that page is HTML Inserts: Header. do a cut and paste of the stylesheet information either from the unzipped file downloaded from my site or from the instructions in my first post in this thread.

Jack

I haven't tried this within Atahualpa yet, but it might be worth looking at the Carl Camera's CSS Photo Shuffler at http://iamacamera.org/default.aspx?id=80

Creative Commons Attribution licensed, and doesn't require any external libraries. Does a nice job of fading from image to image rather than an abrupt switch.

Nice application of CSS - nice photo effects. Perhaps some of these photo effects could be applied to the Atahualpa rotating header images?

The sliding door menu trick described in this thread was meant to be more interactive, allowing the visitor to actively chose a navigation link. I think that more can be done with it, like using the opened panels to describe the destination, but haven't had time to play with it. Since the site I first used this on went live it's gotten good reviews.

Jack

I wonder if this can be done by keeping the logo area as is and only changing the header image?

Actually, that's what I did here -- the sliding door menu replaces the Atahualpa rotating headers. The logo area remains just as Atahualpa has it implemented, with all the same controls available.

Haven't had time, but I want to try to overlay my sliding door menu on top of the logo -- sort of embed it within the logo area. In the site I used this for, the logo image is pretty sparse with room for the menu images. see the current implementation here: http://www.whiteravencenter.org/

Jack

Anyone got a hint on how can one modify this for sliding vertically and implementing in other parts of a page? Or is there something similar that does this?

Oh... it seems like there is a CSS rotation property. gonna give it a try.

These sliding menus are all based on clever use of CSS, and absolutely everything you could ever learn about CSS can be found somewhere in Stu Nicholl's website - http://www.cssplay.co.uk/. When it comes to doing anything menus in CSS, check out the pages of examples at http://www.cssplay.co.uk/menus/!!

Jack

Very useful link. Thank you! now CSS play time!

Have a ball... his stuff is amazing.

I really want to learn more about making WP plugins to use some of these techniques. Atahualpa really helps in that you can safely insert custom CSS, but some of these things would make fantastic widgets.

Jack

Originally Posted by fencepost

I haven't tried this within Atahualpa yet

If you do, will you let us know how it goes, please?

Wow that look great!

BUT, I cant get it right... on my site it looks like this.. http://wptest.frodem.no/ all the shortcuts / links are on the left side and no img's.. what have I done wrong?

mrStark

Problem solved

My atahualpa folder had the name : atahualpa344 (<-- the files did NOT have 344) Added 344 to all the files in the Add HTML/CSS Inserts->HTML Inserts: Header and add

Its ok now, just changing img's and urls now

Glad to hear that's all it was -- I'm very busy today but will take a closer look this evening (US West coast time). I may have a few improvements in the technique to suggest.

Jack

This was my bad

I working on this now, finding me new imgs and fixing the urls. Thanks for great tool.

Here in cold Norway, its 19.05 at night

FM