Também estamos lá
Facebook Twitter Linkedin Pinterest

Um recurso muito interessante que vem sendo utilizado ultimamente nos site, é o recurso de Fullscreem para a exibição de vídeo e imagens. O que é mais interessante, é que este recurso pode ser aplicado, não só para vídeos e imagens. Um formulário ou dashboard também podem ser exibidos em Fullscreem.

Neste artigo, vou ensinar com aplicar o Fullscreem em um elemento específico da página. Vamos criar uma página simples que utiliza Javascript para exibir uma imagem em Fullscreem.

O Fullscreem é o modo de exibição dos navegadores onde o site é exibido em toda e tela, sem a modula do navegador. Esse modo de visualização, pode ser ativado pressionando-se a tecla F11, isso por padrão para qualquer site. Este recurso foi implementado pela Fullscreen API do HTML5, e pode controlada pelo Javascript. Não vou entrar em detalhes API pois o objetivo é um artigo objetivo e prático. Então se você quiser saber um pouco mais sobre a HTML5 Fullscreen API, é só pesquisar na web que já conta com vários artigos sobre o assunto.

HTML

Vamos começar pelo HTML. É um HTML muito simples onde vamos apenas exibir uma imagem na página como um thumbnail.

Temos duas DIVs. Uma é a DIV fullScreemTools. Esta é uma barra localizada na parte superior da tela onde poderão ser inseridos botões para fechar e outras operações. Neste exemplo, eu preferi que esta DIV fosse somente um botão transparente com um “X”, localizado na parte superior direita da tela, que quando clicado, encerra o modo fullscreen. Para isso, adicionei a classe CSS botao à DIV. Para ver a DIV como barra, basta retirar esta classe.

A outra, é a DIV container. Esta DIV será o elemento para o qual vamos implementar o recurso de ativação do modo de exibição fullscreen. A DIV contém a barra de ferramentas/botão fullScreemTools e a imagem. Então quando o modo fullscreen for ativado para a DIV container, tudo dentro dela será exibido em tela cheia.

Merece atenção especial, o atributo do tag body que define a função que deverá ser executada no evento onload do documento.  Esta é a função principal do nosso código Javascript e nela que serão incluído todo o nosso script. No final do bloco sobre Javascript, entrarei em detalhes sobre esta função.

CSS

No exemplo eu optei por manter o CSS e o Javascript no mesmo arquivo HTML embutindo tudo dentro do código HEAD da página, mas nada impede que você use arquivos separados.

A folha de estilo para este projeto não tem nenhum mistério, então não vou me aprofundar nela. O único detalhe que merece atenção, é a regra para o elemento #container, onde os valores das propriedades top, left, bottom e right foram ajustados para 0 (zero). Vamos detalhar isto mais a frente, na seção que fala sobre o Javascript.

 

JAVASCRIPT

Agora vamos ao mais importante. O código que realmente faz a coisa funcionar, o Javascript. Vou dividir o código em parte mas ele deve ficar em um único bloco <script>.

 

No trecho acima declaramos os nome das variáveis e funções do script.

Na primeira linha, usei a diretiva use strict. Isso vai permitir melhorar a qualidade do nosso código JavaScript. Quem quiser saber mais sobre use strict, pode acessar o site escola do W3C.

Nas linhas seguintes, são declarados os nomes das variáveis e funções utilizadas no script.

Funções principais

São duas as funções principais do projeto. As funções enterFullScreen e exitFullScrren. Ambas utilizam a HTML5 Full-Screen API. Vamos a elas.

Como a API não é totalmente compatível com todas versões de navegadores, as duas funções utilizam de métodos de compatibilidade MS, Moz e Webkit.

Funções secundárias

Só temos uma função secundária. É a função isFullScreen.

Esta função utiliza o método fullScreen da API para determinar se o modo fullscreen está ativado ou não.

Mais Javascript

Além das funções principais e secundárias, nosso Javascript ainda conta coma mais algumas linhas código que vamos descrever agora.

O fragmento acima, define os valores das variáveis do sistema. O próprio código tem a descrição de cada uma delas, por isso não vou me aprofundar.

Chegou a hora de definir os event listenners, ou censores de eventos (não encontrei uma tradução melhor), para os elementos trigger e closer.

No fragmento acima, fazemos a chamada a duas funções. Uma para ativar e outra para desativar o modo fullscreen. São as funções enterFullScreen e exitFullScreen.

A função enterFullScreen

Esta função recebe dois parâmetros. O primeiro é o identificador do elemento que deve ser exibido em fullscreen contido na variável pública elem, declarada no início do script e cujo o valor é definido na função docReady que será detalhada mais a frente. O segundo parâmetro é uma função de callback que no caso, altera a propriedade CSS display de fullScreemTools para block, o que faz com ele seja exibida, como pode ser visto na definição dos event listenner de trigger.

Na função enterFullScreen, primeiro nós alteramos a propriedade CSS position do elemento para absolute. Isso possibilita a configuração das propriedades top, left, bottom e right para 0 (zero), fazendo com que o elemento, no caso a DIV container, ocupe 100% da tela.  Este método funciona melhor do que definir o valor das propriedades width e height para 100%.

Não basta apenas ativar o modo fullscreen, pois isto apenas coloca a janela do navegador em tela cheia. Também é necessário ajustar o CSS da DIV container para que a DIV ocupe toda a janela.

Em seguida, ativamos o modo fullscreen e depois fazemos a chamada a função de callback já mencionada acima.

A função exitFullScreen

A função exitFullScreen, basicamente reverte o que foi feito na função enterFullScreen.

Na primeira linha, revertemos a propriedade CSS position do elemento DIV container para o seu valor inicial ou padrão. Depois, desativamos o modo fullscreen e em seguida, fazemos a chamada da função de callback, que como pode ser visto no event listener de closer, altera a propriedade CSS display de fullScreemTools para none, o que oculta o elemento fullScreemTools.

Finalizando

Agora chegou a hora de juntar todas as parte do quebra-cabeças. Como mencionada no início deste artigo, na parte referente ao HTML, todas os fragmentos de código Javascript, exceto o primeiro fragmento de declaração de variáveis, devem estar dentro da função docReady. A chamada desta função será feita no tag body do documento através do atributo onload. Isto fará com que a função seja executada somente depois que todos os elementos do documento forem carregados pelo navegador.

Segue o código completo da página com o CSS e o Javascript embutidos no HTML, dentro do tag head.

Bom está ai a página completa. Espero que sirva bem para esclarecer as dúvidas de quem precisa implementar este recurso em um projeto.

Para qualquer dúvida, sugestão ou colaboração, deixe no seu comentário.

 

Jorge Rodrigues

Jorge Rodrigues

Webmaster e desenvolvedor web full-stack. Self-employed na Concepção Web. Técnico em processamento de dados, com especialização em Programação de Computadores, Redes Locais e em Protocolo e Cabeamento Estruturada de Redes Locais pela Universidade Estácio de Sá.

More Posts