Een galerij met jQuery Fade
Pagina 1 van 2
Met dank aan jQuery is het mogelijk om een zeer eenvoudige fotogalerijen van de zeer aantrekkelijk te realiseren, in deze eenvoudige tutorial zullen we zien hoe een eenvoudige vervagen galerie of een galerie waar afbeeldingen verschijnen in volgorde (naast elkaar) te creëren in plaats van een fade-effect aangenaam.
Om onze galleries Gebruik NOOIT plug-ins, maar we zullen ons beperken tot een verstandig gebruik van de tools die jQuery biedt.
We zien een voorbeeld van wat we van plan om:
We analyseren de HTML-code:
<html>
<head>
Een glijbaan <title> galerie met 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>
Wij in het lichaam van de pagina waar we wijzen een DIV ID fadegallery, noemen we de header en de externe style sheet, de jQuery bibliotheek en het bestand fadegallery.js van die volgt op de code:
functie show (x) {$ ("# img" + x) FadeIn ("slow");.}
$ (Document). Ready
(
function ()
{
$ ("# Fadegallery"). Na ("
");
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));
}
}
);
De werking is simpel: Eerst maken we een geparametriseerde functie die de functie van jQuery FadeIn voor het bekijken van gesprekken (met vervagende) van de verschillende DIV die dynamisch we bouwen in de cyclus die alle items extracten in een reeks die op hun beurt, bevat afbeeldingen en pagina-lay-outs in HTML.
Binnen de lus ook herinneren aan de functie geeft () met een timer loopt van een seconde en een verdere toename van seconden bij elke stap in orde, juist, om het effect volgorde te creëren.
Let op de uitspraak:
$ ("# Fadegallery"). Na ("
");
ingevoegd aan het begin van de functie (): Deze is ontworpen om de inhoud onder de DIV om onze gallery huis scrollen (bij afwezigheid van overlappende elementen kan onaangename veroorzaken omdat van de vlotter onroerend goed in CSS We maken gebruik van dat).
 |
CSS (Cursus)
Web Design en toegankelijkheid volgens de W3C CSS en XHTML. Vanaf 29 €. |
 |
HTML (Cursus)
De opmaaktaal voor het web vanaf 29 €. |
 |
Javascript (Cursus)
Complete gids voor client-side scripting. Van 39 €. |