Ett galleri med jQuery Fade
Sidan 1 av 2
Tack vare jQuery är det möjligt att realisera en mycket enkel bildgallerier av mycket attraktiva, i denna enkla guide kommer vi att se hur man skapar en enkel fade galleri eller ett galleri där bilderna visas i följd (bredvid varandra) snarare än att använda en fade effekt behaglig.
För att uppnå våra gallerier Använd INTE någon plugins, men vi kommer att begränsa oss till en klok användning av verktyg som ger jQuery.
Vi ser en förhandsvisning av vad vi tänker:
Vi analyserar HTML-kod:
<html>
<head>
En bild <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 sida som vi tilldelar en fadegallery div id, vi kallar huvudet och extern formatmall, den jQuery biblioteket och fadegallery.js fil som följer koden:
Funktionen visar (x) {$ ("# img" + x) fadeIn ("långsam");.}
$ (Dokument). 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));
}
}
);
Dess funktion är enkel: Först skapar vi en parametriserad funktion som anropar funktionen för jQuery fadeIn för visning (med blekning) av de olika DIV som vi bygger dynamiskt i cykeln som utvinner alla objekt i en array som i sin tur, innehåller bilder och sidlayouter i HTML.
Inne i loopen, även ihåg visar funktionen () med en timer som går från en andra och en ytterligare ökning av några sekunder vid varje steg i syfte just att skapa effekten sekvensen.
Notera uttalande:
$ ("# Fadegallery"). Efter ("
");
infogas i början av funktionen (): Detta är tänkt att rulla något innehåll finns under DIV till hus vårt galleri (i avsaknad av överlappande element kan orsaka obehaglig på grund av den flyta egendom i CSS-Vi använder det).
 |
CSS (kurs)
Webbdesign och tillgänglighet enligt W3C CSS och XHTML. Från 29 €. |
 |
HTML (kurs)
Det märkspråk för webben från 29 €. |
 |
Javascript (Kurs)
Komplett guide till klient-side-scripting. Från 39 €. |