Galeria z jQuery Fade
Strona 1 z 2
Dzięki jQuery jest możliwe do realizacji bardzo proste galerie zdjęć z bardzo atrakcyjne, w tym prostym tutorialu zobaczymy jak tworzenie prostej galerii znikną lub galerii, gdzie obrazy pojawiają się w sekwencji (obok siebie), a nie za pomocą efektu zanikania przyjemne.
Aby osiągnąć nasze galerie NIE używać żadnych wtyczek, ale ograniczymy się do mądrego korzystania z narzędzi, które zapewnia jQuery.
Widzimy podgląd tego, co chcemy:
Analizujemy kod HTML:
<html>
<head>
Galeria <title> slajdów z 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>
Jesteśmy w treści strony, do której możemy przypisać fadegallery ID DIV, nazywamy nagłówkiem i zewnętrzny arkusz stylów, biblioteki jQuery i fadegallery.js pliku, który następuje kod:
pokazać (x) {$ ("# img" + x) fadeIn ("slow");.}
$ (Document). Ready
(
function ()
{
$ ("# Fadegallery"). Po ("
");
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));
}
}
);
Jego działanie jest proste: Najpierw tworzymy sparametryzowane funkcję, która wywołuje funkcję jQuery fadeIn do oglądania (z blaknięcie) różnych DIV których budujemy dynamicznie w cyklu, który wyodrębnia wszystkie elementy w tablicy, która z kolei, zawiera zdjęcia i układów stron w HTML.
Wewnątrz pętli przypominają również wyświetla function () z licznikiem czasu pracy z drugim i dalszy wzrost sekund na każdym kroku w celu właśnie do tworzenia sekwencji efekt.
Uwaga oświadczenie:
$ ("# Fadegallery"). Po ("
");
wstawiane na początku funkcji (): Ten jest przeznaczony do przewijania treści znajduje się pod DIV do domu naszej galerii (w przypadku braku elementów nakładających może powodować nieprzyjemne ze względu na właściwość float w CSS Używamy tego).
 |
CSS (Kurs)
Web Design i dostępności zgodnie z W3C CSS i XHTML. Począwszy od 29 €. |
 |
HTML (Kurs)
Język znaczników dla sieci od 29 €. |
 |
Javascript (Kurs)
Kompletny przewodnik po stronie klienta skryptów. Od 39 €. |