• Google Chrome
• Safari
• Opera
• Mozilla Firefox
• Internet Explorer 9
• Internet Explorer 8

Guide

How to change images from “Gallery” Section
First of all, choose the image you want to put in the “Gallery ” section. Now, go to “images” folder. Then, double click on the “small” folder. Remember that in the “small” folder are only the images that will be shown in “Gallery” section. Then, paste your image there. Edit the HTML file with notepad or which program you want. In case that you want your picture to be the first, replace “img src=”images/small/1.jpg” alt=”image1” ” with “img src=”images/small/your-picture-name.jpg” alt=”image1” ” and so on. Your-picture-name is the name of your photo that can be found in images/small folder.
How to move the menu in another place
First of all, the menu is only the bar which is shown in the top.
All you have to do is to go to css folder and edit “style.css” with notepad. Replace the left position of the ”.menu” category as you want. However, my advice is to let the value in procents.
Moving the menu content
After you moved the menu, you need to move the content that is shown at every click. To do this you need to go to css folder and then to edit style.css file. Find ”.container”. After this, replace the left and top values as you want. However, the job isn’t done. Here it comes the tricky part. Go to “js” folder and then edit the javascript file called “slices.js”. Go to the bottom of the file and find “openItem = function(pos, speed, easing)”. Below it there are the values you need to modify in order to tell the slices where to go. You need to modify the “top” and “left” values.
I called “distance” the variable used to calculate the width of the window. So, these need to be replaced: “top: $this needs to be replaced -> $$ 170 $$ + 100 * Math.floor(i/4) and left: $this needs to be replaced -> $$ distance/2.5 $$ + 100 * Math.floor(i%4). Make sure that the top and left values I highlighted with ”<<this needs to be replaced >>” are the same with the ones of the ”.container” from “style.css”.
However, we are not ready yet. You need to modify the values for the functions called “disperse” and “initPattern”. Go to “slices.js” and you will find them in the top of the file. These two functions tell to the slices where to go when buttons are pressed. Replace what I highlighted : t = Math.floor(Math.random()* 50) + ^{^ this needs to be replaced -> ^} 1 ^{^, l=Math.floor(Math.random()* 294) + ^} this needs to be replaced -> ^{^ (distance/2.5) ^}. These values are the position of the slices. Replace them with the same top and left values from “style.css” of ”.menu” so that the slices will go behind the menu.
So, for initPattern function simply replace the (screenwidth/2.5) with the left value of the ”.menu” from “style.css”. Instead of (screenwidth/2.5) it will be (20/100 *screenwidth) if the left value of ”.menu” is 20%. Do the same with the disperse function.
This is all. Even though you think that it takes a lot of time to do all of these, you will see how easy it is. It takes around 5 minutes to do all these. However, if you face problems or if you need further instructions,e-mail me at [email protected]. Feel free to tell me anything you want and I will do everything for you.