// SLIDING FUNCTIONS
jQuery(function( $ ){
/**
* Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
* @see http://www.freewebs.com/flesler/jQuery.ScrollTo/
* You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll.
*/
var target = $('#slider').get(0);//the scrolled div
/**
* restart the scroll position to ( 0, 0 ) (Firefox doesn't reset it)
* could use $(target).scrollTo( 0, {axis:'xy'));
* but this needs to be quick(synchronous), to reset before $.localScroll.hash() begins
*/
target.scrollLeft = target.scrollTop = 0;
//scroll initially if there's a hash (#something) in the url
$.localScroll.hash({
target: target, //could be a selector or a jQuery object too.
axis:'xy',//the default is 'y'
queue:true,
duration:1500
});
var $last = $([]);//save the last link
/**
* NOTE: In the former version of the demo, I called $('#navigation').localScroll()
* Now I want to also affect the >> and << links, so I'll use $.localScroll() instead
*/
$.localScroll({
target: target, //could be a selector or a jQuery object too.
axis:'xy',//the default is 'y'
queue:true,
duration:1200,
hash:false,
onBefore:function( e, anchor, $target ){//'this' is the clicked link
this.blur();//remove the awful outline
}
});
//by default, the scroll is only done vertically ('y'), change it to both.
$.scrollTo.defaults.axis = 'xy';
//this one is important, many browsers don't reset scroll on refreshes
$('div#overlay').scrollTo( 0 );//reset all scrollable panes to (0,0)
$.scrollTo( 0 );//reset the screen to (0,0)
//Target examples bindings
var $paneTarget = $('#overlay');
$('#content_home').click(function(){
$paneTarget.stop().scrollTo( '0', 1000, {
onAfter:function(){
$("#gallery").hide();
}
});
});
$('h1 a').click(function(){
$paneTarget.stop().scrollTo( '0', 1000, {
onAfter:function(){
$("#gallery").hide();
}
});
});
$('#content_animals').click(function(){
$paneTarget.stop().scrollTo( '495px', 1000, {
onAfter:function(){
$("#gallery").hide();
}
});
});
$('#content_ticket').click(function(){
$paneTarget.stop().scrollTo( '990px', 1000, {
onAfter:function(){
$("#gallery").hide();
}
});
});
$('#content_gallery').click(function(){
$paneTarget.stop().scrollTo( '1485px', 1000, {
onAfter:function(){
$("#gallery").show();
}
});
});
$('#content_events').click(function(){
$paneTarget.stop().scrollTo( '1980px', 1000, {
onAfter:function(){
$("#gallery").hide();
}
});
});
$('#content_contact').click(function(){
$paneTarget.stop().scrollTo( '2475px', 1000, {
onAfter:function(){
$("#gallery").hide();
}
});
});
// Controls the full screen mode
$("a.fullsize").click(function(){
$("div#overlay").slideToggle("fast");
$(this).toggleClass("active");
return false;
});
$('.clearme').example(function() {
return $(this).attr('title');
});
/**
* HIDE THE NAV UNTIL THE PAGE HAS FULLY LOADED
*
*/
$("ul.navigation").show();
/**
* NAVIGATION STUFF
*
*/
$("ul.navigation li a").css({ opacity: 0.4 });
$("ul.navigation li:first").addClass("active").children().css({ opacity: 1, marginTop: "74px"});
$("ul.navigation li").click(
function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
$(this).siblings().children().animate({ opacity: 0.4, marginTop: "78px"}, 100 );
}
);
$("ul.navigation li").click(
function(){
if($(this).hasClass("gallery")){
$("p.fullsize_link").animate({ height: "0"}, 240 );
}else{
$("p.fullsize_link").animate({ height: "24px"}, 240 );
}
}
);
$("ul.navigation li a").hover(
function(){
if($(this).parent().hasClass("active")){
}else{
$(this).animate({ opacity: 1, marginTop: "74px"}, 100 );
}
},
function(){
if($(this).parent().hasClass("active")){
}else{
$(this).animate({ opacity: 0.4, marginTop: "78px"}, 100 );
}
}
);
var myGallerysrc = 'flash/gallery.swf';
$('#gallery').flash(
{ src: myGallerysrc,
width: 746,
height: 495,
wmode: 'transparent',
allowfullscreen: 'true'},
{ update: false }
);
var mysrc = 'flash/sparks.swf';
$('div#header h1').after('');
$('div#header h1').after('');
$('#sparks').flash(
{ src: mysrc,
width: 200,
height: 120,
wmode: 'transparent'},
{ update: false }
);
$("#sparks").css({ left: "180px", width: "100px" });
$("h1 a").click(
function(){
$("#sparks").css({ left: "180px", width: "100px" });
$("ul.navigation li.home").siblings().removeClass("active");
$("ul.navigation li.home").addClass("active");
$("ul.navigation li.home").siblings().children().animate({ opacity: 0.4, marginTop: "78px"}, 100 );
$("ul.navigation li.home a").animate({ opacity: 1, marginTop: "74px"}, 100 );
}
);
$("ul.navigation li.home a").click(
function(){
$("#sparks").css({ left: "185px", width: "65px" });
}
);
$("ul.navigation li.animals a").click(
function(){
$("#sparks").css({ left: "265px", width: "125px" });
}
);
$("ul.navigation li.ticket a").click(
function(){
$("#sparks").css({ left: "390px", width: "80px" });
}
);
$("ul.navigation li.gallery a").click(
function(){
$("#sparks").css({ left: "490px", width: "72px" });
}
);
$("ul.navigation li.events a").click(
function(){
$("#sparks").css({ left: "570px", width: "65px" });
}
);
$("ul.navigation li.contact a").click(
function(){
$("#sparks").css({ left: "645px", width: "72px" });
}
);
/**
* CONTROL THE events
*
*/
$("#overlay_animals div").css({ opacity: 0 });
$("#overlay_animals h3 a").click(
function(){
$(this).addClass("animals_active");
$(this).parent().siblings("h3").children("a").removeClass("animals_active");
$(this).parent().siblings("div").animate({ opacity: 0}, 100 );
$(this).parent().next("div").animate({ opacity: 0.8}, 400 );
return false;
}
);
});