Oficina da Net Logo

Criando uma galeria de fotos em CSS3

Criando uma galeria de fotos em CSS3, com transições, animações e sombra, podemos fazer alguns efeitos visuais bastante impressionantes usando nada, mas a bondade que ele proporciona.

Por | @oficinadanet Programação Pular para comentários

CSS3 realmente tem dado capacidades nos muito mais do que seus antecessores. Com transições, animações e sombra, podemos fazer alguns efeitos visuais bastante impressionantes usando nada, mas a bondade que ele proporciona. Hoje, vamos ver como criar uma galeria de fotos com bom aspecto e não usando CSS3. Vamos mergulhar em, não é?

Preview do resultado:




PRIMEIRO PASSO:
Configurando a Página
Vamos começar o tutorial de hoje, adicionando uma imagem de fundo em nossa página HTML. A estrutura HTML irá continuar a crescer à medida que avançamos, mas vamos começar com uma ardósia limpa. Veja como o HTML inicial é semelhante a:




     CSS Photo Gallery </title>
</head>
<body>
    <h1> CSS3 Photo Gallery </h1>
</body>
</html></code></pre><br />
Nada extravagante de todos aqui. A próxima coisa que vamos querer fazer é ir em frente e adicione a imagem de fundo que vamos estar a utilizar para a nossa página de hoje. Isso será feito no CSS, e vamos adicioná-lo ao seletor do corpo. Aqui está o que o CSS inicial deve ser parecido:<br />
<pre><code>body
{
    background:url("wood.jpg");
    background-repeat: inherit;
}</code></pre><br />
Acho fundos de madeira para serem verdadeiramente agradáveis ​​em sites de fotografia, então é por isso que escolhemos hoje a madeira. Se você quiser, você pode usar qualquer imagem de fundo que você deseja. <br />
<br />
<br />
<strong>SEGUNDA ETAPA:</strong><br />
Adicionando fotos para a nossa página<br />
<pre><code><body>
    <h1> CSS3 Photo Gallery </h1>
    <img itemprop="image" class="lazy " title="Criando uma galeria de fotos em CSS3" src="autumn.jpg" alt="Criando uma galeria de fotos em CSS3" >
    <img itemprop="image" class="lazy " title="Criando uma galeria de fotos em CSS3" src="city.jpg" alt="Criando uma galeria de fotos em CSS3" >
    <img itemprop="image" class="lazy " title="Criando uma galeria de fotos em CSS3" src="dirt.jpg" alt="Criando uma galeria de fotos em CSS3" >
    <img itemprop="image" class="lazy " title="Criando uma galeria de fotos em CSS3" src="autumn.jpg" alt="Criando uma galeria de fotos em CSS3" >
    <img itemprop="image" class="lazy " title="Criando uma galeria de fotos em CSS3" src="flower.jpg" alt="Criando uma galeria de fotos em CSS3" >
    <img itemprop="image" class="lazy " title="Criando uma galeria de fotos em CSS3" src="yellow_flowers.jpg" alt="Criando uma galeria de fotos em CSS3" >
</body></code></pre><br />
Repare que nós adicionamos a <strong>"image"</strong> de classe para cada uma das nossas fotos. Isto irá permitir-nos ao estilo de cada um deles com um efeito Polaroid, adicionando uma fronteira bastante grossa, branca a eles.<br />
<br />
<br />
<strong>PASSO TRÊS</strong><br />
Estilo com a propriedade Border <br />
Vamos em frente e fazer as nossas imagens se parecem mais com Polaroids, adicionando algum código para o nosso arquivo CSS:<br />
<pre><code>.image
{
    border-top: 10px solid white;
    border-right: 10px solid white;
    border-bottom: 40px solid white;
    border-left: 10px solid white;    
}</code></pre><br />
Agora carregar a página no navegador e confira a galeria de fotos super legal! Não é bem feito, mas honestamente, mesmo que neste momento está começando a olhar muito bom. <br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Criando uma galeria de fotos em CSS3" src="http://www.oficinadanet.com.br//imagens/coluna/3029//1.jpg" alt="Criando uma galeria de fotos em CSS3" ></div></blockquote><br />
<br />
<strong>QUARTA ETAPA: </strong><br />
<strong>nth-child Filter</strong> - Adição de rotação "aleatório"<br />
Em seguida, vamos querer adicionar um pouco de rotação para que olhar fotos colocadas aleatoriamente na página. Nós vamos usar o CSS é nth-child filter para nos ajudar. Aqui está o que a CSS deve ser semelhante a agora:<br />
<pre><code>.image:nth-child(1n)
{
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);    
}
.image:nth-child(2n)
{
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);    
}</code></pre><br />
Ótimo! As imagens que agora tem o que parece ser uma rotação aleatória para eles. A CSS nth-child está tomando todas as imagens 1 e 2 graus girando-o no sentido horário, e toda segunda imagem e girando-a 5 graus sentido anti-horário. <br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Criando uma galeria de fotos em CSS3" src="http://www.oficinadanet.com.br//imagens/coluna/3029//2.jpg" alt="Criando uma galeria de fotos em CSS3" ></div></blockquote><br />
<br />
<strong>PASSO CINCO: </strong><br />
A propriedade Shadow - Adicionando um pouco de sombra<br />
Vamos em frente e adicionar algumas sombras de nossas imagens para torná-los se destacam a partir da página um pouco mais:<br />
<pre><code>.image
{
    border-top: 10px solid white;
    border-right: 10px solid white;
    border-bottom: 40px solid white;
    border-left: 10px solid white;
    cursor: pointer;
    -moz-box-shadow: 2px 5px #000;
    -webkit-box-shadow: 3px 3px #000;
    position: relative;   
}
</code></pre><br />
Dê uma olhada nas fotos e você verá que nós temos agora uma sombra muito agradável ao redor de cada um deles. <br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Criando uma galeria de fotos em CSS3" src="http://www.oficinadanet.com.br//imagens/coluna/3029//3.jpg" alt="Criando uma galeria de fotos em CSS3" ></div></blockquote><br />
<br />
<strong>PASSO SEIS: </strong><br />
Rotação das Imagens - Podemos agora começar a adicionar os toques finais para as nossas fotos para fazer uma galeria de mais interativa. Nós precisamos fazer algumas coisas para :hover psuedo-selector de modo a obter alguma interatividade quando um usuário passa sobre uma das imagens. A primeira coisa que vai querer fazer girar as imagens de volta para a posição padrão. Veja como isso é implementado no CSS:<br />
<pre><code>{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);            
}
.image:nth-child(2n)
{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);    
}</code></pre><br />
Estas duas declarações são separadas da enésima declarações nth-child, e rodar uma determinada foto de volta à posição original de 0 graus. Vá em frente e verifique a página para certificar as rotações estão trabalhando.<br />
<br />
<br />
<strong>PASSO SETE: </strong><br />
Adicionando <a onclick="_gaq.push(['_trackEvent', 'link_tag', 'pfr2650', 'tagto_transicoes']);" href='https://www.oficinadanet.com.br/transicoes'>transições</a> <br />
Em seguida é a transição. Primeiro, vamos adicionar a declaração para a transição. Aqui está o que a CSS deve ser semelhante a agora:<br />
<pre><code>.image
{
    border-top: 10px solid white;
    border-right: 10px solid white;
    border-bottom: 40px solid white;
    border-left: 10px solid white;
    cursor: pointer;
    -moz-box-shadow: 2px 5px #000;
    -webkit-box-shadow: 3px 3px #000;
    position: relative;  
    
    -webkit-transition:linear 0.25s;
    -moz-transition:linear 0.25s;
}</code></pre><br />
<br />
<strong>ETAPA OITO: </strong><br />
<strong>Usando a Transformada: Scale Property.</strong> O último passo será adicionar o "zoom" de funcionalidade, que na verdade é feito usando transformar CSS3 transform: scale. Precisaremos adicionar a propriedade de ambos os nossos pseudo seletores hover para completar o efeito. Veja como adicionar o toque final para o CSS:<br />
<pre><code>.image:nth-child(1n): hover
{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25); 
    z-index: 2;            
}
.image:nth-child(2n): hover
{
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25); 
    z-index: 2;     
}</code></pre><br />
Note que nós também adicionamos uma declaração z-index. Isso vai fazer com que a fotografia é visualizada parece pairar acima do resto deles, e, em seguida, quando o que paira é completa, cai de volta no lugar a seguir aos outros. <br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="Criando uma galeria de fotos em CSS3" src="http://www.oficinadanet.com.br//imagens/coluna/3029//4.jpg" alt="Criando uma galeria de fotos em CSS3" ></div></blockquote><br />
<br />
<strong>Preview do resultado:</strong><br />
<blockquote><iframe allowfullscreen style="background-color:white" width="630px" height="350px" src="http://www.oficinadanet.com.br//imagens/coluna/3029/css3-photo-gallery/index.html" frameborder="0"></iframe></blockquote><br />
<br />
Vimos que o uso de CSS3 pode fazer uma enorme diferença na experiência de um usuário ao visitar seu site. Coisas como as transições, as sombras, e transforma realmente trazer a profundidade da experiência, e fornecer algumas maneiras muito legal a concretizar suas idéias em realidade.<br />
<br />
<a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-2650', 'para_url_/imagens/coluna/3029//css3_photo_gallery.zip']);"   target="_blank"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%2Fimagens%2Fcoluna%2F3029%2F%2Fcss3_photo_gallery.zip" rel="nofollow" >Arquivo anexo</a></p><script src="https://painel.m3midia.com.br/lib/prism/prism.js"></script><link rel="stylesheet" type="text/css" href="https://painel.m3midia.com.br/lib/prism/prism.css"></p>
                    </div>
                        <div class="wifl">
                            <p><strong>Recomendações do editor:</strong></p>
                            <ul class="relacionadolink"><li><a onclick="_gaq.push(['_trackEvent', 'recomendacoes_editor', 'pfr2650', 'pto6981']);" href="https://www.oficinadanet.com.br/noticias_web/4197/twitter-agora-com-galeria-de-imagens">Twitter agora com galeria de imagens</a></li><li><a onclick="_gaq.push(['_trackEvent', 'recomendacoes_editor', 'pfr2650', 'pto2747']);" href="https://www.oficinadanet.com.br/artigo/css/galeria-css-com-efeito-lightbox">Galeria CSS com Efeito Lightbox  </a></li><li><a onclick="_gaq.push(['_trackEvent', 'recomendacoes_editor', 'pfr2650', 'pto2692']);" href="https://www.oficinadanet.com.br/artigo/css/galeria-imagem-com-css3">Galeria de imagens com CSS3</a></li><li><a onclick="_gaq.push(['_trackEvent', 'recomendacoes_editor', 'pfr2650', 'pto2502']);" href="https://www.oficinadanet.com.br/artigo/flash/galeria-de-imagens-em-flash-impulsionada-e-com-xml">Galeria de imagens em Flash Impulsionada e com XML</a></li><li><a onclick="_gaq.push(['_trackEvent', 'recomendacoes_editor', 'pfr2650', 'pto5223']);" href="https://www.oficinadanet.com.br/noticias_web/2418/galeria-de-fotos-windows-seven">Galeria de fotos: Windows seven</a></li>
                            </ul>
                        </div> 
                </div>
                <div class="wifl assuntosfim">
                    <div class="box_new_cmt btag">
                        <span class="tit_new_cmt">MAIS SOBRE:</span>
                        #<a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2650', 'para_css3']);"  href="https://www.oficinadanet.com.br/css3" >css3</a>  #<a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2650', 'para_css']);"  href="https://www.oficinadanet.com.br/css" >css</a>  #<a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2650', 'para_galeria']);"  href="https://www.oficinadanet.com.br/galeria" >galeria</a>  #<a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2650', 'para_funções']);"  href="https://www.oficinadanet.com.br/funcoes" >funções</a>
                    </div>
                </div>
                <script>try { _402_Show(); } catch(e) {}</script>
                <div class="wifl m-b-20">
                    <iframe width="750" height="422" id="ontvvideo" src="https://www.youtube.com/embed/videoseries?list=PLdQflD7vLzCjYNF01jjO4uuyyZLuQ96Yz&enablejsapi=1&rel=0" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>  
    <div class="bar2" >
        <div class="bar2"><div class="wifl m-b-40"><span class="titulo1" ><span>Destaques</span></span><ul class="lst12  wifl  lsn "  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/netflix2018/24108-titulos-que-serao-removidos-da-netflix-em-novembro-de-2018-1-quinzena"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2650', 'pto24108']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/24108/apa-ost_14080.jpg" title="Títulos que serão removidos da Netflix em novembro de 2018 - 1ª quinzena" alt="Títulos que serão removidos da Netflix em novembro de 2018 - 1ª quinzena" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Netflix lançamentos em 2018</span>
                                    <h3 class="tit tit2" >Títulos que serão removidos da Netflix em novembro de 2018 - 1ª quinze...</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/netflix2018/24185-novidades-e-lancamentos-netflix-da-semana-1211-a-1811"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2650', 'pto24185']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/24185/anitta0202_14080.jpg" title="Novidades e lançamentos Netflix da semana (12/11 a 18/11)" alt="Novidades e lançamentos Netflix da semana (12/11 a 18/11)" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Netflix lançamentos em 2018</span>
                                    <h3 class="tit tit2" >Novidades e lançamentos Netflix da semana (12/11 a 18/11)</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/elonmusk/24201-as-outras-empresas-de-elon-musk-solarcity-e-openai"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2650', 'pto24201']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/24201/capa_14080.jpg" title="As outras empresas de Elon Musk - SolarCity e OpenAI" alt="As outras empresas de Elon Musk - SolarCity e OpenAI" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Elon Musk</span>
                                    <h3 class="tit tit2" >As outras empresas de Elon Musk - SolarCity e OpenAI</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/tecnologia/24208-como-usar-a-tecnologia-para-diminuir-a-ansiedade"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2650', 'pto24208']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/24208/ansiedade_14080.jpg" title="Como usar a tecnologia para diminuir a ansiedade?" alt="Como usar a tecnologia para diminuir a ansiedade?" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Tecnologia</span>
                                    <h3 class="tit tit2" >Como usar a tecnologia para diminuir a ansiedade?</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/games/24197-lancamentos-de-jogos-da-semana-1211-a-1811"  onclick="_gaq.push(['_trackEvent', 'barra_destaques', 'pfr2650', 'pto24197']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/24197/thumb-1920-927080_750x469_5be96e32b8608_14080.jpg" title="Lançamentos de jogos da semana (12/11 a 18/11)" alt="Lançamentos de jogos da semana (12/11 a 18/11)" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Games</span>
                                    <h3 class="tit tit2" >Lançamentos de jogos da semana (12/11 a 18/11)</h3>
                                </div>
                            </a>
                        </li></ul></div>      
        </div>
        <div class="bar2 p-rel" id="out_post_barra" data-distance="30" >
            <div class="bar2" id="post_barra" >
                <!-- /6524261/ON_300x600_LATERAL -->
                <div class='wifl m-b-40'>
                <div id='div-gpt-ad-1519730196190-0' style='height:600px; width:300px;'>
                <script>
                googletag.cmd.push(function() { googletag.display('div-gpt-ad-1519730196190-0'); });
                </script>
                </div></div>
            </div>
        </div>
    </div>
<div class="wifl bottom_pause_post_barra"><div style="float:left;">
<div style="width: 300px; float: left;">
<!-- /6524261/ON_FOOTER -->
<div id="div-gpt-ad-1512402583744-0" style="height:250px; width:300px;">
<script>
googletag.cmd.push(function() { googletag.display("div-gpt-ad-1512402583744-0"); });
</script>
</div>
</div></div>
    <div style="float:left; max-width:750px; margin-left:20px" class="wifl"><span class="titulo1" ><span>O QUE LER EM SEGUIDA</span></span><ul class="lst4 post wifl  lsn "  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/14375-como-abrir-o-inspecionar-elemento-em-uma-nova-janela"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2650', 'pto14375']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1"></span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/14375/capa-developers_200113.jpg" title="Como abrir o “inspecionar elemento” em uma nova janela?" alt="Como abrir o “inspecionar elemento” em uma nova janela?" >
                                    <span class="gradient"></span>
                                </div>
                                <h3 class="wifl tit4">Como abrir o “inspecionar elemento” em uma nova janela?</h3>
                                <div class="wifl nfo">
                                    <span class="ass-autor cor2">por Grasiel Felipe Grasel</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/9799-design-responsivo-para-menu-imagem-e-publicidade"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2650', 'pto9799']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1"></span>
                                    <img src="https://www.oficinadanet.com.br/_template/imagem/padrao.jpg" title="CSS: Design responsivo para menu, imagem e publicidade" alt="CSS: Design responsivo para menu, imagem e publicidade" >
                                    <span class="gradient"></span>
                                </div>
                                <h3 class="wifl tit4">CSS: Design responsivo para menu, imagem e publicidade</h3>
                                <div class="wifl nfo">
                                    <span class="ass-autor cor2">por Jonathan Lamim</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/9798-design-responsivo-com-css3"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2650', 'pto9798']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1"></span>
                                    <img src="https://www.oficinadanet.com.br/_template/imagem/padrao.jpg" title="Design responsivo com CSS3" alt="Design responsivo com CSS3" >
                                    <span class="gradient"></span>
                                </div>
                                <h3 class="wifl tit4">Design responsivo com CSS3</h3>
                                <div class="wifl nfo">
                                    <span class="ass-autor cor2">por Jonathan Lamim</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/8439-a-dissociacao-do-html-e-css"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2650', 'pto8439']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1"></span>
                                    <img src="https://www.oficinadanet.com.br/_template/imagem/padrao.jpg" title="Regras para como separar o HTML do CSS" alt="Regras para como separar o HTML do CSS" >
                                    <span class="gradient"></span>
                                </div>
                                <h3 class="wifl tit4">Regras para como separar o HTML do CSS</h3>
                                <div class="wifl nfo">
                                    <span class="ass-autor cor2">por Nicolas Muller</span></div>
                            </a>
                        </li></ul>
    </div>
<style>
    #share_container{position:relative;height:auto;margin:7px 0;display:inline-block;}
    #share_container .share_menu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap;margin:0;padding:0px;background-color:transparent;-webkit-box-pack:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
    #share_container .share_menu.vertical.right{right:0;top:calc(50% - 120px);}
    #share_container .share_menu.vertical.left{left:0;top:calc(50% - 120px);}
    #share_container .share_menu.vertical{-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;position:fixed;padding:10px;z-index:2147483694;background-color:#fff;border-radius:2px;}
    #share_container .share_menu.vertical li{margin:5px auto;background-color:#fff;border: 1px solid #cecece;border-radius: 5px; cursor: pointer}
    #share_container .share_menu.vertical li:hover{border: 1px solid #f3661a;}
    #share_container .share_menu li{list-style:none;position:relative;text-align:center;margin:5px 2px 0px;padding:0px;font-size:0px;width:30px;height:30px;}
        #share_container .facebookShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-fb.png);display: block;}
    #share_container .twitterShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-tw.png);display: block;}
    #share_container .linkedinShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-in.png);display: block;}
    #share_container .emailShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-mail.png);display: block;}
    #share_container .whatsappShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-wa.png);display: block;}
    #share_container .telegramShare {width: 30px;height: 30px;background:  url(https://www.oficinadanet.com.br/_template/imagem/ico-bs-tg.png);display: block;}
    
@media screen and (max-width:1100px) {
    #share_container {display: none}
}
</style>
<div id="share_container" class=" left">
    <ul class="share_menu left vertical">
        <li class="share_btn visible" title="Compartilhe no Facebook"  onclick="  window.open('https://www.facebook.com/sharer/sharer.php?app_id=209309632417494&u=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fcss%2Fcriando-uma-galeria-de-fotos-em-css3%3Futm_source%3Dfacebook%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'facebook', 'https://www.oficinadanet.com.br/artigo/css/criando-uma-galeria-de-fotos-em-css3?utm_source=facebook&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2650','flgcomment');  " ><span class="facebookShare">Facebook</span></li>
        <li class="share_btn visible" title="Compartilhe no Twitter"  onclick="  window.open('https://twitter.com/intent/tweet?text=Criando+uma+galeria+de+fotos+em+CSS3&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fcss%2Fcriando-uma-galeria-de-fotos-em-css3%3Futm_source%3Dtwitter%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais&via=oficinadanet','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'twitter', 'https://www.oficinadanet.com.br/artigo/css/criando-uma-galeria-de-fotos-em-css3?utm_source=twitter&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&twitter=1&id=2650','flgcomment');  " ><span class="twitterShare">Twitter</span></li>
        <li class="share_btn visible" title="Compartilhe no Linkedin"  onclick="  window.open('https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fcss%2Fcriando-uma-galeria-de-fotos-em-css3%3Futm_source%3Dlinkedin%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais&summary=Criando+uma+galeria+de+fotos+em+CSS3%2C+com+transi%C3%A7%C3%B5es%2C+anima%C3%A7%C3%B5es+e+sombra%2C+podemos+fazer+alguns+efeitos+visuais+bastante+impressionantes+usando+nada%2C+mas+a+bondade+que+ele+proporciona.&title=Criando+uma+galeria+de+fotos+em+CSS3&source=oficinadanet','','width=600,height=400');  _gaq.push(['_trackEvent', 'btshare', 'linkedin', 'https://www.oficinadanet.com.br/artigo/css/criando-uma-galeria-de-fotos-em-css3?utm_source=linkedin&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2650','flgcomment');  " ><span class="linkedinShare">Linkedin</span></li>
        <li class="share_btn visible" title="Compartilhe por Email"  onclick="  document.location='mailto:?subject=Criando uma galeria de fotos em CSS3&body=Artigo: https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fcss%2Fcriando-uma-galeria-de-fotos-em-css3%3Futm_source%3Dshr_mail%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais';  _gaq.push(['_trackEvent', 'btshare', 'email', 'https://www.oficinadanet.com.br/artigo/css/criando-uma-galeria-de-fotos-em-css3?utm_source=shr_mail&utm_medium=sharebutton&utm_campaign=RedesSociais']);  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2650','flgcomment');  " ><span class="emailShare">Email</span></li>
        <li class="share_btn visible" title="Compartilhe pelo WhatsApp"  onclick="  _gaq.push(['_trackEvent', 'btshare', 'whatsapp', 'https://www.oficinadanet.com.br/artigo/css/criando-uma-galeria-de-fotos-em-css3?utm_source=whatsapp&utm_medium=sharebutton&utm_campaign=RedesSociais']);  window.open('https://api.whatsapp.com/send?text=Criando uma galeria de fotos em CSS3 - https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fcss%2Fcriando-uma-galeria-de-fotos-em-css3%3Futm_source%3Dwhatsapp%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais');  " ><span class="whatsappShare">WhatsApp</span></li>
        <li class="share_btn visible" title="Compartilhe pelo Telegram"  onclick="  _gaq.push(['_trackEvent', 'btshare', 'telegram', 'https://www.oficinadanet.com.br/artigo/css/criando-uma-galeria-de-fotos-em-css3?utm_source=telegram&utm_medium=sharebutton&utm_campaign=RedesSociais']);  window.open('https://telegram.me/share/url?url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fcss%2Fcriando-uma-galeria-de-fotos-em-css3%3Futm_source%3Dtelegram%26utm_medium%3Dsharebutton%26utm_campaign%3DRedesSociais&text=Criando+uma+galeria+de+fotos+em+CSS3');  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2650','flgcomment');  " ><span class="telegramShare">Telegram</span></li>
    </ul>
</div>
</div>
        <div class="wifl post-bottom1" id="boxcomment" >
            <span class="titulo1 tit_tag" ><span>Comentários</span></span>
                    <div id="btcarregarcomments_disqus" class="bt-all tpl2 wifl">Carregar comentários</div>
                    <div id="comment" class="comentarios_box">
                        <div id="disqus_thread"></div>
                    </div>
        </div>
            
    </section>
</div>
                <script>
                    var disqus_shortname = 'oficinadanet'; // required: replace example with your forum shortname
                    var disqus_url = 'https://www.oficinadanet.com.br/artigo/css/criando-uma-galeria-de-fotos-em-css3';

                    var disqus_config = function () {
                        this.callbacks.onNewComment = [function(comment) {ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2650','flgcomment');
                        }];
                    };
                    function carregaComentariosDisqus()
                    {
                        $('#btcarregarcomments_disqus').hide();

                        (function() {
                            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                           dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                        })();
                    }        
                </script>
                <div style="display:none;" id="flgcomment"></div>
        <script>
        
        function loadLazyMateria()
        {
            
            
            carregaComentariosDisqus();
         
        }
       </script></div>
                </section>
<footer class="footer wifl" id="footer">
    <div class="corpo">
        <a href="https://www.oficinadanet.com.br" class="logo2"></a>
        <div class="out-menu-footer">
            <ul class="menu-footer lst-footer1 wifl">
                <li><a href="https://www.oficinadanet.com.br/sobre">Sobre</a></li>
                <li><a href="https://www.oficinadanet.com.br/contato">Contato</a></li>
                <li><a href="https://www.oficinadanet.com.br/privacidade" >Política de Privacidade</a></li>
                <li><a href="https://www.oficinadanet.com.br/equipe" >Equipe</a></li>
            </ul>
            <ul class="menu-footer wifl">
                <li><span class="linksredes" onclick="window.open('https://www.facebook.com/oficinadanet')">Facebook</span></li>
                <li><span class="linksredes" onclick="window.open('https://www.youtube.com/user/oficinadanettv')">Youtube</span></li>
                <li><span class="linksredes" onclick="window.open('https://twitter.com/OficinadaNet')">Twitter</span></li>
                <li><span class="linksredes" onclick="window.open('https://www.instagram.com/oficinadanetoficial/')">Instagram</span></li>
                <li><span class="linksredes" onclick="window.open('https://t.me/oficinadanet')">Grupo no Telegram</span></li>
                <li><span class="linksredes" onclick="window.open('https://www.oficinadanet.com.br/rss')">RSS</span></li>
            </ul>
        </div>
        <div class="out-menu-cupons">
            <span>Descontos</span>
            <ul class="lst_cupons wifl lsn">
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-netshoes">Descontos Netshoes</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-saraiva">Descontos Saraiva</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-livraria-cultura">Descontos Livraria Cultura</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-fast-shop">Descontos Fast Shop</a></li>
                <li><a href="https://www.oficinadanet.com.br/cupons/cupom-de-desconto-sou-barato">Descontos Sou Barato</a></li>
            </ul>
        </div>
        <div class="box-m3"  >
            <p class="wifl txt1">Um site do grupo</p>
            <a class="m3midia" href="http://www.m3midia.com.br"></a>
            <p class="wifl txt2">© 2018 <span>M3 Mídia</span></p>
            <p class="wifl txt2">Todos os direitos reservados</p>
        </div>
    </div>
</footer>
            <span title="Ir para o topo" class="top_page" id="top_page" ><span></span></span>
        <script>
                var tempo = '1800';
                window.setTimeout('location.reload();', tempo*1000);
                </script>
                <div class="wifl hgt100 blackoverlay" id="blackoverlay"></div>
<div id="out_lib" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</div>
<script>
    
    var vv={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=vv._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=vv._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}
    function BV(str){return vv.decode(str);}

    function scrollPageToID(id)
    {
        $('html,body').animate({ scrollTop: $('#'+id).offset().top - ( $(window).height() - $('#'+id).outerHeight(true) ) / 2  }, 700);
    }

    function serializeDataAttr(form)
    {
        var dataarr = new Array();
        for(var i in form.data()) {
            var subarr = new Array();
            subarr['name'] = i;
            subarr['value'] = form.data()[i];
            dataarr.push(subarr);
        }
        return $.param(form.serializeArray().concat(dataarr));
    }

    function testaVazio(campo,comparacao,mensagem,erro)
    {
        if (erro == true) {return true;}
        if (document.getElementById(campo).value == comparacao)
        {
            alert (mensagem);
            document.getElementById(campo).value = "";
            document.getElementById(campo).focus();
            return true;
        }
        else {return false;}
    }
    function testaCheckBox(classe,mensagem)
    {
        erro = true;
        checkboxes = document.getElementsByClassName(classe);

        for(var i=0, n=checkboxes.length; i<n; i++)
        {
            if(checkboxes[i].checked)
                erro = false;
        }

        if(erro == true)
        {
            alert(mensagem);
            checkboxes[0].focus();
            return true;
        }
        else
            return false;
  }
    function ajaxDireto(url,param,retorno,tipo) //usa jquery
    {
        if(!tipo) tipo = "POST"
         $.ajax({
           type: tipo,
           url: url,
           data: param,
           success: function(html){
             $("#"+retorno).html(html);
           }
         });

    }

    function newsletterCad(e,step)
    {
//        alert(step);
//        alert(e);

        
    }

    function populaSelectCidade(ele)
    {
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=populaSelectCidade&sigla='+$(ele).val(),'select_cidade');
    }
    
        
    $(document).ready(function (e) {
       var header_height = $("header").height();
       $(window).scroll(function(){
           var scrolltop = $(window).scrollTop();
           if(scrolltop > 0)
               $('#out-img-curso-aberto').css('top',(($(window).scrollTop()/2) *-1) + header_height);
           else
               $('#out-img-curso-aberto').css('top',header_height+'px');
       });
    });

    var scroll_aux      = 0;
    var header_top      = $("#header").offset().top;
    var header_height   = $("#header").outerHeight();
    var window_height   = $(window).height();
    var height_document = $(document).height();
    
    
    function fixedMenu()
    {
        var scroll = $(window).scrollTop();

        if( scroll >= (header_top+header_height) )
        {
            if(scroll < scroll_aux )
            {
                $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
            }
            else
            {
                if( (scroll+window_height+20) > height_document )
                {
                    $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
                }
                else
                {
                    var v_tra  = '0.3s';
                    if( scroll <= ( header_top + header_height + 100) )
                        v_tra  = '0s';

                    $('#mov_header').css({'position':'fixed',transition: v_tra,'top':'-'+header_height+'px'});
                }
            }
        }
        else if(scroll <= header_top)
        {
            $('#mov_header').css({'position':'absolute',transition: '0.3s','top':'0px'});

        }
        scroll_aux = scroll;
    }

    function boxHoverSite(act,cic,e)
    {
        var top     = $(e).offset().top+$(e).outerHeight();
        var e_hover = '';

        if($(e).data('box-hover'))
        {
            e_hover = '#'+$(e).data('box-hover')+'_hover';

            switch(act)
            {
                case 2:
                    $('.contr_hov_itens').fadeOut(0);
                    $(e_hover).fadeIn(400);
                    $(e_hover).addClass('contr_hov_itens');
                    boxHoverSite(0,0,e);
                break;
                case 0:
                    if(cic < 5)
                    {
                        var timeBoxHoverSite = setTimeout(function()
                        {
                            cic++;
                            boxHoverSite(0,cic,e);
                        }, 500);
                    }
                    else
                    {
                        clearTimeout(timeBoxHoverSite);
                        if(!$(e_hover).is(":hover") && !$(e).is(":hover") && !$(e_hover+' *').is(":focus"))
                        {
                            $(e_hover).fadeOut(400);
                        }
                        else
                            boxHoverSite(0,0,e);
                    }

                break;
            }
        }
        else
        {
            $('.contr_hov_itens').fadeOut(0);
        }
    }

    function blackoverlay(act)
    {
        if(act)
        {
            $('#blackoverlay').fadeIn(400);
            $('html').addClass('no_scroll');
        }
        else
        {
            $('#blackoverlay').fadeOut(400);
            $('html').removeClass('no_scroll');
        }
    }

    function actAovivo()
    {
        window.location = "";
    }

    function actBodyPago()
    {
        window.open("");
    }

    function actMenuMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_mobile').trigger('classChange');

            if(!$('#menumobile-act').data('post-left'))
            {
                $('#menumobile-act').data('post-left',$('#menumobile-act').css('left'));
            }
            $('#menumobile-act').css('left','0');
            $('#menumobile').css('display','none');
            $('#fechar_menumobile').css('display','block');
        }
        else
        {
            $('#menumobile-act').css('left',$('#menumobile-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_mobile').trigger('classChange');
            $('#menumobile').css('display','block');
            $('#fechar_menumobile').css('display','none');
        }
        blackoverlay(act);
    }

    function actAbreComments(act)
    {
        if(act)
        {
            var post_id        = $('#bt_new_cmt').data('post_id');
            var url            = $('#bt_new_cmt').data('url');
            var tipo           = $('#bt_new_cmt').data('tipo');
            var comentariosnrs = $('#bt_new_cmt').data('comentariosnrs');
            
            if($("#box_new_cmt_retorno").html() == '')
            {
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=getCommentsBox&post_id='+post_id+'&url='+url+'&tipo='+tipo+'&comentariosnrs='+comentariosnrs,'box_new_cmt_retorno');
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id='+post_id,'flgcomment');
            }
            
            $('#box_new_cmt_open').css('right','0');
            $('#bt_new_cmt_orelha').css('display','none');
            $('#bt_new_cmt_orelha_close').css('display','block');
            $('#bt_new_cmt_orelha_close').css('left','-30px');
        }
        else
        {
            var window_width = $(window).width();
            var right        = 'calc(-37% - 15px)';
            
            if(window_width < 1400)
            {
                right = '-330px';
            }
            
            $('#box_new_cmt_open').css('right',right);
            $('#bt_new_cmt_orelha_close').css('display','none');
            $('#bt_new_cmt_orelha').css('display','block');
            $('#bt_new_cmt_orelha').css('left','-43px');
        }
    }
    
    function actPopup(act,tipo)
    {
        if(act == 'fechar')
        {
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome='+tipo+'&valor=1','box_popup');
            $('#box_popup').css('display','none');
            $('#box_popup_big').css('display','none');
            $('#box_popup_mobile').css('display','none');
            blackoverlay();
        }
    }

    function actSmartMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_smart').trigger('classChange');

            if(!$('#smart_filtro_m-act').data('post-left'))
            {
                $('#smart_filtro_m-act').data('post-left',$('#smart_filtro_m-act').css('left'));
            }
            $('#smart_filtro_m-act').css('left','0');
            $('#smart_filtro_m_abre').css('display','none');
            $('#smart_filtro_m_fecha').css('display','block');
            $('#smart_filtro_ud_out').css('display','block');
        }
        else
        {
            $('#smart_filtro_m-act').css('left',$('#smart_filtro_m-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_smart').trigger('classChange');
            $('#smart_filtro_m_abre').css('display','block');
            $('#smart_filtro_m_fecha').css('display','none');
            $('#smart_filtro_ud_out').css('display','none');
        }
        blackoverlay(act);
    }

    
    var scroll_aux2     = 0;
    var loadCheck       = 0;
    var window_width    = $(window).width();

    function fixedOnScroll(id)
    {
        if ($('#' + id).length > 0)
        {
            if( window_width > 1300 )
            {

                var k_distance      = 10;
                var comp_height     = 0;
                var scroll_top      = $(window).scrollTop();
                var height_maior    = false;
                var bottom_pause    = height_document;

                var anchor_top_dist     = $('#' + id).offset().top;
                var item_movel_height   = $('#' + id + ' > *').height();

                if($( ".bottom_pause_post_barra" ).length)
                {
                    bottom_pause =  $( ".bottom_pause_post_barra" ).offset().top - ( k_distance + header_height + item_movel_height + parseInt($( ".bottom_pause_post_barra" ).css('margin-top')));
                }

                //console.log('3 '+item_movel_height+' '+bottom_pause+' '+scroll_top+' '+scroll_aux2+' '+scroll_aux+' conta: '+(bottom_pause - scroll_top));
                
                //console.log('4 '+(bottom_pause - scroll_top) +' --- '+ anchor_top_dist);
                
                if( ( bottom_pause - scroll_top) < 0  ) //chega ao fim
                {
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": 'initial',
                        "position": "fixed",
                        "bottom": "initial",
                        "transition":" 0s",
                        "top": (  (bottom_pause + k_distance + header_height) - scroll_top   )+'px'
                    });
                    if(loadCheck == 0)
                    {
                        loadLazyMateria();
                        
                        loadCheck = 1;
                    }

                }
                else if ((scroll_top + k_distance + header_height ) > anchor_top_dist) //scroll down
                {
                    k_distance = k_distance + header_height;
                    
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": $('#' + id + ' > *').offset().left + 'px',
                        "position": "fixed",
                        "top": (k_distance) + 'px',
                        "bottom": "initial",
                        "transition":" 0.8s all ease"

                    });
                }
                else if (( (scroll_top + k_distance) - comp_height ) > anchor_top_dist) //scroll up
                {
                    k_distance = k_distance + header_height;
                    
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": $('#' + id + ' > *').offset().left + 'px',
                        "position": "fixed",
                        "top": (k_distance)+'px',
                        "bottom": "initial",
                        "transition":" 0.8s all ease"
                    });
                }
                else
                {
                    $('#' + id + ' > *').css({
                        "z-index": "initial",
                        "left": 'initial',
                        "position": "initial",
                        "bottom": 'initial',
                        "top": 'initial'
                    });
                }
            }
            scroll_aux2 = scroll_top;
        }
    }

    function actBtVerMais(e)
    {
        var id = $(e).data('target');
        $('#'+id).show();
        $(e).hide();
    }

    function atcFixedOnScroll()
    {
        fixedOnScroll('out_post_barra');
    }

    
    function actContatoEmpresa(act,tipo)
    {
        if(act && tipo != 0)
        {

            if(tipo == 1)
                $('#empresa_contato_titulo').html('Entre em contato');
            else
                $('#empresa_contato_titulo').html('Solicite um orçamento');

            $('#hidden_tipo').val(tipo);

            $('#blackoverlay').addClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato').fadeIn(400);
            $('#empresa_contato').height($('#empresa_contato'+' > *').outerHeight());
        }
        else
        {
            $('#empresa_contato').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato_titulo').html('');
        }
        blackoverlay(act);
    }

    function actBuscaDesktop(act)
    {
        $('#busca_clique').toggle();
        $('#busca_input').focus();
        $('#blackoverlay').addClass('blackoverlay_busca_desktop').trigger('classChange');
        blackoverlay(act);
    }

    function actBuscaObjeto()
    {
        $('#box_marca_closed').hide();
        $('#box_marca_busca').show();
        $('.box_marca').css('background-color','#f3661a');
        $('#busca_marca_input').focus();
    }

    function actCorrigirTexto(act,e)
    {
        if($('#modal_corrigir_txt').length == 0)
        {
            $(e).data('corrigir_titulo');
            $("html").append('<div class="modal modal-s block corrigir" id="modal_corrigir_txt" ><span class="load-ico" ></span></div>');
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=corrigirTexto&monta=1&corrigir_titulo='+$(e).data('corrigir_titulo')+'¶_email='+$(e).data('para_email'),'modal_corrigir_txt');
        }


        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_corrigir').trigger('classChange');
            $('#modal_corrigir_txt').fadeIn(400);
        }
        else
        {
            $('#modal_corrigir_txt').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_corrigir').trigger('classChange');
        }
        blackoverlay(act);
    }

    function newsletterCad(ele,s)
    {
        var cad_idx = $(ele).data('idx');
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',$('#'+cad_idx+'_form1').serialize()+'&'+$('#'+cad_idx+'_form2').serialize(),$(ele).data('id_ulout'));
    }

    function fixedMenuDiagramado()
    {
        var scrolltop = $(window).scrollTop();

        if(scrolltop >= 350)
            $('.conteudo .out_menu_diagramado').css('top','0');
        else
            $('.conteudo .out_menu_diagramado').css('top','850px');
    };

    $(document).ready(function()
    {

        $(function ()
        {
            $(window).scroll(atcFixedOnScroll);
        });

        $('.disabled').click(function(e)
        {
           e.preventDefault();
        })

        $('.box_hover').mouseenter(function()
        {
            boxHoverSite(2,0,this);
        });

        $(window).scroll(fixedMenu);
        $(window).scroll(fixedMenuDiagramado);
        fixedMenu();
        fixedMenuDiagramado();
        $(".amenu_diagramado").click(function(){scrollPageToID($(this).attr('href').substring(1));});
        $(".bt_ver_mais").click(function(){ actBtVerMais(this); });
        $(".ver_mais_preco_obj").click(function(){ scrollPageToID('precos'); });
        $('#bt_header_busca').click(function(){ $('#busca_input').focus();});
        $('#smart_filtro_ud_dwn').click(function(){$(".smart_filtro").animate({scrollTop: '+=200px'}, 300);});
        $('#smart_filtro_ud_up').click(function(){$(".smart_filtro").animate({scrollTop: '-=200px'}, 300);});
        $('#mobile_busca').click(function(){ $('#mobile_bf').css('display','block');});
        $('#aovivo').click(function(){ actAovivo(); });
        $('#smart_filtro_m_abre').click(function(){ actSmartMobile(true); });
        $('#bt_new_cmt').click(function(){ actAbreComments(true); });
        $('#bt_new_cmt_orelha').click(function(){ actAbreComments(true); });
        $('#bt_new_cmt_orelha_close').click(function(){ actAbreComments(false); });
        $('.commentcall').click(function(){scrollPageToID('boxcomment');});
        $('#busca_clique_open').click(function(){ actBuscaDesktop(true); });
        $('#box_marca_closed').click(function(){ actBuscaObjeto(); });
        $('#smart_filtro_m_fecha').click(function(){ actSmartMobile(false); });
        $('#menumobile').click(function(){ actMenuMobile(true); });
        $('#fechar_menumobile').click(function(){ actMenuMobile(false); });
        $('.fechar_newsletter_big').click(function(){ actPopup('fechar','NEWSBIG'); });
        $('.fechar_youtube_big').click(function(){ actPopup('fechar','YOUTUBEBIG'); });
        $('.fechar_youtube_mobile').click(function(){ actPopup('fechar','YOUTUBEMOBILE'); });
        $('.fechar_rss_big').click(function(){ actPopup('fechar','RSSBIG'); });
        $('.fechar_twitter_big').click(function(){ actPopup('fechar','TWITTERBIG'); });
        $('.fechar_instagram_big').click(function(){ actPopup('fechar','INSTAGRAMBIG'); });
        $('#fechar_newsletter').click(function(){ actPopup('fechar','ONNEWS'); });
        $('#fechar_youtube').click(function(){ actPopup('fechar','YOUTUBEBIG'); });
        $('#popup_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); });
        $("#form_envia").click(function(){ submitFormulario(); });
        $("#mostra_fone").click(function(){ $('#empresa_fone').html(BV($('#empresa_fone').data('info'))); $('#mostra_fone').hide(); });
        $(".empresa_contato").click(function(){ actContatoEmpresa(true,$(this).data('tipo'));});
        $('#empresa_contato_fechar').click(function(){ actContatoEmpresa(false,0) });
        $('.act_corrigir_texto').click(function(){ actCorrigirTexto(true,this) });
        $('#btcarregarcomments_disqus').click(function(){ carregaComentariosDisqus() });
        $('#btcarregarcomments_facebook').click(function(){ carregaComentariosFacebook() });
        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,"1"); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,"2"); });
        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,'1'); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,'2'); });

        $('#blackoverlay').on('classChange',function()
        {
            $('.blackoverlay_mobile').click(function(){ actMenuMobile(false) });
            $('.blackoverlay_smart').click(function(){ actSmartMobile(false) });
            $('.blackoverlay_cont_empresa').click(function(){ actContatoEmpresa(false,0) });
            $('.blackoverlay_corrigir').click(function(){ actCorrigirTexto(false,'') });
            $('.blackoverlay_busca_desktop').click(function(){ actBuscaDesktop(false)});
        });


        $('.accordion_act1 .i-tit').click(function(e)
        {
            if($(this).prop("tagName") != 'A')
            {
                $(this).addClass('click');
                $('.li-wrapper:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });
                $('.i-tit:not(\'.click\')').removeClass('ativo');

                if(!$(this).hasClass('ativo'))
                {
                    $(this).addClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:$(this).find('+ .li-wrapper > .accordion_act1').outerHeight()}, { duration: 400, queue: false });
                }
                else
                {
                    $(this).removeClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:0},400);
                }
                $(this).removeClass('click');
            }
        });

        $('.accordion_act2 .tit_1').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp1:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_id         = 'wrapper_'+$(this).data('wrap0');
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_1').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                $('.tit_1').removeClass('ativo');
            }
            $(this).removeClass('click');
        });

        $('.accordion_act2 .tit_2').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp2:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            var wrapper1_id = 'wrapper_'+$(this).data('wrap0');
            var wrapper2_id = 'wrapper_'+$(this).data('wrap0')+'_'+$(this).data('wrap1');

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();
                var wrapper2_height     = $('#'+wrapper2_id+' > .accordion_act2 > li').length* $('#'+wrapper2_id+' > .accordion_act2 > li').outerHeight();


                $('#'+wrapper1_id).animate({height:wrapper1_height+wrapper2_height}, { duration: 400, queue: false });
                $('#'+wrapper2_id).animate({height:wrapper2_height}, { duration: 400, queue: false });

                $('.tit_2').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                var wrapper1_height = $('#'+wrapper1_id+' > .accordion_act2 > li').length*$('#'+wrapper1_id+' > .accordion_act2 > li > .tit_2').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_2').removeClass('ativo');
            }
            $(this).removeClass('click');
        });
    });

    var lst_carregamento        = 1;
    var txtstatus               = 'ok';
    var html_ico_load_auto_load = '<span id="icoload_autoload" class="wifl p-rel" ><span class="load-ico" ></span></span>';
    function carregaConteudo()
    {
        if($('#auto_load_wrapper').length > 0)
        {
            var scrollPosition      = window.pageYOffset;
            var windowSize          = window.innerHeight;
            var footerHeightTop     = $('#footer').offset().top;

            var stop_load           = document.getElementById('auto_load_wrapper').getAttribute('data-stop-load');

            if((scrollPosition + windowSize + 800) > footerHeightTop && stop_load == '0')
            {
                if(txtstatus == 'ok')
                {
                    $("#auto_load_wrapper").append(html_ico_load_auto_load);
                    txtstatus = 'timeout';
                    $.ajax({
                        type: 'POST',
                        url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
                        data: 'act=autoLoadConteudo&lst_carregamento='+lst_carregamento+'&'+serializeDataAttr($('#auto_load_wrapper')),
                        success: function(html)
                        {
                            $("#auto_load_wrapper").append(html);
                            $("#icoload_autoload").remove();
                            txtstatus = 'ok';
                        }
                    });
                    lst_carregamento++;
                }
            }
        }
    }
    
    
    $(function () {
        $(window).scroll(carregaConteudo);
        carregaConteudo();
    });

    $(window).scroll(function() {
        if ($(this).scrollTop() >= 150) {
            $('#top_page').fadeIn(200);
        } else {
            $('#top_page').fadeOut(200);
        }
    });
    $('#top_page').click(function() {
        $('body,html').animate({
            scrollTop : 0
        }, 500);
    });
    
    


    if ($(".carousel_destaque")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/slick/slick.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/slick/slick.js", function(){
            $('.carousel_destaque').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                pauseOnHover: true,
                autoplaySpeed: 10000
            });
            setTimeout(function(){
                $('.carousel_destaque').removeClass('carregando');;
            }, 1500);
        });
    }

    if ($(".conteudo_galeria")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.js", function(){
            $('.conteudo_galeria').lightSlider({
           item: 3,
           loop:false,
           slideMove:3,
           easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
           speed:600,
           responsive : [
               {
                   breakpoint:800,
                   settings: {
                       item:3,
                       slideMove:1,
                       slideMargin:6,
                     }
               },
               {
                   breakpoint:480,
                   settings: {
                       item:2,
                       slideMove:1
                     }
               }
           ]
            }).lightGallery({

            });
            $('.out_conteudo_galeria').css('display','block');
        });
    }
    
    </script>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = OneSignal || [];
OneSignal.push( function() {
    OneSignal.setDefaultTitle("Oficina da Net");
    OneSignal.setDefaultNotificationUrl("https://www.oficinadanet.com.br");
    var oneSignal_options = {appId: "c28261c1-6765-4517-bc5f-38bbeb9f2ec3"};
    //oneSignal_options['persistNotification'] = false;
    oneSignal_options['autoRegister'] = true;
    oneSignal_options['welcomeNotification'] = { };
    oneSignal_options['welcomeNotification']['title'] = "Oi. Obrigado pela inscrição =)";
    oneSignal_options['welcomeNotification']['message'] = "As melhores novidades avisaremos por aqui ;) - Siga @oficinadanet";
    oneSignal_options['safari_web_id'] = "web.onesignal.auto.2068edc0-2ec7-4d8d-bc37-83913e3acbff";
    OneSignal.init(oneSignal_options);
});

</script>
        <div id="box_news" style=" width:300px; height:200px; display: none; position: fixed; z-index: 9999; top:18%; right:calc(50% - 100px);">
            <div style="width:300px; height:150px; background-color: white; float:left; color:white; text-align: center; font-size:15px; z-index:99999">
                <div class="redes_out">
                    <div style="width:90%; padding:5%; margin-top:-17px; background: #cd201f; color: white; float:left; margin-bottom: 20px;">
                        <strong style="font-size:25px;">OFICINA DA NET NO</strong> <strong style="font-size:35px;">YOUTUBE!</strong><br /><br />
                        Hey, só entre em nosso canal e veja o que produzimos, você vai gostar. 
                        <br /><br />
                        » <span style=' text-decoration:underline; color:white; cursor: pointer' onclick='_gaq.push(["_trackEvent", "popseguir", "youtube", "youtube"]);window.open("http://bit.ly/ontvsing");'>ENTRAR NO CANAL</span> «
                        <br /><br />
                        <span style='font-size:20px; text-decoration:underline; color:white; cursor: pointer' onclick='_gaq.push(["_trackEvent", "popseguir", "youtube", "youtube"]);window.open("https://www.youtube.com/user/OficinaDaNetTV");'><strong style="margin-bottom: 10px">INSCREVA-SE</strong></span>
                        <br />
                        <script src="https://apis.google.com/js/platform.js"></script>
                        <div class="g-ytsubscribe" data-channel="oficinadanettv" data-layout="default" data-count="default"></div>
                        <br />e <span style=' text-decoration:underline; color:white; cursor: pointer' onclick='_gaq.push(["_trackEvent", "popseguir", "youtube", "youtube"]);window.open("http://bit.ly/ontvsing");'>ative o sininho</span> 😉<br>
                   
                        <br /><br /><br />
                        <div style="cursor:pointer; font-size:13px; text-align: right " onclick="fechaBoxOficina()">Não, obrigado</div>
                    </div>
        
                    <style>
                    .newsletter1 {width: 100%; height:222px; float: left; margin: 0; background: url(ROOTIMG2/template/images/sprite1.png) 0 -408px no-repeat; -webkit-box-shadow: 0 0 0 0 rgba(204, 204, 204, 1); -moz-box-shadow:    0 0 0 0 rgba(204, 204, 204, 1); box-shadow: 0 0 0 0 rgba(204, 204, 204, 1)}
                    .newsletter1 b, .newsletter1 em {width: 100%; float: left; text-align: center; color: white}
                    .newsletter1 b {margin-top: 20px; line-height: 24px; font-size: 24px; letter-spacing: -0.065em}
                    .newsletter1 em {margin-top: 14px; line-height: 16px; font-size: 16px; letter-spacing: -0.050em }
                    .newsletter1 .news_campo, .newsletter1 .news_bt_submit {height: 50px; float: left; margin-top: 22px; font-size: 17px; font-style: italic;  border: 0px; background-color: white; -webkit-box-shadow: 2px 2px 0px 0px rgba(36, 8, 65, 1); -moz-box-shadow: 2px 2px 0px 0px rgba(36, 8, 65, 1); box-shadow: 2px 2px 0px 0px rgba(36, 8, 65, 1)}
                    .newsletter1 .news_campo {width: 320px; padding: 0 0 0 10px; margin-left: 30px; color: #484848}
                    .newsletter1 .news_bt_submit {width: 50px; color: #22093e; cursor: pointer}
                    .redes_out {width: 100%; float: left; margin:17px 0 0 0}
                    </style>
                </div>
            </div>
        </div>
        
        <script>
            function abreBoxOficina()
            {
                $('#box_news').css('display','block');
                //blackoverlay(1);
            }
            function fechaBoxOficina()
            {
                $('#box_news').css('display','none');
                actPopup('fechar','YOUTUBEBIG');
                //blackoverlay(0);
            }
            setTimeout('abreBoxOficina();','30000');
        </script>
        <script>
    function actSininho()
    {
        _gaq.push(['_trackEvent', 'sininho', 'sininho', 'sininho']);
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONSININHO&valor=1&tempo=36000','box_sininho');
        setTimeout("document.location = 'https://www.oficinadanet.com.br/novidades'",1000);
    }

    function actAvisoTopo(act)
    {
        switch(act)
        {
            case 'instagram':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONINSTAGRAM&valor=1&tempo=36000','box_instagram');
            break;
            case 'youtube':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONYOUTUBE&valor=1&tempo=36000','box_youtube');
            break;
            case 'user_topo':
                ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONUSERTOPO&valor=1&tempo=36000','box_user_topo');
            break;
        }
    }

    $(document).ready(function()
    {
        $('#sininho').click(function(){ actSininho(); });
        $('#instagram_topo').click(function(){ actAvisoTopo('instagram');});
        $('#youtube_topo').click(function(){ actAvisoTopo('youtube'); });
        $('#user_topo').click(function(){ actAvisoTopo('user_topo'); });
    });

</script>

    <script>
        setTimeout("$('#box_sininho').fadeIn(1000)",1000);
        setTimeout("$('#box_sininho').fadeOut(1000)",5000);
    </script>
    <link rel="stylesheet" href="https://www.oficinadanet.com.br/_template/css/geral.css?v=792">    <div class="player_dynad_tv"></div>
    </body>
</html>