Et galleri med jQuery Fade
Side 1 av 2
Med jQuery kan du lage en veldig enkel bilde gallerier av svært attraktive, i dette enkle opplæringen vil vi se hvordan å lage en enkel fade galleri eller et galleri hvor bildene vises i rekkefølge (ved siden av hverandre) heller enn å bruke en fade effekt behagelig.
For å oppnå våre gallerier IKKE bruke noen plugins, men vi vil begrense oss til en dyktig bruk av verktøy som jQuery gir.
Vi ser en forhåndsvisning av hva vi har til hensikt å:
Vi analyserer HTML-koden:
<html>
<head>
<title> Et lysbilde 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å siden som vi tilordne en DIV ID fadegallery, mens overskriften vi kaller eksterne stilark, den jQuery biblioteket og filen som fadegallery.js følgende kode:
Funksjonen show (x) {$ ("img #" + x) fadeIn ("slow");.}
$ (Document). Ready
(
funksjon ()
{
$ ("# Fadegallery"). Etter ("
");
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));
}
}
);
Driften er enkel: Først lager vi en funksjon som kaller parametriseres funksjon av jQuery fadeIn for visning (med fading) av forskjellige DIV vi dynamisk bygge sykler som trekker ut alle elementene i en matrise som i sin tur inneholder bilder og sideoppsett til HTML.
Inne i loop, viser oss også kalle funksjonen () med en tidtaker som starter og en annen økning av ytterligere andre for hvert trinn for å nettopp skape effekten av sekvensen.
Merk uttalelsen:
$ ("# Fadegallery"). Etter ("
");
satt inn på begynnelsen av funksjonen (): Dette er laget for å skyve alt innhold nederst div til huset vårt galleri (for mangel på overlapping kan føre til ubehagelige elementer grunn flottøren eiendom i CSS Vi bruker det).
 |
CSS (Course)
Web Design og tilgjengelighet i henhold til W3C CSS og XHTML. Starter fra 29 €. |
 |
HTML (Course)
Kodespråket for Web fra 29 €. |
 |
JavaScript (Course)
Komplett guide til klient-side scripting. Starter fra 39 €. |