Napravite dijaprojekciju pomoću javascript predložaka. Foto laboratorij. Slidr kontrole

Pregled programa za izradu dijaprojekcija Izrada dijaprojekcije za web stranicu

Prilikom izrade dijaprojekcije za objavu na web stranici, najbolje je koristiti gotova softverska rješenja. Po mom mišljenju, najbolja i najlakša opcija je korištenje jQueryja, posebne besplatne biblioteke skripti (mali JavaScript programi). Prethodni članci već su govorili o ovom prekrasnom alatu za web razvoj. Za primjer pogledajte članak Galerija fotografija jQuery- jednostavno i lijepo! . Sada upotrijebimo jQuery za izradu slide showa na stranici, tzv.

Da bismo to učinili, koristit ćemo dodatak Slides, koji je kreirao programer Nathan Searles, tehnički direktor dizajnerskog studija "The Brigade" u Portlandu, Oregon, SAD. Još jedan njegov razvoj opisan je u članku Fotogalerija za online trgovinu.

Dodatak Slides jednostavan je za instalaciju, ima nekoliko opcija za promjenu slika u dijaprojekciji i često se koristi za zaglavlje stranice. Primjer kako ovaj klizač radi sa zadanim postavkama prikazan je na slici:

Instaliranje dijaprojekcije Slajdovi

Kao i uvijek, prvo stvorite mapu skripti na web mjestu. Zatim morate preuzeti arhivu i raspakirati je u stvorenu mapu. Sadržat će dvije skripte jquery-1.8.3.min.js i jquery.cycle.all.min.js.

Dalje, u naslov stranice unutar oznake... umećemo sljedeće retke, koji označavaju put do skripti i mali javascript koji definira parametre dijaprojekcije:

$(".slideshow").ciklus((
fx: "izblijediti"
});
});

.prezentacija(
širina: 200px;
visina: 135px;
margina: auto;
}

Kao što možete vidjeti, postoji i jednostavno CSS pravilo u kojem trebate odrediti veličinu prozora za slike buduće dijaprojekcije (širina - visina). Naravno, sve slike moraju biti iste veličine. Ako želite, možete proširiti CSS opcije dodavanjem, na primjer, obruba, pozadine, ispune i drugih elemenata za vaše slideshow slike. U tom slučaju morate navesti ukupnu veličinu, odnosno sliku plus uvlake i obrube duž duljine i širine koje ste postavili.

Važna nota: Ako vaša stranica koristi nekoliko jQuery dodataka, tada je prikladnije premjestiti datoteku jquery.js (po mogućnosti najnoviju verziju) u korijensku mapu kako je ne biste preuzimali nekoliko puta. U tom će slučaju linija za pristup izgledati jednako za sve dodatke. Konkretno, za naš primjer ispada ovako:

Ne preporuča se koristiti više različitih verzija jQueryja na istoj stranici kako ne bi bile u međusobnom sukobu. Istodobno provjerite rade li dodaci s instaliranom verzijom jQueryja jer nisu sve verzije međusobno zamjenjive.

Zadnji korak je postavljanje slika na stranicu. I ovdje je sve jednostavno. Postavite slike unutar oznake ili druge oznake koja vam omogućuje postavljanje širine i visine i odredite njen class="slideshow" . Za naš primjer, HTML kôd za klizač izgleda ovako:

U ovom je trenutku izrada dijaprojekcije gotovo dovršena i možete je pogledati otvaranjem stranice u pregledniku.

Postavljanje opcija dijaprojekcije Slajdovi

U stvorenoj dijaprojekciji možete postaviti različite vrste prijelaza između okvira promjenom javascripta postavljenog u zaglavlju stranice. Osim toga, zamjenom retka sync:false u skripti sa sync:true možete ukloniti razmak prilikom mijenjanja slika.

Trajanje prikazivanja slika kontrolira se parametrom timeout, a brzina parametrom brzine. Kao primjer, ovdje je nekoliko uobičajenih opcija dijaprojekcije i odgovarajućih skripti koje bi trebalo umetnuti u zaglavlje stranice.

1. Raspuštanje (naš primjer): $(dokument).ready(funkcija() ( $(".slideshow").ciklus(( fx: "fade", //vrsta prijelaza brzina: 1000 , //brzina promjene slike timeout: 1000 //trajanje okvira }); });
2. Miješanje: $(dokument).ready(funkcija() ( $(".slideshow").ciklus(( fx: "nasumično", sinkronizacija: lažno, brzina: 500 vrijeme čekanja: 5000 }); });
3. Zumiranje: $(dokument).ready(funkcija() ( $(".slideshow").ciklus(( fx: "zumiranje", sinkronizacija: netočno }); });
4. Okretanje po osi X ili Y: $(dokument).ready(funkcija() ( $(".slideshow").ciklus(( fx: "curtainX", // za rotaciju duž Y osi - curtainY sinkronizacija: netočno }); });
5. Sažmi okomito: $(dokument).ready(funkcija() ( $(".slideshow").ciklus(( fx: "turnDown", // smjer se može podesiti okret gore, okret lijevo, okret desno sinkronizacija: istina }); });
6. Pomicanje (pomak): $(dokument).ready(funkcija() ( $(".slideshow").ciklus(( fx:"scrollDown", // smjer pomaka može se postaviti scrollUp, scrollLeft, scrollRight sinkronizacija: istina }); });
7. Blijedi udesno: $(dokument).ready(funkcija() ( $(".slideshow").ciklus(( fx: "navlaka }); });

Ponekad morate postaviti nekoliko opcija dijaprojekcije na jednu stranicu web mjesta, kao što je učinjeno u ovom članku. Da biste to učinili, trebate samo navesti različite klase za svaku opciju u retku $(".slideshow").cycle(( (pogledajte kod u gornjoj tablici) i ne zaboravite navesti veličine prozora za svaku klasu u CSS-u.

Ako slajdovi sadrže samo slike, možete malo promijeniti strukturu:

Prethodna Sljedeća

Ne zaboravite dodati značajnu vrijednost atributu alt.

Da biste koristili veze stranica, možete učiniti sljedeće:

... ... ... 1 2 3

Prethodna Sljedeća 1 2 3

Obratite pozornost na korištenje atributa "podataka" - neke dijaprojekcije mogu umetnuti slike kao pozadinu, a ti će se atributi koristiti u skripti kao mjesta za povezivanje pozadine i slajda.

Korištenje popisa Semantički ispravan pristup bio bi koristiti stavke popisa kao slajdove. U ovom slučaju struktura će biti sljedeća:

Ako je redoslijed slajdova dobro definiran (na primjer, u prezentaciji), možete koristiti numerirane popise

CSS Počnimo sa sljedećom strukturom:

Prethodna Sljedeća

Jer Budući da će slideshow teći s desna na lijevo, vanjski spremnik će imati fiksnu veličinu, a unutarnji će biti širi jer sadrži sve slajdove. Prvi slajd će biti vidljiv. Ovo se postavlja preko preljeva:

Klizač (širina: 1024px; preljev: skriven;) .slider-wrapper (širina: 9999px; visina: 683px; položaj: relativan; prijelaz: lijevo 500ms linearno;)

Stilovi unutarnjeg omota uključuju:

Velika širina
- fiksna visina, maksimalna visina tobogana
- položaj: relativan, što će vam omogućiti stvaranje pokreta slajda
- CSS prijelaz lijevo, što će kretanje učiniti glatkim. Radi jednostavnosti, nismo uključili sve prefikse. Za to možete koristiti i CSS transformacije (zajedno s prijevodom).

Slajdovi imaju atribut float koji ih čini poravnatima. Postavljeni su relativno tako da možete dobiti njihov lijevi pomak u JS-u. Koristimo ga za stvaranje efekta klizanja.

Slajd ( float: lijevo; pozicija: relativna; širina: 1024px; visina: 683px; )

Iako smo postavili određenu širinu, u skripti je možemo promijeniti množenjem broja slajdova sa širinom slajda. Nikada ne znate koja vam je širina potrebna.

Navigacija se vrši pomoću gumba "Prethodno" i "Dalje". Poništavamo njihove zadane stilove i dodjeljujemo vlastite:

Slider-nav ( visina: 40px; širina: 100%; margin-top: 1.5em; ) .slider-nav gumb ( border: none; display: block; width: 40px; height: 40px; cursor: pointer; text-indent : -9999em; boja pozadine: prozirna; ponavljanje pozadine: bez ponavljanja; ) .slider-nav button.slider-previous ( float: lijevo; background-image: url(previous.png); ) .slider-nav button .slider-next ( float: desno; pozadinska slika: url(next.png); )

Kada koristite veze stranica umjesto gumba, možete stvoriti sljedeće stilove:

Slider-nav (text-align: center; margin-top: 1.5em; ) .slider-nav a ( display: inline-block; text-decoration: none; border: 1px solid #ddd; color: #444; width: 2em; visina: 2em; visina linije: 2; poravnanje teksta: središte; ) .slider-nav a.current (border-color: #000; color: #000; font-weight: bold; )

Te će se klase dinamički dodjeljivati iz skripte.

Ovaj je pristup prikladan za učinak klizanja. Ako želimo postići efekt blijeđenja, moramo promijeniti stilove, budući da float dodaje vodoravnu udaljenost između slajdova. Odnosno, ne trebaju nam slajdovi u jednom retku - trebamo "paket" slajdova:

Klizač (širina: 1024px; margina: 2em auto; ) .slider-wrapper (širina: 100%; visina: 683px; pozicija: relativna; /* Stvara kontekst za apsolutno pozicioniranje */) .slide (pozicija: apsolutna; /* Apsolutni položaj svih slajdova */ širina: 100%; visina: 100%; neprozirnost: 0; /* Svi slajdovi su skriveni */ prijelaz: neprozirnost 500ms linearno; ) /* U početku je vidljiv samo prvi */ .slider- omot >
Koristimo svojstvo neprozirnosti za skrivanje slajdova jer će čitači zaslona preskočiti sadržaj elemenata koji imaju display: none (pogledajte CSS na djelu: Nevidljivi sadržaj samo za korisnike čitača zaslona).

Zahvaljujući CSS kontekstualnom pozicioniranju, stvorili smo "skup" slajdova, pri čemu je posljednji slajd u izvoru bio ispred ostalih. Ali to nije ono što nam treba. Kako bismo održali redoslijed slajdova, moramo sakriti sve slajdove osim prvog.

JS koristi CSS prijelaz, mijenja vrijednost svojstva neprozirnosti trenutnog slajda i vraća ovu vrijednost na nulu za sve ostale.

JavaScript kod Dijaprojekcija bez označavanja stranica Dijaprojekcija bez označavanja stranica radi klikom na gumbe “Dalje” i “Prethodno”. Oni se mogu smatrati operatorima inkrementa i dekrementa. Uvijek postoji pokazivač (ili pokazivač) koji će se povećati ili smanjiti svaki put kada pritisnete gumbe. Njegova početna vrijednost je 0, a cilj je odabrati trenutni slajd na isti način na koji se odabiru elementi niza.

Dakle, kada kliknemo Next prvi put, pokazivač se povećava za 1 i dobivamo drugi slajd. Klikom na Prethodno smanjujemo pokazivač i dobivamo prvi slajd. itd.

Zajedno s pokazivačem koristimo jQueryjevu metodu .eq() za dobivanje trenutnog slajda. U čistom JS-u to izgleda ovako:

Funkcija Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: funkcija (pokazivač) ( var currentSlide = this.slides; //... ) );

Zapamtite - NodeList koristi indekse baš kao niz. Drugi način odabira trenutnog slajda je pomoću CSS3 selektora:

Slideshow.prototype = ( init: function() ( //...), _slideTo: function(pointer) ( var n = pointer + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

Selektor CSS3:nth-child() broji elemente počevši od 1, tako da trebate dodati 1 pokazivaču. Nakon odabira slajda, njegov nadređeni spremnik mora se pomaknuti s desna na lijevo. U jQueryju možete koristiti metodu .animate():

(funkcija($) ( $.fn.slideshow = funkcija(opcije) ( opcije = $.extend(( omot: ".slider-wrapper", slajdovi: ".slide", //... brzina: 500, popuštanje : "linearno" ), opcije); var slideTo = function(slajd, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( lijevo : - $currentSlide.position().left ), options.speed, options.easing); //... ); ))(jQuery);

U običnom JS-u ne postoji metoda .animate(), pa koristimo CSS prijelaze:

Klizač-omotač ( položaj: relativan; // potreban prijelaz: lijevo 500 ms linearno; )

Sada možete promijeniti svojstvo lijevo dinamički kroz objekt stila:

Sada moramo stvoriti događaj klika za svaku kontrolu. U jQueryju možete koristiti metodu .on(), a u čistom JS-u možete koristiti metodu addEventListener().

Također morate provjeriti je li pokazivač dosegao granice popisa - 0 za “Prethodno” i ukupan broj slajdova za “Sljedeće”. U svakom slučaju morate sakriti odgovarajući gumb:

(funkcija($) ( $.fn.slideshow = funkcija(opcije) ( opcije = $.extend(( omot: ".slider-wrapper", slajdovi: ".slide", prethodni: ".slider-previous", sljedeći : ".slider-next", //... brzina: 500, popuštanje: "linearno" ), opcije); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( lijevo: - $currentSlide.position().left), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $previous = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length; $next.on("click", function() ( index++; $previous.show(); if(index == total - 1) ( index = total - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("klik", funkcija() ( index--; $next.show(); if(index == 0) ( index = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);

A u čistom JS-u to izgleda ovako:

Funkcija Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider -next"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pokazivač) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), radnje: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. display = "block"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("click", function() ( self.index--; self.next.style.display = "block"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "none"; ) self._slideTo(self.index); ), lažno); ) );

Prikaz slajdova s paginacijom U ovoj vrsti dijaprojekcije svaka je poveznica odgovorna za jedan slajd, tako da nema potrebe za indeksom. Animacije se ne mijenjaju; mijenja se način na koji se korisnik kreće kroz slajdove. Za jQuery ćemo imati sljedeći kod:

(funkcija($) ( $.fn.slideshow = funkcija(opcije) ( opcije = $.extend(( omot: ".slider-wrapper", slajdovi: ".slide", nav: ".slider-nav", brzina : 500, ublažavanje: "linearno" ), opcije); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( lijevo: - $currentSlide.position().left), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href) ")); slideTo($slide, $element); $a.addClass("current").siblings(). removeClass("current"); )); )); ))(jQuery);

U ovom slučaju, svako sidro odgovara ID-u određenog slajda. U čistom JS-u možete koristiti i njega i data atribut, koji pohranjuje numerički indeks slajdova unutar NodeList:

Function Slider(element) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav) a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), navigate: function() ( for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

Od IE10 možete upravljati klasama putem classList:

Link.classList.add("trenutni");

A s IE11, atributi podataka mogu se dobiti putem svojstva skupa podataka:

Var index = parseInt(a.dataset.slide, 10) + 1;

Prikazane slajdove s kontrolama Ove dijaprojekcije predstavljaju određenu složenost koda - morate kombinirati korištenje indeksa i raspršivanja stranica. Odnosno, trenutni slajd mora biti odabran na temelju položaja pokazivača i slajda odabranog putem veza.

Ovo se može sinkronizirati kroz brojčani indeks svake veze u DOM-u. Jedan link - jedan slajd, pa će im indeksi biti 0, 1, 2 itd.

U jQueryju kod će biti ovakav:

(funkcija($) ( $.fn.slideshow = funkcija(opcije) ( opcije = $.extend(( //... paginacija: ".slider-pagination", //... ), opcije); $. fn.slideshow.index = 0; return this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM numerički indeks $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == ukupno - 1) ( $.fn.slideshow.index = ukupno - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. indeks, $element); $a.addClass("trenutni"). siblings().removeClass("trenutni"); )); )); ); //... ))(jQuery);

Odmah možete vidjeti da se vidljivost pokazivača promijenila - indeks je sada deklariran kao svojstvo objekta dijaprojekcije. Na taj način izbjegavamo probleme s opsegom koje mogu stvoriti povratni pozivi u jQueryju. Kursor je sada dostupan posvuda, čak i izvan prostora imena dodatka, budući da je deklariran kao javno vlasništvo objekta dijaprojekcije.

Metoda .index() daje numerički indeks svake veze.

Ne postoji takva metoda u čistom JS-u, pa je lakše koristiti atribute podataka:

Sada možemo povezati naše procedure s referencama i koristiti atribute podataka koje smo upravo stvorili:

Akcije: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "block"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none "; ) else ( self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), lažno); ) )

Razumijevanje dimenzija Vratimo se sljedećem CSS pravilu:

Klizač-omotač (širina: 9999 px; visina: 683 px; položaj: relativan; prijelaz: lijevo 500 ms linearno; )

Ako imamo puno slajdova, onda 9999 možda neće biti dovoljno. Veličine slajdova morate prilagoditi u hodu na temelju širine svakog slajda i broja slajdova.

U jQueryju je jednostavno:

// Prikaz slajdova pune širine return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * total); //... ));

Uzmite širinu prozora i postavite širinu svakog slajda. Ukupna širina unutarnjeg omota dobiva se množenjem širine prozora i broja slajdova.

// Dijaprojekcija fiksne širine return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(opcije.slides).eq(0).width() * ukupno); //... ));

Ovdje je početna širina postavljena na širinu svakog slajda. Samo trebate postaviti ukupnu širinu omota.

Unutarnji spremnik sada je dovoljno širok. U čistom JS-u to se radi približno na isti način:

// Prikaz slajdova pune širine Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // Viewport"s width var winWidth = window .innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

Efekti blijeđenja Efekti blijeđenja često se koriste u dijaprojekcijama. Trenutačni slajd nestaje i pojavljuje se sljedeći. jQuery ima metode fadeIn() i fadeOut() koje rade i sa svojstvima neprozirnosti i sa svojstvima prikaza, tako da se element uklanja sa stranice kada se animacija završi (display:none).

U čistom JS-u najbolje je raditi sa svojstvom neprozirnosti i koristiti skup CSS pozicioniranja. Zatim će u početku slajd biti vidljiv (neprozirnost: 1), a ostali će biti skriveni (neprozirnost: 0).

Sljedeći skup stilova demonstrira ovu metodu:

Klizač ( širina: 100%; preljev: skriven; položaj: relativan; visina: 400px; ) .klizač-omotač ( širina: 100%; visina: 100%; položaj: relativan; ) .slajd ( položaj: apsolutni; širina: 100 %; visina: 100%; neprozirnost: 0; ) .slider-wrapper > .slide:first-child ( neprozirnost: 1; )

U čistom JS-u trebate registrirati CSS prijelaz svakog slajda:

Slajd ( float: lijevo; pozicija: apsolutna; širina: 100%; visina: 100%; neprozirnost: 0; prijelaz: neprozirnost 500 ms linearno; )

Uz jQuery, da biste koristili metode fadeIn() i fadeOut(), trebate promijeniti neprozirnost i prikaz:

Slajd ( float: lijevo; položaj: apsolutni; širina: 100%; visina: 100%; prikaz: nijedan; ) .slider-wrapper > .slide:first-child ( prikaz: blok; )

U jQueryju kod je sljedeći:

(funkcija($) ( $.fn.slideshow = funkcija(opcije) ( opcije = $.extend(( omot: ".slider-wrapper", prethodni: ".slider-previous", sljedeći: ".slider-next" , slajdovi: ".slide", nav: ".slider-nav", brzina: 500, ublažavanje: "linearno" ), opcije); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides , element).eq(slide); $currentSlide. animate(( neprozirnost: 1), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); //. .. ); ))(jQuery);

Prilikom animiranja neprozirnosti također morate promijeniti vrijednosti ovog svojstva za preostale slajdove.

U JavaScriptu bi to bilo:

Slideshow.prototype = ( //... _slideTo: function(slide) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

Medijski elementi: Video Video možemo uključiti u dijaprojekciju. Evo primjera video prezentacije s Vimea:

Videozapisi su uključeni putem iframea. Ovo je isti zamjenjivi inline-blok kao na slici. Zamjenjivo – jer je sadržaj preuzet iz vanjskog izvora.

Da biste stvorili dijaprojekciju preko cijele stranice, morate promijeniti stilove na sljedeći način:

Html, tijelo ( margina: 0; padding: 0; visina: 100%; min-height: 100%; /* Visina bi trebala biti cijela stranica */ ) .klizač ( širina: 100%; preljev: skriven; visina: 100 %; min-visina: 100%; /* Visina i širina do pune */ položaj: apsolutni; /* Apsolutni položaj */ ) .slider-wrapper ( širina: 100%; visina: 100%; /* Visina i širina do full */ position: relative; ) .slide ( float: lijevo; position: absolute; width: 100%; height: 100%; ) .slide iframe ( display: block; /* Block element */ position: absolute; /* Apsolutno pozicioniranje */ širina: 100%; visina: 100%; /* Puna visina i širina */ )

Automatski prikaz slajdova Automatski prikaz slajdova koristi mjerače vremena. Svaki put kada se funkcija mjerača vremena setInterval() ponovno pozove, kursor će se povećati za 1 i tako će biti odabran sljedeći slajd.

Kada kursor dosegne najveći broj slajdova, mora se resetirati.

Beskrajni prikazi slajdova korisnicima brzo postanu dosadni. Najbolja praksa je zaustaviti animaciju kada korisnik prijeđe pokazivačem iznad nje i nastaviti kada se kursor odmakne.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( slides: ".slide", speed: 3000, easing: "linear"), options); var timer = null; // Timer var index = 0; // Pokazivač var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animate ((opacity: 1), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); var autoSlide = function(element) ( // Inicijaliziraj timer niza = setInterval ( function() ( index++; // Povećaj kursor za 1 if(index == $(options.slides, element).length) ( index = 0; // Resetiraj kursor ) slideTo(index, element); ), options.speed ); // Isti interval kao u method.animate() ); var startStop = function(element) ( element.hover(function() ( // Zaustavi animaciju clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Nastavi animaciju )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);

Oba parametra metode .stop() postavljena su na true, jer ne trebamo kreirati red animacija iz naše sekvence.

U čistom JS-u kod postaje jednostavniji. Registriramo CSS prijelaz za svaki slajd s određenim trajanjem:

Slajd ( prijelaz: neprozirnost 3 s linearna; /* 3 sekunde = 3000 milisekundi */ )

A kod će biti ovakav:

Navigacija tipkovnicom Napredne dijaprojekcije nude navigaciju tipkovnicom, tj. Pomičite se kroz slajdove pritiskom na tipke. Za nas to jednostavno znači da moramo registrirati rukovanje događajem pritiska tipke.

Da bismo to učinili, pristupit ćemo svojstvu keyCode objekta događaja. Vraća kod pritisnute tipke (popis kodova).

Oni događaji koje smo priložili gumbima "Prethodno" i "Sljedeće" sada se mogu priložiti tipkama "lijevo" i "desno". jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // Lijeva strelica $next.trigger("click"); ) if( kod == 37) ( // Desna strelica $previous.trigger("klik"); ) ));

U čistom JS-u, umjesto jednostavne metode .trigger(), morat ćete koristiti dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // klik mišem if(code == 39) ( // Lijeva strelica self .next.dispatchEvent(evt); ) if(code == 37) ( // Desna strelica self.previous.dispatchEvent(evt); ) ), false);

U pristojnim projektima to nije uobičajeno. Trebali bismo definirati funkcionalnost koja omogućuje okretanje u javnoj metodi, a zatim je pozvati kada se klikne gumb. Zatim, ako je drugi dio programa trebao implementirati ovu funkcionalnost, ne bi bilo potrebe za oponašanjem DOM događaja, već bi jednostavno mogli pozvati ovu metodu.

Povratni pozivi Bilo bi lijepo moći priložiti neki kod bilo kojoj radnji dijaprojekcije koja bi se izvršila kada se ta radnja izvrši. To je svrha funkcija povratnog poziva - one se izvršavaju samo kada se dogodi određena radnja. Recimo da naša dijaprojekcija ima naslove i da su prema zadanim postavkama skriveni. U vrijeme animacije, moramo prikazati naslov za trenutni slajd ili čak učiniti nešto s njim.

U jQueryju možete stvoriti povratni poziv ovako:

(funkcija($) ( $.fn.slideshow = funkcija(opcije) ( opcije = $.extend(( //... povratni poziv: funkcija() () ), opcije); var slideTo = funkcija(slajd, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacity: 1), options.speed, options.easing, // Povratni poziv za trenutni slajd options.callback($ currentSlide)). siblings(options.slides). css("opacity", 0); ); //... ); ))(jQuery);

U ovom slučaju, povratni poziv je funkcija iz .animate() koja uzima trenutni slajd kao argument. Evo kako ga možete koristiti:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Prikazuje trenutni naslov i skriva ostale $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("slow"); ) )); ));

U čistom JS-u:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Naš povratni poziv this.el = document.querySelector(element); this.init(); ) Slideshow. prototype = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = this; var currentSlide = self.slides; currentSlide.style.opacity = 1; for(var i = 0; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

Funkcija povratnog poziva definirana je kao drugi parametar konstruktora. Možete ga koristiti ovako:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Prikazuje trenutni naslov i skriva ostale var allSlides = omot. querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

Vanjski API-ji Do sada je naš scenarij rada jednostavan: svi su slajdovi već u dokumentu. Ako u njega trebamo umetnuti podatke izvana (YouTube, Vimeo, Flickr), slajdove moramo popuniti u hodu kako primamo vanjski sadržaj.

Budući da odgovor poslužitelja treće strane možda neće biti trenutan, trebate umetnuti animaciju učitavanja koja pokazuje da je proces u tijeku:

Prethodna Sljedeća

To može biti gif ili čista CSS animacija:

#spinner ( border-radius: 50%; border: 2px solid #000; height: 80px; width: 80px; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; ) # spinner:after ( sadržaj: ""; pozicija: apsolutna; boja pozadine: #000; vrh:2px; lijevo: 48%; visina: 38px; širina: 2px; radijus granice: 5px; -webkit-transform-origin: 50% 97%; transform-origin: 50% 97%; -webkit-animacija: kutna 1s linearna beskonačna; animacija: kutna 1s linearna beskonačna; ) @-webkit-keyframes kutna ( 0%(-webkit-transform:rotate(0deg) );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes angular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( sadržaj: ""; pozicija: apsolutna; boja pozadine: #000; vrh: 6 px; lijevo: 48%; visina: 35 px; širina: 2 px; radijus granice: 5 px; -webkit-transform-origin: 50% 94% ; transform-origin: 50% 94%; -webkit-animation: ptangular 6s linear infinite; animacija: ptangular 6s linear infinite; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

Koraci će biti ovakvi:
- tražiti podatke izvana
- sakriti bootloader
- analizirati podatke
- izgraditi HTML
- prikazati dijaprojekciju
- obraditi dijaprojekcije

Recimo da odaberemo korisnikove najnovije videozapise s YouTubea. jQuery:

(funkcija($) ( $.fn.slideshow = funkcija(opcije) ( opcije = $.extend(( omot: ".slider-wrapper", //... loader: "#spinner", //... ograničenje: 5, korisničko ime: "learncodeacademy" ), opcije); //... var getVideos = function() ( // Dohvati videozapise s YouTubea var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Preuzmi video kao JSON objekt $(options.loader). hide(); // Skrivanje učitavača var entries = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

U čistom JavaScriptu postoji dodatni korak - stvaranje metode za dobivanje JSON-a:

Tada su postupci slični:

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: funkcija(url, povratni poziv) ( povratni poziv = povratni poziv || funkcija(); var zahtjev = novi XMLHttpRequest(); zahtjev.open("GET", url, istina); zahtjev.send(null); zahtjev .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON objekt povratni poziv(data); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Dohvati YouTube video var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // Dobijte video kao JSON objekt var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "nema"; // Skrivanje učitavača za (var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки