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.
No comments:
Post a Comment