Et galleri med jQuery Fade
Side 1 af 2
Takket være jQuery er det muligt at realisere et meget enkelt billede gallerier af meget attraktive, i denne simple tutorial vil vi se, hvordan du opretter en simpel fade galleri eller et galleri, hvor billederne vises i rækkefølge (ved siden af hinanden) snarere end at bruge en fade effekt behagelig.
For at opnå vores gallerier MÅ IKKE bruge nogen plugins, men vi vil begrænse os til en fornuftig udnyttelse af værktøjer, der giver jQuery.
Vi ser et eksempel på, hvad vi har til hensigt at:
Vi analyserer HTML-koden:
<html>
<head>
En slide <title> galleri med 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>
Vi i kroppen på den side, som vi tildeler en div id fadegallery, kalder vi overskriften og eksterne typografiark, jQuery bibliotek og filen fadegallery.js som følger koden:
Funktionen viser (x) {$ ("# img" + x) fadeIn ("slow");.}
$ (Document). Ready
(
function ()
{
$ ("# Fadegallery"). Efter ("
");
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));
}
}
);
Dens funktion er enkel: Først skal vi skabe en parameteriseret funktion, der kalder funktionen af jQuery fadeIn til visning (med fading) af de forskellige DIV, vi bygger dynamisk i den cyklus, som trækker alle de elementer i et array, som så igen indeholder billeder og sidelayout i HTML.
Inde i løkken, husker også viser funktionen () med en timer som kører fra en anden og en yderligere stigning på sekunder ved hvert trin med henblik på netop at skabe effekten sekvens.
Bemærk erklæring:
$ ("# Fadegallery"). Efter ("
");
indsættes i begyndelsen af funktionen (): Dette er designet til at rulle indhold placeret under DIV til at huse vores galleri (i mangel af overlappende elementer kan medføre ubehagelige, fordi de flyder ejendom i CSS Vi bruger det).
 |
CSS (Kursus)
Web Design og tilgængelighed i henhold til W3C CSS og XHTML. Fra 29 €. |
 |
HTML (Kursus)
Det markup sprog til nettet fra 29 €. |
 |
Javascript (Kursus)
Komplet guide til klient-side scripting. Fra 39 €. |