Pannels Responsive Slideshow

Responsive Bootstrapped panels slideshow with Vegas Full BG integration

by ignaciocorreia

HTML

<script src="netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="http://vegas.jaysalvat.com/js/vegas/jquery.vegas.js"></script>
<link rel="stylesheet" href="http://vegas.jaysalvat.com/js/vegas/jquery.vegas.css">
<div class="container-fluid">
  <div class="row-fluid">
      <div class="span1 default"><!--side esquerda--></div>
    <div class="span10"> 
        <div class="row-fluid hoverPannels">
          <div class="span12"> 
             <div class="row-fluid">
              <div class="span3 primeiro" id="pannel1">
                  <div class="logo defaultLogo "><img src="http://dev2.algarweb.pt/infralobo/images/infralobo/logo_infralobo.png" /></div>
                  <div class="span2 bottomContainer">
                      <h2 class="titleContainer">Serviços</h2>
                      <div class="descriptionContainer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lorem turpis, vestibulum vel semper vel, ultrices eu est.</div>
                  </div>
                 </div> 
              <div class="span3 segundo" id="pannel2">
                  <div class="logo"><img src="http://dev2.algarweb.pt/infralobo/images/infralobo/logo_infralobo.png"/></div>
                  <div class="span2 bottomContainer">
                      <h2 class="titleContainer">Documentos</h2>
                      <div class="descriptionContainer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lorem turpis, vestibulum vel semper vel, ultrices eu est.</div>
                  </div>
                 </div> 
              <div class="span3 terceiro" id="pannel3">
                  <div class="logo"><img src="http://dev2.algarweb.pt/infralobo/images/infralobo/logo_infralobo.png"/></div>
                  <div class="span2 bottomContainer">
                      <h2 class="titleContainer">Área de Cliente</h2>
                      <div class="descriptionContainer">Lorem ipsum dolor sit amet, consectetur adipiscing...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
body{background:#000;}
.hoverPannels .span3 .descriptionContainer,
.hoverPannels .span3 .logo{opacity:0;
    -webkit-transition:1s ease-in-out all;
        -moz-transition:1s ease-in-out all;
            -o-transition:1s ease-in-out all;
                transition:1s ease-in-out all;}
.hoverPannels .span3:hover .descriptionContainer,
.hoverPannels .span3:hover .logo{opacity:1; 
    -webkit-transition:0.3s ease-in-out all;
        -moz-transition:0.3s ease-in-out all;
            -o-transition:0.3s ease-in-out all;
               transition:0.3s ease-in-out all;}
.hoverPannels .span3 .logo img{ margin: 30px auto 10px;display:block;}
.hoverPannels .bottomContainer {position:absolute;bottom:0;height: 30%;}
.hoverPannels h2.titleContainer, 
.hoverPannels .descriptionContainer{color:#fff;}
.hoverPannels h2.titleContainer{border-bottom: solid 3px;padding-bottom: 10px;font-size:120%;}
.hoverPannels .descriptionContainer{opacity:0;}
.hoverPannels .span3 {background:transparent;
     -webkit-transition:1s ease-in-out all;
        -moz-transition:1s ease-in-out all;
            -o-transition:1s ease-in-out all;
                transition:1s ease-in-out all;
    border-left: solid 1px black;
    margin: 0;
    width: 25%;
}
.hoverPannels .span3.quarto{  border-right: solid 1px black;}
.hoverPannels .span3:hover {background:rgba(00,00,00,0.6); 
      -webkit-transition:0.3s ease-in-out all;
        -moz-transition:0.3s ease-in-out all;
            -o-transition:0.3s ease-in-out all;
               transition:0.3s ease-in-out all;
                box-shadow: 0 0 40px black inset;
}
.vegas-loading{display:none!important;}


.hoverPannels .span3.quarto .noticiasContent{opacity:0;
   -webkit-transition:1s ease-in-out all;
        -moz-transition:1s ease-in-out all;
            -o-transition:1s ease-in-out all;
                transition:1s ease-in-out all;
}

.hoverPannels .span3.quarto:hover...

JavaScript

//============ Default Vars
   dafaultURL = 'http://dev2.algarweb.pt/infralobo/images/infralobo/pannels/';
 imageDefault = 'default.jpg';
   mainPannel = '.hoverPannels .span3';
fadeAnimation = 500;
  sideDefault = '.span1.default';
// ===========coloca os paineis a 100% de altura
function sizeContent(){
    if ($(mainPannel).height() < $(document).height()){
        $(mainPannel).css('height', $(document).height()+'px'); }
    if ($(sideDefault).height() < $(document).height()){
        $(sideDefault).css('height', $(document).height()+'px'); }
}
// ========== em DOM READY coloca os apineis a 100% e ainda o backogrund 100%
$(document).ready(function(){    
    // ====== coloca a imagem no fundo default - funcção com os defaults
    function setDefaultSetting(){
           $.vegas({ src: dafaultURL+imageDefault ,fade:fadeAnimation });   
           $('.logo.defaultLogo ').css('opacity','1');}  
    // ======= on domn ready poe os defaults
    setDefaultSetting();    
    // ===== coloca um ORVERLAY, ou seja, uma imagem por cima do backgroud
    $.vegas('overlay', {src:'http://vegas.jaysalvat.com/js/vegas/overlays/06.png' });
    // ===== paineis a 100%
    sizeContent();    
    // ===== rollover Activa o Painel Actual e altera o fundo
    $(mainPannel).live({          
        mouseover: function(){        
            $.vegas({ src: dafaultURL  + this.id + ".jpg" , fade:fadeAnimation }); 
            // ====== valida se o logo está o 1 painel se sim mantem visivel
            if(this.id != "pannel1" ){
                $('.logo.defaultLogo ').css('opacity','0');}
            else{
                $('.logo.defaultLogo ').css('opacity','1'); }
         // ========= volta ao horiginal no rollout
         }, mouseout: function(){        
                 setDefaultSetting();                          
         }
    }); 
});
// ========= em rezise reajusta os paineis
$(window).resize(sizeContent);