Galerija sa jQuery Fade
Stranica 1 od 2
Zahvaljujući jQuery je moguće ostvariti vrlo jednostavno galerije slika vrlo atraktivnih, u ovom jednostavnom tutorial ćemo vidjeti kako stvoriti jednostavan izblijediti galeriju ili galeriju gdje se slike pojavljuju u nizu (jedna pored druge), nego pomoću uvenuti učinak ugodan.
Da bi se postigao naše galerije Nemojte koristiti dodataka, ali ćemo se ograničiti na mudro korištenje alata koji pruža jQuery.
Vidimo pregled onoga što želimo:
Mi analiziramo HTML kod:
<html>
<head>
Galerija slajd <title> sa 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>
Mi smo u tijelu stranice na koju ćemo dodijeliti fadegallery DIV ID, poziv zaglavlje i external style sheet, jQuery knjižnice i datoteku fadegallery.js koji slijedi kod:
funkcija show (x) {$ ("# IMG" + x) fadeIn ("spori");.}
$ (Dokument). Ready
(
funkcija ()
{
$ ("# Fadegallery"). Nakon ("
");
var img = new Array ();
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
img [0] = "pippo.jpg";
img [1] = "pluto.jpg";
img [2] = "paperino.jpg";
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
var i = 0;
za (i = 0; i <img.length; i + +)
{
$ ("# Fadegallery"). Dodaj ("+ I + <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ div>") ;
window.setTimeout ("show (" + I + ")", ((i + 1) * 1000));
}
}
);
Njegov rad je jednostavan: Prvo mi stvaramo parametrizirana funkciju koja poziva funkciju jQuery fadeIn za gledanje (s feding) različitih DIV koje gradimo dinamički u ciklusu da ekstrakt svih stavki u polju koje se, pak, sadrži slike i izgleda stranica u HTML-u.
Unutar petlje, također podsjećaju funkcija prikazuje () s vremena izvodi iz druge i daljnje povećanje sekundi na svakom koraku kako bi, upravo, stvoriti efekt slijed.
Napomena izjavu:
$ ("# Fadegallery"). Nakon ("
");
umetnuta na početku funkcije (): Ovaj je dizajniran za pomicanje bilo koji sadržaj koji se nalazi ispod DIV do kuće našoj galeriji (u nedostatku preklapanja elemenata može uzrokovati neugodan, jer plutaju imovine u CSS Mi koristimo da).
 |
CSS (tečaj)
Web dizajn i dostupnost u skladu s W3C CSS i XHTML. Počevši od 29 €. |
 |
HTML (tečaj)
Označni jezik za web od 29 €. |
 |
Javascript (tečaj)
Kompletan vodič za client-side skriptiranje. Od 39 €. |