Focus Furniture contact form

Overview:

* 3 things to modify:

1. contact.html
2. forms.js
3. update navigation links in index.html

* 1 file to create:

submit.php


Details:

1. contact.html:

add the javascript code in the head function


       
Add this 

"submit.php

add input name/ change the name correspondingly :
for example:

( name = "name" )

2. forms.js

Modify this :

mailHandlerURL:'submit.php',    //change this to whatever the mail handler form name
ownerEmail:'#',  //change this to recipients email

3. index.html

Update links corresponding to contact page, please note, if you didn't change both the link in the index and the contact page, it won't work properly.

4. Create page submit.php

The writing:

Aaaaand done!!!!
What a seemingly simple task but for some small errors it took so long to fix it 

Focus Furniture Trouble Shooting

From the normal template which is interior animated, converted to focusfurniture, there was some problem:

 # Unstable javascript gallery

 Problem:

Images from gallery which is called page_Catalogue, will show different images and thumbnails if we add another page catalogue for example page_Catalogue2, page_Catalogue3 and so on. So if we jumped from #3 to #1 the images on #1 didn't show the proper active big image, and sometimes caption seems to be missing.

 Solution:

 There are 3 big things that need to be customized

 *1. html > Change the number on: page_Catalogue, big_image_gallery,caption, gallery

 *2. style.css >

Add new name for style : .gallery_big_img2 (add corresponding number) .gallery_big_img2 img #caption2 #caption2 li #gallery2 #gallery2 li #gallery2 img

 *3. script.js Add new code : $("#gallery2").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", mouseWheel: true, visible: 3, speed: 600, easing: 'easeOutCirc' }); $('.prev span, .next span').css({opacity:0}) $('.prev, .next').hover(function(){ $(this).find('span').stop().animate({opacity:1}) }, function(){ $(this).find('span').stop().animate({opacity:0}) }) var Img='.'+$(".gallery_big_img2 img#active").attr('class') $(".gallery_big_img2 img").css({opacity:0}); $("#caption2 li").css({opacity:0, display:'none'}); $(".gallery_big_img2 img#active").css({opacity:1}); $("#caption2 li"+Img).css({opacity:1, display:'block'}); $("#caption2 li"+Img).css({opacity:'none'}); $("#gallery2 a").click(function(){ var ImgId = '.'+$(this).attr("href").slice(1); if (ImgId!=Img) { $(Img).stop().animate({opacity:0}, 600, function(){$(this).css({display:'none'})}) $(Img).attr({id:''}); $(ImgId).css({display:'block'}).stop().animate({opacity:1}, 600, function(){$(this).css({opacity:'none'})}); $(ImgId).attr({id:'active'}) } Img=ImgId; return false; })

 ---change number into corresponding number

 IMPROVE PERFORMANCE

 When used as original, the loading time is very slow, this is because they put everything on 1 page. Slice the code in the index.html into corresponding page and have an individual page for example take out all the page_catalogue code into a new sheet and name that sheet into livingroom.html and link it as per usual. This improve the loading page tremendously.