Une galerie avec Fade jQuery
Page 1 sur 2
Merci à jQuery, il est possible de réaliser une des galeries d'images très simple de très attrayant, dans ce tutoriel nous allons voir comment créer une galerie fondu simple ou une galerie où les images apparaissent dans l'ordre (à côté de l'autre) plutôt que d'utiliser un effet de fondu agréable.
Pour atteindre nos galeries NE PAS utiliser des greffons, mais nous allons nous limiter à une utilisation rationnelle des outils que fournit jQuery.
Nous voyons un aperçu de ce que nous voulons atteindre:
Nous analysons le code HTML:
<html>
<head>
Une galerie <title> glisser avec 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>
Nous dans le corps de la page à laquelle nous attribuons une fadegallery ID DIV, nous appelons l'en-tête et la feuille de style externe, la bibliothèque jQuery et le fichier de fadegallery.js qui suit le code:
montrent fonction (x) {$ ("# img" + x) fadeIn ("lent");.}
$ (Document). Prêt
(
function ()
{
$ ("# Fadegallery»). Après ("
»);
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));
}
}
);
Son fonctionnement est simple: d'abord, nous créons une fonction paramétrée qui appelle la fonction d'fadeIn jQuery pour la visualisation (avec fading) de la DIV diverses laquelle nous construisons de manière dynamique dans le cycle que les extraits de tous les éléments d'un tableau qui, à son tour, contient des images et mises en page en HTML.
Dans la boucle, rappelle également l'affichage des fonctions () avec une minuterie allant de une seconde et une nouvelle augmentation de secondes à chaque étape afin, précisément, pour créer la séquence d'effet.
Notez la déclaration:
$ ("# Fadegallery»). Après ("
»);
inséré au début de la fonction (): Ceci est conçu pour faire défiler tout contenu situé sous la DIV à la maison de notre galerie (en l'absence d'éléments qui se chevauchent peuvent causer désagréables à cause de la propriété float en CSS Nous utilisons cela).
 |
CSS (cours)
Web Design et accessibilité selon le W3C CSS et XHTML. A partir de 29 €. |
 |
HTML (Cours)
Le langage de balisage pour le Web à partir de 29 €. |
 |
Javascript (Cours)
Guide complet pour les scripts côté client. A partir de 39 €. |