Mentions Légales
$(function() {
//the loading image
var $loader = $('#st_loading');
//the ul element
var $list = $('#st_nav');
//the current image being shown
var $currImage = $('#st_main').children('img:first');
//let's load the current image
//and just then display the navigation menu
$(window).load(function(){
//slide out the menu
setTimeout(function(){
$('ul.st_navigation').delay(2700).animate({'left':'30%'},1800);
$list.find('#folded.st_arrow_down').each(function(){
var $this = $(this);
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current');
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.delay(3700).fadeIn(100).animate({'right':'0'},2200);
$('#cont_st_hide').delay(4150).fadeIn(600);
});
},
1000);
}).attr('src',$currImage.attr('src'));
//calculates the width of the div element
//where the thumbs are going to be displayed
buildThumbs();
function buildThumbs(){
$list.children('li.album').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * $(window).height() * 0.59;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
$list.children('li.album_csb').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * $(window).height() * 0.26;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollablecsb($thumbs_wrapper,$thumbs);
});
$list.children('li.album_fsb').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * $(window).height() * 0.26;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollablefsb($thumbs_wrapper,$thumbs);
});
$list.children('li.album_cpie').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * $(window).height() * 0.29;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollablecpie($thumbs_wrapper,$thumbs);
});
$list.children('li.album_fpie').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * $(window).height() * 0.29;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollablefpie($thumbs_wrapper,$thumbs);
});
$list.children('li.album_capli').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * $(window).height() * 0.4;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollablecapli($thumbs_wrapper,$thumbs);
});
}
//clicking on the menu items (up and down arrow)
//makes the thumbs div appear, and hides the current
//opened menu (if any)
$list.find('.st_arrow_down').live('click',function(){
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current');
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.delay(850).fadeIn(100).animate({'right':'0'},900);
$('#cont_st_hide').delay(850).fadeIn(300);
});
$list.find('.st_arrow_up').live('click',function(){
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
//clicking on a thumb, replaces the large image
$list.find('.st_thumbs a img').bind('click').bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.96'});
});
$('#st_hide').live('click',function(){
hideThumbs()
$('#cont_st_hide').fadeOut(300);
});
//function to hide the current opened menu
function hideThumbs(){
var fadeSpeed2=200;
$list.find('li.current')
.animate({'opacity':'1'},50,function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.fadeOut(700)
.delay(850)
.animate({'right':'100%'},50)
.andSelf()
.find('.st_link span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}
//makes the thumbs div scrollable
//on mouse move the div scrolls automatically
function makeScrollable($outer, $inner){
//Get menu width
var divWidth = $(window).width();
//Remove scrollbars
$outer.css({
overflow: 'hidden'
});
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = $(window).height() * 46 * 0.45; // 46=44+2.... para pantallas cuadradas
var left = ((e.pageX - divWidth * 0.1) * (containerWidth)) / (divWidth * 0.9);
$outer.scrollLeft(left);
});
}
function makeScrollablecsb($outer, $inner){
//Get menu width
var divWidth = $(window).width();
//Remove scrollbars
$outer.css({
overflow: 'hidden'
});
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = $(window).height() * 27 * 0.26; // 27=24+3.... para pantallas cuadradas
var left = ((e.pageX - divWidth * 0.2) * (containerWidth)) / (divWidth);
$outer.scrollLeft(left);
});
}
function makeScrollablecpie($outer, $inner){
//Get menu width
var divWidth = $(window).width();
//Remove scrollbars
$outer.css({
overflow: 'hidden'
});
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = $(window).height() * 16 * 0.26; // 17=14+3.... para pantallas cuadradas
var left = ((e.pageX - divWidth * 0.3) * (containerWidth)) / (divWidth);
$outer.scrollLeft(left);
});
}
function makeScrollablecapli($outer, $inner){
//Get menu width
var divWidth = $(window).width();
//Remove scrollbars
$outer.css({
overflow: 'hidden'
});
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = $(window).height() * 5 * 0.26;
var left = ((e.pageX - divWidth * 0.2) * (containerWidth)) / (divWidth);
$outer.scrollLeft(left);
});
}
function makeScrollablefsb($outer, $inner){
//Get menu width
var divWidth = $(window).width();
//Remove scrollbars
$outer.css({
overflow: 'hidden'
});
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = $(window).height() * 40 * 0.26;
var left = ((e.pageX - divWidth * 0.2) * (containerWidth)) / (divWidth);
$outer.scrollLeft(left);
});
}
function makeScrollablefpie($outer, $inner){
//Get menu width
var divWidth = $(window).width();
//Remove scrollbars
$outer.css({
overflow: 'hidden'
});
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = $(window).height() * 10 * 0.26;
var left = ((e.pageX - divWidth * 0.32) * (containerWidth)) / (divWidth);
$outer.scrollLeft(left);
});
}
});