PDA

View Full Version : installing this script...



lilyoungfella
09-02-2008, 06:34 AM
anyone who knows how to install this script?
linkhttp://www.phatfusion.net/imagemenu/index.htm


Is there a 1 2 3 step as to how to set the image menu up edit files and install on server to work with my site?
Also a complete list of all files that are needed to make this work. I downloaded the image menu.zip
when I try to extract the files so I can make modifications, it tells me it cannot open the files...help! :shock:
I have a limited knowledge of core source but could muddle through it all if given a detailed instructions on how to modify, set up and upload to my server...do I need to make a flash file??? do I need to have php database activated on my server???

by the way.. i don't know if this is the right place to post this concern.. my apologies...

codeexploiter
09-02-2008, 08:42 AM
You need to download the script files from the mentioned site as they've mentioned. Earlier may be the downloaded file was corrupt due to which you couldn't open it. I've downloaded it and it works correctly for me


The following is the important section in markup



<div id="imageMenu">
<ul>
<li class="landscapes"><a href="http://www.aaronbirchphotography.com">Landscapes</a></li>
<li class="people"><a href="http://www.aaronbirchphotography.com">People</a></li>
<li class="nature"><a href="http://www.aaronbirchphotography.com">Nature</a></li>
<li class="urban"><a href="http://www.aaronbirchphotography.com">Urban</a></li>
<li class="abstract"><a href="http://www.aaronbirchphotography.com">Abstract</a></li>
</ul>
</div>


It is better if you use the "id" of the parent div element as such. But mostly you may prefer to avoid using the CSS class names used in the above markup as such as it may create confusion when you check your CSS file. So the logic here is for each (assuming that each will point to a different destination) you have to use a different CSS class name. An exmaple is following:



<div id="imageMenu">
<ul>
<li class="one"><a href="http://www.aaronbirchphotography.com">First Item</a></li>
<li class="two"><a href="http://www.aaronbirchphotography.com">Second Item</a></li>
<li class="three"><a href="http://www.aaronbirchphotography.com">Third Item</a></li>
<li class="four"><a href="http://www.aaronbirchphotography.com">Fourth Item</a></li>
<li class="five"><a href="http://www.aaronbirchphotography.com">Fifth Item</a></li>
</ul>
</div>


After that you need to insert the CSS rules for each of the newly used CSS classes in the CSS file: for example:



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

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

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

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

#imageMenu ul li.five a {background: url(images/landscapes.jpg) repeat scroll 0%;width: 310px;}


The last menu item's associated class needs to mention a 'width' also.

After that insert the following code in your script block



window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){
//here you can enter your code that occur when someone click on the menu.
}});
});


Please note that you need to include all the important file inclusions in your page like the way they've done it in the "index.htm" of the zip file.

I've highlighted all the items mentioned above that needs your attention.

Hope this helps.