// JavaScript for atelier interactiv jQuery(document).ready(function() { /////////////////////////////////// //Schrifteinbettung /////////////////////////////////// Cufon.replace('a.accordionHeader'); Cufon.replace('h2'); Cufon.replace('h4'); /////////////////////////////////// //Headeranimation --> cycle-Plugin /////////////////////////////////// $('#slideshow').cycle({ fx: 'fade', speed: 'slow', timeout: 3000, pager: '#nav', slideExpr: 'img' }); /////////////////////////////////// //Main-Navigation Layout -- Animation /////////////////////////////////// //Navicolor auf weiss function resetNaviColor() { jQuery('.navi1 a').css("color", "black"); jQuery('.navi2 a').css("color", "black"); jQuery('.navi3 a').css("color", "black"); } //this.bghelper = function(element, setter){ //if (jQuery(element).length){ // element = jQuery(element) // if (setter) { // element.css('background-position', setter + 'px 0') //sets the bg ig settter is set // }else{ // return element.css('background-position') //returns the bg position if setter i not set // } //}else{ // return false //} //} //Presets /////////////////////////////////////// if (jQuery('#Navigation_1 li.leistungen.active').length) { //bghelper('#Navigation_1'); //call the function to get the bg position jQuery('#Navigation_1') .css({ backgroundImage: "url(tl_files/atelier_interaktiv/images/background/menu_highlight_hg.png)", backgroundRepeat: "no-repeat", backgroundPosition: "50px 0" }) .animate({ backgroundPosition: "50px 0" }, { complete: function() { jQuery('#Navigation_1 li.active').css("color", "white"); } }); //bghelper('#Navigation_1', 50); //call the function to set the bg position } /////////////////////////////////////// if (jQuery('#Navigation_1 li.projects.trail').length) { // bghelper('#Navigation_1'); //call the function to get the bg position jQuery('#Navigation_1') .css({ backgroundImage: "url(tl_files/atelier_interaktiv/images/background/menu_highlight_hg.png)", backgroundRepeat: "no-repeat", backgroundPosition: "180px 0" }) .animate({ backgroundPosition: "180px 0" }, { complete: function() { jQuery('#Navigation_1 li.trail a').css("color", "white"); } }) // bghelper('#Navigation_1', 180); //call the function to set the bg position }; /////////////////////////////////////// if (jQuery('#Navigation_1 li.atelier.active').length) { // bghelper('#Navigation_1'); //call the function to get the bg position jQuery('#Navigation_1') .css({ backgroundImage: "url(tl_files/atelier_interaktiv/images/background/menu_highlight_hg.png)", backgroundRepeat: "no-repeat", backgroundPosition: "310px 0" }) .animate({ backgroundPosition: "310px 0" }, { complete: function() { jQuery('#Navigation_1 li.active').css("color", "white"); } }) // bghelper('#Navigation_1', 310); //call the function to set the bg position }; /////////////////////////////////// //Accordion /////////////////////////////////// //Presets jQuery('#accordion').accordion({ // active: false, autoHeight: false, // animated: 'easeslide', navigation: true, selectedClass: 'active', header: "a.accordionHeader" // navigationFilter: function() { // return this.href.toLowerCase() == location.href.toLowerCase(); // } }); //Asual //$.address.change(function(event) { // alert("window.hashchange") // }); // alert("OutOfFunction") //jQuery('#accordion > a').fadeOut() //Address var accordion = jQuery('#accordion'), a_selector = 'a.accordionHeader'; accordion.accordion({ event: 'change' }); accordion.find( a_selector ).click(function(){ var state = {}, id = "accordion", idx = jQuery(this).parent().prevAll().length; state[ id ] = idx; jQuery.bbq.pushState( state ); }); jQuery(window).bind( 'hashchange', function(e) { accordion.each(function(){ var idx = e.getState( this.id, true ) || 0; // jQuery(this).find( a_selector ).eq( idx ).triggerHandler( 'change' ); // jQuery(this).find( a_selector ).eq( idx ).fadeOut() // jQuery('#accordion a').eq(1).fadeOut() }); }) jQuery(window).trigger( 'hashchange' ); /////////////////////////////////// //SideBarLinks -- Adressierung /////////////////////////////////// //Beim Laden der Seite // jQuery('.ui-state-active').each(function(event) { // window.location.hash = this.hash; // }); // Bei Klick aufs Accordion jQuery('.accordionHeader').click(function(event) { //window.location.hash = this.hash; sideBarFadeIn(); }); //Algemeines Ausblenden des Sidebarinhaltes function fadeOutsideBarContent() { for(var i=0; i<10; i++){ jQuery('.sideBarContent_'+i).hide(); }; }; fadeOutsideBarContent (); //Einblendefunktion SideBar function sideBarFadeIn() { for(var i=0; i<10; i++){ switch (window.location.hash) { case '': fadeOutsideBarContent(); jQuery('.sideBarContent_0').fadeIn(); break; case '#accordion='+i: fadeOutsideBarContent(); jQuery('.sideBarContent_'+i).fadeIn(); break; } }; }; sideBarFadeIn(); ///////////////////////////////////// // Layout des Accordions -- onchange jQuery("#accordion").accordion({ changestart: function() { jQuery('h1.ui-state-default a') .css({ paddingRight:"75px", backgroundImage: "url(tl_files/atelier_interaktiv/images/background/arrow-left1-grey.png)", backgroundPosition: "right", backgroundRepeat: "no-repeat", color: "#717171" }); jQuery('h1.ui-state-active a') .css({ backgroundImage: "none", color: "#fff" }) .animate({ color: "#fff" }); Cufon.replace('a.accordionHeader'); } }); //////////////////////// //Kontakt //////////////////////// jQuery('#SideFlip').click(function() { jQuery('#Contact').animate({ width: 'toggle' }, 1000); }); //////////////////////// //Produkte rollover //////////////////////// //Produkte Bildereinblendungen function productGallerySlide (){ for (var i=0; i<20; i++){ jQuery('.projectsImageview .project_'+i).cycle({ fx: 'fade', speed: '500', timeout: 1000, delay: -2000 // speed: '2000', // timeout: 500, // delay: -2000 }); jQuery('.projectsImageview .project_'+i).cycle('pause'); jQuery('.projectsImageview .project_'+i).mouseover( function() { jQuery(this).cycle('resume'); } // function() { // jQuery(this).cycle('pause'); // } ); jQuery('.projectsImageview .project_'+i).mousedown( function() { jQuery(this).cycle('next') } ); jQuery('.projectsImageview .project_'+i).mouseout( function() { jQuery(this).cycle('pause') } ); } } productGallerySlide () ////////////// //LazyLoad ///////////// //Betweenbox // jQuery('#Betweenbox').find('img:gt(0)') // .lazyload({ // placeholder : "tl_files/atelier_interaktiv/images/background/ajax-loader-580x340.gif", // event : "load", // effect : "fadeIn" // // }); //Projects // jQuery('.projectsImageview .ce_gallery').find('img:gt(0)') // .lazyload({ // placeholder : "tl_files/atelier_interaktiv/images/background/ajax-loader-580x340.gif", // event : "mouseenter", // effect : "fadeIn" // // }); ///////////////////////////// //Produkte Seiteneinblendung //////////////////////////// //am Anfang ausblenden jQuery('.projects #SideBar').css('display', 'none'); //am Anfang ausblenden function projectSideBarNotOnStart (){ for(var i=0; i<20; i++){ jQuery('.projects #SideBar .project_'+i).css('display', 'none'); }; }; projectSideBarNotOnStart () //Seiten hover ein und ausblenden und Positionieren // function projectSideBarShow (){ // for(var i=0; i<20; i++){ // jQuery('.projectsImageview .project_'+i).hover( // // function() { // jQuery('.projects #SideBar').stop(); // jQuery('.projects #SideBar') // .css({ // display: 'block', // marginTop: '186px' // }); // jQuery('.projects #SideBar .project_'+i).css('display', 'block'); // }, // function() { // jQuery('.projects #SideBar').stop(); // jQuery('.projects #SideBar').css('display', 'none'); // jQuery('.projects #SideBar .project_'+i).css('display', 'none'); // } // ); // }; // }; // // projectSideBarShow () jQuery('.projectsImageview .project_15').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '186px' }); jQuery('.projects #SideBar .project_15').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_15').css('display', 'none'); } ); jQuery('.projectsImageview .project_1').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '186px' }); jQuery('.projects #SideBar .project_1').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_1').css('display', 'none'); } ); jQuery('.projectsImageview .project_2').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '394px' }); jQuery('.projects #SideBar .project_2').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_2').css('display', 'none'); } ); jQuery('.projectsImageview .project_3').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '394px' }); jQuery('.projects #SideBar .project_3').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_3').css('display', 'none'); } ); jQuery('.projectsImageview .project_4').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '602px' }); jQuery('.projects #SideBar .project_4').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_4').css('display', 'none'); } ); jQuery('.projectsImageview .project_5').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '602px' }); jQuery('.projects #SideBar .project_5').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_5').css('display', 'none'); } ); jQuery('.projectsImageview .project_6').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '810px' }); jQuery('.projects #SideBar .project_6').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_6').css('display', 'none'); } ); jQuery('.projectsImageview .project_7').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '810px' }); jQuery('.projects #SideBar .project_7').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_7').css('display', 'none'); } ); jQuery('.projectsImageview .project_8').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '1018px' }); jQuery('.projects #SideBar .project_8').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_8').css('display', 'none'); } ); jQuery('.projectsImageview .project_9').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '1018px' }); jQuery('.projects #SideBar .project_9').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_9').css('display', 'none'); } ); jQuery('.projectsImageview .project_10').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '1226px' }); jQuery('.projects #SideBar .project_10').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_10').css('display', 'none'); } ); jQuery('.projectsImageview .project_11').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '1226px' }); jQuery('.projects #SideBar .project_11').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_11').css('display', 'none'); } ); jQuery('.projectsImageview .project_12').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '1226px' }); jQuery('.projects #SideBar .project_12').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_12').css('display', 'none'); } ); jQuery('.projectsImageview .project_13').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '1226px' }); jQuery('.projects #SideBar .project_13').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_13').css('display', 'none'); } ); jQuery('.projectsImageview .project_14').hover( function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar') .css({ display: 'block', marginTop: '1226px' }); jQuery('.projects #SideBar .project_14').css('display', 'block'); }, function() { jQuery('.projects #SideBar').stop(); jQuery('.projects #SideBar').css('display', 'none'); jQuery('.projects #SideBar .project_14').css('display', 'none'); } ); //////////////////////// // Tooltip //////////////////////// jQuery(".trigger").tooltip({ effect: 'slide', offset: [8, -160], opacity: '1' }); //////////////////////// });