Background fullscreen com ou sem slideshow, plugin jquery

UPDATE: Lancei uma nova versão deste plugin, portanto o que aqui está escrito poderá não funcionar ou conter alguns erros. Para ver a nova versão siga este link: http://wp.me/p2uUrZ-2u.

Desta vez vou postar aqui um plugin para jquery que desenvolvi para utilizar nos meus projectos pessoais.

Este plugin dá-nos a possibilidade de agarrar em qualquer imagem, e de a definir como fundo para o nosso website sem existir qualquer tipo de torção da imagem, podemos também definir um array de imagens que o plugin irá percorrer e efectuar um slideshow no background com as mesmas, para alem disto, cada imagem pode estar ligada a um <div> o qual será apresentado quando a imagem correspondente estiver activa.

                        

Antes de começar a demonstrar como se utiliza, ficam aqui quais as configurações que por agora podemos dar ao nosso plugin:

  • Definir quais os backgrounds a utilizar – bgSet(array  string backgrounds, boolean slideshow)
  • Tempo entre imagens – setTimer(int tempo) – 4000ms por defeito
  • Tempo de duração do efeito de transacção – setTrans(int tempo) – 1000 por defeito
  • Para o slideshow – stopSlide()

Exemplo de utilização

na sua página faça o load do plugin, este pode ser feito no <head> da seguinte maneira:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="background.js" type="text/javascript"></script>
</head>

Background com slideshow

Seguidamente apenas precisamos de chamar a função bgSet() com os parametros desejados, por exemplo:

<body>
    <script type="text/javascript">
         bgSet(["background1.png","background2.png"],true);
    </script>
</body>

Background sem slideshow

Para termos apenas uma imagem sem slideshow, podemos fazer o seguinte código:

<body>
    <script type="text/javascript">
        bgSet(["background1.png"],false);
    </script>
</body>

Tempo da imagem e tempo de transacção

Se não gostar do tempo entre as imagens, ou do tempo do que demora o efeito de troca entre elas, poderá definir desta maneira:

<body>
    <script type="text/javascript">
        setTimer(5000);
        setTrans(2000);
        bgSet(["background1.png","background2.png"],true);
    </script>
</body>

Utilizar um <div> para mostrar texto

Agora vamos utilizar um <div> para mostrar algum texto quando a imagem é apresentada, esta funcionalidade serve para quando é efectuado o resize ao background não se perca qualidade no texto, assim o seu tamanho será sempre o mesmo e o texto será sempre visivel.

Neste exemplo será mostrado o texto apenas na primeira imagem, pois o nome ID do <div> é imagem0, se quiséssemos para a segunda imagem seria imagem1, para a terceira imagem éra imagem2 e por ai em diante.

<body>
    <script type="text/javascript">
        bgSet(["background1.png","background2.png"],true);
    </script>
    <div id="imagem0" style="display:none;position:absolute;left:0px;top:0px;background-color:black;color:white;">
        Texto exemplo
    </div>
</body>

Parar o slideshow

Exemplo:

<a href="javascript:" onClick="stopSlide();">Parar slide</a>

Continuar o slideshow

Exemplo:

<a href="javascript:" onClick="startSlide();">Continuar slide</a>

Se gostaram ou acham útil este plugin, deixem um comentário.

Conforme vou efectuando mais trabalhos este plugin poderá vir a evoluir.

Mas de momento serve apenas para perder a dor de cabeça que advém da criação de um background em fullscreen que não destorça a imagem 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s