A Galeria de fade com jQuery
Página 1 de 2
Com jQuery você pode criar uma galeria de imagens muito simples de muito atraente, neste simples tutorial veremos como criar uma galeria de desaparecer simples ou uma galeria onde as imagens aparecem em sequência (ao lado do outro) em vez de usar um efeito de fade agradável.
Para alcançar nossas galerias NÃO usar qualquer plugins, mas vamos nos limitar a um uso hábil das ferramentas que fornece jQuery.
Vemos uma prévia do que pretendemos:
Analisamos o código HTML:
<html>
<head>
<title> galeria Um slide com jQuery </ title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript" src="fadegallery.js"> </ script>
</ Head>
<body>
<div id="fadegallery"> </ div>
</ BODY>
</ Html>
Nós no corpo da página para que atribuir um ID fadegallery DIV, enquanto o cabeçalho que chamamos de folha de estilo externa, a biblioteca jQuery eo arquivo dos quais fadegallery.js seguinte código:
apresentam função (x) {$ ("# img" + x) fadeIn ("slow");.}
$ (Documento). Pronto
(
function ()
{
$ ("# Fadegallery"). After ("
");
var img = new Array ();
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
img [0] = "pippo.jpg";
img [1] = "pluto.jpg";
img [2] = "paperino.jpg";
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
var i = 0;
for (i = 0; i <img.length; i + +)
{
$ ("# Fadegallery"). Append ("i + + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ div>") ;
window.setTimeout ("show (" + i + ")", ((i + 1) * 1000));
}
}
);
Seu funcionamento é simples: Primeiro vamos criar uma função que chama a função com parâmetros de fadeIn jQuery para visualização (com fading) de diferentes DIV nós construir dinamicamente ciclo que extrai todos os itens em uma matriz que, por sua vez, contém imagens e layouts de páginas em HTML.
Dentro do loop, também nos mostra chamar a função () com um temporizador que inicia e um segundo aumento de um segundo adicional para cada passo, a fim de precisamente criar o efeito de seqüência.
Observe a seguinte afirmação:
$ ("# Fadegallery"). After ("
");
inserido no início da função (): Esta é projetado para deslizar qualquer conteúdo localizado na parte inferior div para a casa de nossa galeria (por falta de sobreposição pode causar elementos desagradáveis devido à propriedade float em CSS Vamos utilizá-lo).
 |
CSS (Curso)
Web Design e acessibilidade de acordo com a W3C CSS e XHTML. A partir de 29 €. |
 |
HTML (Curso)
A linguagem de marcação para a Web a partir de 29 €. |
 |
JavaScript (Curso)
Completo guia para client-side scripting. A partir de 39 €. |