A Gallery with jQuery Fade
Page 1 of 2
Thanks to jQuery it is possible to realize a very simple image galleries of very attractive, in this simple tutorial we will see how to create a simple fade gallery or a gallery where images appear in sequence (next to each other) rather than using a fade effect pleasant.
To achieve our galleries DO NOT use any plugins, but we will limit ourselves to a wise use of tools that provides jQuery.
We see a preview of what we intend to:
We analyze the HTML code:
<html>
<head>
A slide <title> gallery with 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>
We in the body of the page to which we assign a DIV ID fadegallery, we call the header and external style sheet, the jQuery library and the file fadegallery.js of which follows the code:
function show (x) {$ ("# img" + x). fadeIn ("slow");}
$ (Document). Ready
(
function ()
{
$ ("# Fadegallery"). After ("
");
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));
}
}
);
Its operation is simple: First we create a parameterized function that calls the function of jQuery fadeIn for viewing (with fading) of the various DIV which we build dynamically in the cycle that extracts all the items in an array which, in turn, contains images and page layouts in HTML.
Inside the loop, also recall the function displays () with a timer running from a second and a further increase of seconds at each step in order, precisely, to create the effect sequence.
Note the statement:
$ ("# Fadegallery"). After ("
");
inserted at the beginning of the function (): This is designed to scroll any content located under the DIV to house our gallery (in the absence of overlapping elements may cause unpleasant because of the float property in CSS We use that).
 |
CSS (Course)
Web Design and Accessibility according to W3C CSS and XHTML. Starting from 29 €. |
 |
HTML (Course)
The markup language for the Web from 29 €. |
 |
Javascript (Course)
Complete guide to client-side scripting. From 39 €. |