Úvod do vývoja prezentácií v JavaScripte. Vytvorenie posúvača fotografií pomocou čistého javascriptu Príprava obrázkov pre posúvač
Ak snímky obsahujú iba obrázky, môžete mierne zmeniť štruktúru:
Predchádzajúci Nasledujúci
Nezabudnite pridať zmysluplnú hodnotu do atribútu alt.
Ak chcete použiť odkazy na stránky, môžete urobiť nasledovné:
... ... ... 1 2 3
Predchádzajúca Ďalšia 1 2 3
Všimnite si použitie atribútov „údaje“ – niektoré prezentácie môžu vložiť obrázky ako pozadie a tieto atribúty sa použijú v skripte ako miesta na prepojenie pozadia a snímky.
Používanie zoznamov Sémanticky správnym prístupom by bolo použitie položiek zoznamu ako snímky. V tomto prípade bude štruktúra vyzerať takto:
Ak je poradie snímok dobre definované (napríklad v prezentácii), môžete použiť očíslované zoznamy
CSS Začnime s nasledujúcou štruktúrou:
Predchádzajúci Nasledujúci
Pretože Keďže prezentácia bude prebiehať sprava doľava, vonkajší kontajner bude mať pevnú veľkosť a vnútorný bude širší, pretože obsahuje všetky snímky. Bude viditeľná prvá snímka. Toto sa nastavuje cez pretečenie:
Posúvač ( šírka: 1024px; pretečenie: skryté; ) .slider-wrapper (šírka: 9999px; výška: 683px; pozícia: relatívna; prechod: doľava 500 ms lineárne; )
Štýly vnútorného obalu zahŕňajú:
Veľká šírka
- pevná výška, maximálna výška sklzu
- poloha: relatívna, čo vám umožní vytvoriť posuvný pohyb
- CSS prechod vľavo, vďaka čomu bude pohyb plynulý. Pre jednoduchosť sme nezahrnuli všetky predpony. Na to môžete použiť aj transformácie CSS (spolu s prekladom).
Snímky majú atribút float, aby boli zarovnané. Sú umiestnené relatívne tak, že môžete získať ich ľavý posun v JS. Používame ho na vytvorenie posuvného efektu.
Snímka ( float: left; pozícia: relatívna; šírka: 1024px; výška: 683px; )
Hoci máme nastavenú určitú šírku, v skripte ju môžeme zmeniť vynásobením počtu snímok šírkou snímky. Nikdy neviete, akú šírku budete potrebovať.
Navigácia sa vykonáva pomocou tlačidiel „Predchádzajúci“ a „Ďalej“. Obnovíme ich predvolené štýly a priradíme im vlastné:
Slider-nav ( výška: 40px; šírka: 100%; okraj-vrchu: 1,5em; ) tlačidlo .slider-nav ( orámovanie: žiadne; zobrazenie: blok; šírka: 40px; výška: 40px; kurzor: ukazovateľ; odsadenie textu : -9999em; farba pozadia: priehľadná; opakovanie pozadia: bez opakovania; ) .tlačidlo posuvníka.posuvník-predchádzajúci ( float: left; background-image: url(previous.png); ) .tlačidlo posuvníka .slider-next ( float: right; background-image: url(next.png); )
Pri použití odkazov na stránky namiesto tlačidiel môžete vytvoriť nasledujúce štýly:
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; výška: 2em; výška riadku: 2; zarovnanie textu: stred; ) .slider-nav a.current ( border-color: #000; color: #000; font-weight: bold; )
Tieto triedy budú priradené dynamicky zo skriptu.
Tento prístup je vhodný pre posuvný efekt. Ak chceme dosiahnuť efekt zoslabenia, musíme zmeniť štýly, keďže float pridáva medzi snímky vodorovnú výplň. To znamená, že nepotrebujeme snímky na jednom riadku - potrebujeme „balenie“ snímok:
Posuvník ( šírka: 1024px; okraj: 2em auto; ) .slider-wrapper ( šírka: 100 %; výška: 683px; poloha: relatívna; /* Vytvorí kontext pre absolútne umiestnenie */ ) .slide ( poloha: absolútna; /* Absolútne umiestnenie všetkých snímok */ šírka: 100 %; výška: 100 %; nepriehľadnosť: 0; /* Všetky snímky sú skryté */ prechod: nepriehľadnosť 500 ms lineárne; ) /* Spočiatku je viditeľný iba prvý */ .posuvník- obal >
Na skrytie snímok používame vlastnosť opacity, pretože čítačky obrazovky preskočia obsah prvkov, ktoré majú display: none (pozri CSS v akcii: Neviditeľný obsah len pre používateľov čítačky obrazovky).
Vďaka kontextovému umiestneniu CSS sme vytvorili „hromadu“ snímok, pričom posledná snímka v zdroji bola pred ostatnými. Ale to nie je to, čo potrebujeme. Aby sme zachovali poradie snímok, musíme skryť všetky snímky okrem prvej.
JS používa prechod CSS, pričom mení hodnotu vlastnosti nepriehľadnosti aktuálnej snímky a pre všetky ostatné vynuluje túto hodnotu.
Kód JavaScript Prezentácia bez stránkovania Prezentácia bez stránkovania funguje kliknutím na tlačidlá „Ďalej“ a „Predchádzajúci“. Možno si ich predstaviť ako operátory prírastku a znižovania. Vždy existuje ukazovateľ (alebo kurzor), ktorý sa zvýši alebo zníži pri každom stlačení tlačidiel. Jeho počiatočná hodnota je 0 a cieľom je vybrať aktuálnu snímku rovnakým spôsobom, ako sa vyberajú prvky poľa.Keď teda prvýkrát klikneme na Ďalej, ukazovateľ sa zvýši o 1 a dostaneme druhú snímku. Kliknutím na Predchádzajúci zmenšíme ukazovateľ a získame prvú snímku. Atď.
Spolu s ukazovateľom používame metódu .eq() jQuery na získanie aktuálnej snímky. V čistom JS to vyzerá takto:
Function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );
Pamätajte - NodeList používa indexy rovnako ako pole. Ďalším spôsobom, ako vybrať aktuálnu snímku, sú selektory CSS3:
Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(ukazovateľ) ( var n = ukazovateľ + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ));
Selektor CSS3:nth-child() počíta prvky začínajúce od 1, takže k ukazovateľu musíte pridať 1. Po výbere snímky je potrebné presunúť jej nadradený kontajner sprava doľava. V jQuery môžete použiť metódu .animate():
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing) : "linear" ), možnosti); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);
V bežnom JS neexistuje metóda .animate(), takže používame prechody CSS:
Slider-wrapper ( poloha: relatívna; // požadovaný prechod: vľavo 500 ms lineárne; )
Teraz môžete zmeniť vlastnosť left dynamicky prostredníctvom objektu štýlu:
Funkcia 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"); //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "- " + currentSlide.offsetLeft + "px"; ) );
Teraz musíme vytvoriť udalosť kliknutia pre každý ovládací prvok. V jQuery môžete použiť metódu .on() a v čistom JS môžete použiť metódu addEventListener().
Musíte tiež skontrolovať, či ukazovateľ dosiahol hranice zoznamu - 0 pre „Predchádzajúci“ a celkový počet snímok pre „Ďalší“. V každom prípade musíte skryť príslušné tlačidlo:
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", previous: ".slider-previous", next) : ".slider-next", //... rýchlosť: 500, nábeh: "linear" ), možnosti); var slideTo = funkcia(snímka, prvok) ( var $currentSlide = $(možnosti.snímky, prvok). eq(slide); $(options.wrapper, element).animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $prvok = $(toto), $predchadzajuci = $(volby.predchadzajuce, $prvok), $dalsi = $(volby.nasleduje, $prvok), index = 0, celkove = $(volby.slajdy).dĺžka; $next.on("click", function() ( index++; $previous.show(); if(index == total - 1) (index = total - 1; $next.hide(); ) slideTo(index, $prvok); )); $previous.on("click", function() ( index--; $next.show(); if(index == 0) (index = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);
A v čistom JS to vyzerá takto:
Funkcia 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.slide.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), akcie: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. display = "blok"; 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 = "blok"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "none"; ) self._slideTo(self.index); ), nepravda); ));
Stránkovaná prezentácia V tomto type prezentácie je každý odkaz zodpovedný za jednu snímku, takže index nie je potrebný. Animácie sa nemenia, mení sa spôsob, akým sa používateľ pohybuje po snímkach. Pre jQuery budeme mať nasledujúci kód:(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed) : 500, easing: "linear" ), možnosti); var slideTo = funkcia(snímka, prvok) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left: - $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("aktuálne").súrodenci(). removeClass("aktuálne"); )); )); ))(jQuery);
V tomto prípade každá kotva zodpovedá ID konkrétnej snímky. V čistom JS môžete použiť aj atribút data, ktorý ukladá číselný index snímok v zozname NodeList:
Funkcia 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(); ), navigácia: 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 môžete spravovať triedy cez classList:
Link.classList.add("aktuálne");
A s IE11 možno atribúty údajov získať prostredníctvom vlastnosti množiny údajov:
Var index = parseInt(a.dataset.slide, 10) + 1;
Stránkované prezentácie s ovládacími prvkami Tieto prezentácie predstavujú určitú zložitosť kódu – musíte skombinovať použitie indexu a hash stránky. To znamená, že aktuálna snímka musí byť vybratá na základe polohy ukazovateľa a snímky vybratej prostredníctvom odkazov.Toto je možné synchronizovať pomocou číselného indexu každého odkazu v DOM. Jeden odkaz - jedna snímka, takže ich indexy budú 0, 1, 2 atď.
V jQuery bude kód vyzerať takto:
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... pagination: ".slider-pagination", //... ), options); $. 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(); // Číselný index DOM $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == celkom - 1) ( $.fn.slideshow.index = celkom - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. index, $element); $a.addClass("aktuálny"). súrodenci().removeClass("aktuálny"); )); )); ); //... ))(jQuery);
Okamžite vidíte, že sa zmenila viditeľnosť kurzora – index je teraz deklarovaný ako vlastnosť objektu prezentácie. Týmto spôsobom sa vyhneme problémom s rozsahom, ktoré môžu vzniknúť spätnými volaniami v jQuery. Kurzor je teraz dostupný všade, dokonca aj mimo menného priestoru doplnku, pretože je deklarovaný ako verejná vlastnosť objektu prezentácie.
Metóda .index() poskytuje číselný index každého odkazu.
V čistom JS takáto metóda neexistuje, takže je jednoduchšie použiť atribúty údajov:
(function() ( function 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.navigationLinks = this.el.querySelectorAll(".slider-pagination a"); this.index = 0; this.total = this.slides.length; this.setup() ; this.actions(); ), //... setup: function() ( var self = this; //... for(var k = 0; k< self.navigationLinks.length; ++k) { var pagLink = self.navigationLinks[k]; pagLink.setAttribute("data-index", k); // Или pagLink.dataset.index = k; } }, //... }; })();
Teraz môžeme prepojiť naše postupy s referenciami a použiť dátové atribúty, ktoré sme práve vytvorili:
Akcie: function() ( var self = toto; //... 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 = "blok"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), nepravda); ))
Pochopenie dimenzií Vráťme sa k nasledujúcemu pravidlu CSS:Slider-wrapper (šírka: 9999px; výška: 683px; pozícia: relatívna; prechod: doľava 500 ms lineárne; )
Ak máme veľa snímok, potom 9999 nemusí stačiť. Veľkosti snímok musíte priebežne upravovať na základe šírky každej snímky a počtu snímok.
V jQuery je to jednoduché:
// Prezentácia na celú šírku return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(okno).width()); $(options.wrapper, $element).width($(window).width() * celkovo); //... ));
Vezmite šírku okna a nastavte šírku každej snímky. Celková šírka vnútorného obalu sa získa vynásobením šírky okna a počtu snímok.
// Slideshow s pevnou šírkou return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * total); //... ));
Tu je počiatočná šírka nastavená na šírku každej snímky. Stačí si nastaviť celkovú šírku zavinovačky.
Vnútorná nádoba je teraz dostatočne široká. V čistom JS sa to robí približne rovnakým spôsobom:
// Prezentácia na celú šírku 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; // šírka výrezu var winWidth = okno .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"; }, //... };
Efekty miznutia Efekty blednutia sa často používajú v prezentáciách. Aktuálna snímka zmizne a zobrazí sa ďalšia. jQuery má metódy fadeIn() a fadeOut(), ktoré pracujú s vlastnosťami nepriehľadnosti aj zobrazenia, takže prvok sa po dokončení animácie zo stránky odstráni (display:none).V čistom JS je najlepšie pracovať s vlastnosťou opacity a použiť zásobník na umiestnenie CSS. Potom bude najprv snímka viditeľná (nepriehľadnosť: 1) a ostatné budú skryté (nepriehľadnosť: 0).
Nasledujúci súbor štýlov demonštruje túto metódu:
Posúvač ( šírka: 100 %; pretečenie: skryté; pozícia: relatívna; výška: 400px; ) .slider-wrapper ( šírka: 100 %; výška: 100 %; pozícia: relatívna; ) .snímka ( poloha: absolútna; šírka: 100 %; výška: 100 %; nepriehľadnosť: 0; ) .slider-wrapper > .slide:first-child ( nepriehľadnosť: 1; )
V čistom JS musíte zaregistrovať prechod CSS každej snímky:
Snímka ( plávajúca: vľavo; pozícia: absolútna; šírka: 100 %; výška: 100 %; nepriehľadnosť: 0; prechod: nepriehľadnosť 500 ms lineárne; )
Ak chcete v jQuery použiť metódy fadeIn() a fadeOut(), musíte zmeniť nepriehľadnosť a zobrazenie:
Snímka ( float: left; pozícia: absolútna; šírka: 100 %; výška: 100 %; zobrazenie: žiadne; ) .slider-wrapper > .slide:first-child ( display: block; )
V jQuery je kód nasledovný:
(funkcia($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", previous: ".slider-previous", next: ".slider-next" , snímky: ".slide", nav: ".slider-nav", rýchlosť: 500, nábeh: "linear" ), možnosti); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides) , element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); //. ..); ))(jQuery);
Pri animácii nepriehľadnosti je tiež potrebné zmeniť hodnoty tejto vlastnosti pre zostávajúce snímky.
V JavaScripte by to bolo:
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; } } }, //... };
Prvky médií: Video Do prezentácie môžeme zahrnúť video. Tu je príklad prezentácie videa z Vimeo:
Videá sú zahrnuté prostredníctvom prvku iframe. Ide o rovnaký vymeniteľný inline blok ako na obrázku. Vymeniteľné – pretože obsah je prevzatý z externého zdroja.
Ak chcete vytvoriť celostránkovú prezentáciu, musíte zmeniť štýly takto:
Html, telo ( okraj: 0; odsadenie: 0; výška: 100 %; minimálna výška: 100 %; /* Výška by mala byť celá stránka */ ) .posuvník ( šírka: 100 %; pretečenie: skryté; výška: 100 %; minimálna výška: 100 %; /* Výška a šírka na plnú výšku */ poloha: absolútna; /* Absolútna poloha */ ) .slider-wrapper ( šírka: 100 %; výška: 100 %; /* Výška a šírka do plná */ pozícia: relatívna; ) .snímka ( plávajúca: vľavo; pozícia: absolútna; šírka: 100 %; výška: 100 %; ) .prvok snímky ( zobrazenie: blok; /* Prvok bloku */ pozícia: absolútna; /* Absolútne umiestnenie */ šírka: 100 %; výška: 100 %; /* Celá výška a šírka */ )
Automatické prezentácie Automatické prezentácie využívajú časovače. Zakaždým, keď je funkcia časovača setInterval() zavolaná späť, kurzor sa zvýši o 1 a teda sa vyberie ďalšia snímka.Keď kurzor dosiahne maximálny počet snímok, musí sa resetovať.
Nekonečné prezentácie sa pre používateľov rýchlo stanú nudnými. Najlepšou praxou je zastaviť animáciu, keď na ňu používateľ umiestni kurzor myši, a pokračovať, keď sa kurzor presunie preč.
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( slides: ".slide", speed: 3000, easing: "linear" ), options); var timer = null; // Časovač var index = 0; // Varovanie kurzora 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) ( // Inicializácia sekvenčného časovača = setInterval ( function() ( index++; // Zväčšenie kurzora o 1 if(index == $(options.slides, element).length) ( index = 0; // Resetovanie kurzora ) slideTo(index, element); ), options.speed ); // Rovnaký interval ako v metóde.animate() ); var startStop = funkcia(prvok) ( element.hover(funkcia() ( // Zastavenie animácie clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Obnovenie animácie )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);
Oba parametre metódy .stop() sú nastavené na hodnotu true, pretože z našej sekvencie nepotrebujeme vytvárať animačné fronty.
V čistom JS sa kód zjednoduší. Pre každú snímku registrujeme prechod CSS s určitým trvaním:
Snímka ( prechod: nepriehľadnosť 3 s lineárne; /* 3 sekundy = 3 000 milisekúnd */ )
A kód bude takýto:
(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll( ".slide"); this.index = 0; // Kurzor this.timer = null; // Timer this.action(); this.stopStart(); ), _slideTo: function(slide) ( var currentSlide = this. snímky; 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; } } }, action: function() { var self = this; // Initializes the sequence self.timer = setInterval(function() { self.index++; // Увеличим курсор на 1 if(self.index == self.slides.length) { self.index = 0; // Обнулим курсор } self._slideTo(self.index); }, 3000); // Тот же интервал, что и у перехода CSS }, stopStart: function() { var self = this; // Останавливаем анимацию self.el.addEventListener("mouseover", function() { clearInterval(self.timer); self.timer = null; }, false); // Возобновляем анимацию self.el.addEventListener("mouseout", function() { self.action(); }, false); } }; })();
Navigácia pomocou klávesnice Pokročilé prezentácie ponúkajú navigáciu pomocou klávesnice, t.j. Prechádzajte snímkami pomocou tlačidiel. Pre nás to jednoducho znamená, že musíme zaregistrovať spracovanie udalosti stlačenia klávesu.Aby sme to urobili, pristúpime k vlastnosti keyCode objektu udalosti. Vráti kód stlačeného tlačidla (zoznam kódov).
Udalosti, ktoré sme pripojili k tlačidlám „Predchádzajúci“ a „Ďalej“, môžu byť teraz pripojené k klávesom „vľavo“ a „vpravo“. jQuery:
$("body").on("keydown", function(e) ( kód var = e.keyCode; if(code == 39) ( // Šípka doľava $next.trigger("click"); ) if( kód == 37) ( // šípka doprava $previous.trigger("click"); ) ));
V čistom JS budete musieť namiesto jednoduchej metódy .trigger() použiť dispatchEvent():
Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // kliknutie myšou if(code == 39) ( // Šípka doľava self .next.dispatchEvent(evt); ) if(code == 37) ( // šípka doprava self.previous.dispatchEvent(evt); ) ), false);
V slušných projektoch to nie je zvykom. Museli by sme definovať funkčnosť, ktorá poskytuje preklápanie vo verejnej metóde, a potom ju zavolať, keď sa klikne na tlačidlo. Potom, ak by iná časť programu potrebovala implementovať túto funkcionalitu, nebolo by potrebné emulovať udalosti DOM, ale mohli by sme jednoducho zavolať túto metódu.
Spätné volania Bolo by pekné mať možnosť pripojiť nejaký kód k akejkoľvek akcii prezentácie, ktorá by sa vykonala, keď sa táto akcia vykoná. Na to slúžia funkcie spätného volania – vykonajú sa len vtedy, keď nastane určitá akcia. Povedzme, že naša prezentácia má titulky a sú predvolene skryté. V čase animácie musíme zobraziť titulok pre aktuálnu snímku alebo s ňou dokonca niečo urobiť.V jQuery môžete vytvoriť spätné volanie takto:
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... callback: function() () ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing, // Spätné volanie pre aktuálnu snímku options.callback($ currentSlide)). súrodenci(options.slides). css("opacity", 0); ); //... ); ))(jQuery);
V tomto prípade je spätným volaním funkcia z .animate(), ktorá berie aktuálnu snímku ako argument. Môžete ho použiť takto:
$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Zobrazí aktuálny popis a skryje ostatné $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("pomaly"); ) )); ));
V čistom JS:
(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Naše spätné volanie this.el = document.querySelector(element); this.init(); ) Prezentácia. prototyp = ( 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); // Вызывает функцию по окончанию перехода } }; // })();
Funkcia spätného volania je definovaná ako druhý parameter konštruktora. Môžete ho použiť takto:
Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Zobrazí aktuálny popis a skryje ostatné var allSlides = wrapper. 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"); } } }); });
Externé API Zatiaľ je náš pracovný scenár jednoduchý: všetky snímky sú už v dokumente. Ak do nej potrebujeme vkladať dáta zvonku (YouTube, Vimeo, Flickr), musíme snímky dopĺňať za chodu, keď prijímame externý obsah.Keďže odpoveď zo servera tretej strany nemusí byť okamžitá, musíte vložiť animáciu načítania, aby ste ukázali, že proces prebieha:
Predchádzajúci Nasledujúci
Môže to byť gif alebo čistá animácia CSS:
#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 ( content: ""; pozícia: absolútna; farba pozadia: #000; hore:2px; zľava: 48%; výška: 38px; šírka: 2px; polomer okraja: 5px; -webkit-transform-origin: 50 % 97 %; pôvod transformácie: 50 % 97 %; -animácia webkitu: uhlová 1s lineárna nekonečná; animácia: uhlová 1s lineárna nekonečná; ) @-webkit-keyframes uhlové ( 0%(-webkit-transform:rotate(0deg) );) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes uhlové ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( obsah: ""; pozícia: absolútna; farba pozadia: #000; hore:6px; vľavo: 48%; výška: 35px; šírka: 2px; polomer-okraja: 5px; -webkit-transform-origin: 50% 94% ; pôvod transformácie: 50 % 94 %; -animácia webkitu: ptangular 6s linear infinite; animácia: 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);) )
Kroky budú takéto:
- vyžiadať si údaje zvonku
- skryť bootloader
- analyzovať údaje
- zostaviť HTML
- zobraziť prezentáciu
- spracovať prezentácie
Povedzme, že vyberieme najnovšie videá používateľa zo služby YouTube. jQuery:
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... limit: 5, username: "learncodeacademy" ), options); //... var getVideos = function() ( // Získanie videí z YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Získanie videa ako objektu JSON $(options.loader). hide(); // Skrytie načítač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);
V čistom JavaScripte existuje ďalší krok - vytvorenie metódy na získanie JSON:
(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"; ), _getJSON: function(url , spätné volanie) ( spätné volanie = spätné volanie || function() (); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request.onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // spätné volanie objektu JSON(data); ) else ( console.log(request.status) ;) ); ), //... ); )) ();
Potom sú postupy podobné:
(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: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // objekt JSON callback(data); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Získať video YouTube var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // Získanie videa ako objektu JSON var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "žiadny"; // Skrytie zavádzača pre (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(); // Обрабатываем слайд-шоу } }; })(); Добавить метки
Ak snímky obsahujú iba obrázky, môžete mierne zmeniť štruktúru:
Predchádzajúci Nasledujúci
Nezabudnite pridať zmysluplnú hodnotu do atribútu alt.
Ak chcete použiť odkazy na stránky, môžete urobiť nasledovné:
... ... ... 1 2 3
Predchádzajúca Ďalšia 1 2 3
Všimnite si použitie atribútov „údaje“ – niektoré prezentácie môžu vložiť obrázky ako pozadie a tieto atribúty sa použijú v skripte ako miesta na prepojenie pozadia a snímky.
Používanie zoznamov Sémanticky správnym prístupom by bolo použitie položiek zoznamu ako snímky. V tomto prípade bude štruktúra vyzerať takto:
Ak je poradie snímok dobre definované (napríklad v prezentácii), môžete použiť očíslované zoznamy
CSS Začnime s nasledujúcou štruktúrou:
Predchádzajúci Nasledujúci
Pretože Keďže prezentácia bude prebiehať sprava doľava, vonkajší kontajner bude mať pevnú veľkosť a vnútorný bude širší, pretože obsahuje všetky snímky. Bude viditeľná prvá snímka. Toto sa nastavuje cez pretečenie:
Posúvač ( šírka: 1024px; pretečenie: skryté; ) .slider-wrapper (šírka: 9999px; výška: 683px; pozícia: relatívna; prechod: doľava 500 ms lineárne; )
Štýly vnútorného obalu zahŕňajú:
Veľká šírka
- pevná výška, maximálna výška sklzu
- poloha: relatívna, čo vám umožní vytvoriť posuvný pohyb
- CSS prechod vľavo, vďaka čomu bude pohyb plynulý. Pre jednoduchosť sme nezahrnuli všetky predpony. Na to môžete použiť aj transformácie CSS (spolu s prekladom).
Snímky majú atribút float, aby boli zarovnané. Sú umiestnené relatívne tak, že môžete získať ich ľavý posun v JS. Používame ho na vytvorenie posuvného efektu.
Snímka ( float: left; pozícia: relatívna; šírka: 1024px; výška: 683px; )
Hoci máme nastavenú určitú šírku, v skripte ju môžeme zmeniť vynásobením počtu snímok šírkou snímky. Nikdy neviete, akú šírku budete potrebovať.
Navigácia sa vykonáva pomocou tlačidiel „Predchádzajúci“ a „Ďalej“. Obnovíme ich predvolené štýly a priradíme im vlastné:
Slider-nav ( výška: 40px; šírka: 100%; okraj-vrchu: 1,5em; ) tlačidlo .slider-nav ( orámovanie: žiadne; zobrazenie: blok; šírka: 40px; výška: 40px; kurzor: ukazovateľ; odsadenie textu : -9999em; farba pozadia: priehľadná; opakovanie pozadia: bez opakovania; ) .tlačidlo posuvníka.posuvník-predchádzajúci ( float: left; background-image: url(previous.png); ) .tlačidlo posuvníka .slider-next ( float: right; background-image: url(next.png); )
Pri použití odkazov na stránky namiesto tlačidiel môžete vytvoriť nasledujúce štýly:
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; výška: 2em; výška riadku: 2; zarovnanie textu: stred; ) .slider-nav a.current ( border-color: #000; color: #000; font-weight: bold; )
Tieto triedy budú priradené dynamicky zo skriptu.
Tento prístup je vhodný pre posuvný efekt. Ak chceme dosiahnuť efekt zoslabenia, musíme zmeniť štýly, keďže float pridáva medzi snímky vodorovnú výplň. To znamená, že nepotrebujeme snímky na jednom riadku - potrebujeme „balenie“ snímok:
Posuvník ( šírka: 1024px; okraj: 2em auto; ) .slider-wrapper ( šírka: 100 %; výška: 683px; poloha: relatívna; /* Vytvorí kontext pre absolútne umiestnenie */ ) .slide ( poloha: absolútna; /* Absolútne umiestnenie všetkých snímok */ šírka: 100 %; výška: 100 %; nepriehľadnosť: 0; /* Všetky snímky sú skryté */ prechod: nepriehľadnosť 500 ms lineárne; ) /* Spočiatku je viditeľný iba prvý */ .posuvník- obal >
Na skrytie snímok používame vlastnosť opacity, pretože čítačky obrazovky preskočia obsah prvkov, ktoré majú display: none (pozri CSS v akcii: Neviditeľný obsah len pre používateľov čítačky obrazovky).
Vďaka kontextovému umiestneniu CSS sme vytvorili „hromadu“ snímok, pričom posledná snímka v zdroji bola pred ostatnými. Ale to nie je to, čo potrebujeme. Aby sme zachovali poradie snímok, musíme skryť všetky snímky okrem prvej.
JS používa prechod CSS, pričom mení hodnotu vlastnosti nepriehľadnosti aktuálnej snímky a pre všetky ostatné vynuluje túto hodnotu.
Kód JavaScript Prezentácia bez stránkovania Prezentácia bez stránkovania funguje kliknutím na tlačidlá „Ďalej“ a „Predchádzajúci“. Možno si ich predstaviť ako operátory prírastku a znižovania. Vždy existuje ukazovateľ (alebo kurzor), ktorý sa zvýši alebo zníži pri každom stlačení tlačidiel. Jeho počiatočná hodnota je 0 a cieľom je vybrať aktuálnu snímku rovnakým spôsobom, ako sa vyberajú prvky poľa.Keď teda prvýkrát klikneme na Ďalej, ukazovateľ sa zvýši o 1 a dostaneme druhú snímku. Kliknutím na Predchádzajúci zmenšíme ukazovateľ a získame prvú snímku. Atď.
Spolu s ukazovateľom používame metódu .eq() jQuery na získanie aktuálnej snímky. V čistom JS to vyzerá takto:
Function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );
Pamätajte - NodeList používa indexy rovnako ako pole. Ďalším spôsobom, ako vybrať aktuálnu snímku, sú selektory CSS3:
Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(ukazovateľ) ( var n = ukazovateľ + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ));
Selektor CSS3:nth-child() počíta prvky začínajúce od 1, takže k ukazovateľu musíte pridať 1. Po výbere snímky je potrebné presunúť jej nadradený kontajner sprava doľava. V jQuery môžete použiť metódu .animate():
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing) : "linear" ), možnosti); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);
V bežnom JS neexistuje metóda .animate(), takže používame prechody CSS:
Slider-wrapper ( poloha: relatívna; // požadovaný prechod: vľavo 500 ms lineárne; )
Teraz môžete zmeniť vlastnosť left dynamicky prostredníctvom objektu štýlu:
Funkcia 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"); //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "- " + currentSlide.offsetLeft + "px"; ) );
Teraz musíme vytvoriť udalosť kliknutia pre každý ovládací prvok. V jQuery môžete použiť metódu .on() a v čistom JS môžete použiť metódu addEventListener().
Musíte tiež skontrolovať, či ukazovateľ dosiahol hranice zoznamu - 0 pre „Predchádzajúci“ a celkový počet snímok pre „Ďalší“. V každom prípade musíte skryť príslušné tlačidlo:
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", previous: ".slider-previous", next) : ".slider-next", //... rýchlosť: 500, nábeh: "linear" ), možnosti); var slideTo = funkcia(snímka, prvok) ( var $currentSlide = $(možnosti.snímky, prvok). eq(slide); $(options.wrapper, element).animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $prvok = $(toto), $predchadzajuci = $(volby.predchadzajuce, $prvok), $dalsi = $(volby.nasleduje, $prvok), index = 0, celkove = $(volby.slajdy).dĺžka; $next.on("click", function() ( index++; $previous.show(); if(index == total - 1) (index = total - 1; $next.hide(); ) slideTo(index, $prvok); )); $previous.on("click", function() ( index--; $next.show(); if(index == 0) (index = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);
A v čistom JS to vyzerá takto:
Funkcia 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.slide.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), akcie: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. display = "blok"; 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 = "blok"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "none"; ) self._slideTo(self.index); ), nepravda); ));
Stránkovaná prezentácia V tomto type prezentácie je každý odkaz zodpovedný za jednu snímku, takže index nie je potrebný. Animácie sa nemenia, mení sa spôsob, akým sa používateľ pohybuje po snímkach. Pre jQuery budeme mať nasledujúci kód:(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed) : 500, easing: "linear" ), možnosti); var slideTo = funkcia(snímka, prvok) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left: - $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("aktuálne").súrodenci(). removeClass("aktuálne"); )); )); ))(jQuery);
V tomto prípade každá kotva zodpovedá ID konkrétnej snímky. V čistom JS môžete použiť aj atribút data, ktorý ukladá číselný index snímok v zozname NodeList:
Funkcia 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(); ), navigácia: 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 môžete spravovať triedy cez classList:
Link.classList.add("aktuálne");
A s IE11 možno atribúty údajov získať prostredníctvom vlastnosti množiny údajov:
Var index = parseInt(a.dataset.slide, 10) + 1;
Stránkované prezentácie s ovládacími prvkami Tieto prezentácie predstavujú určitú zložitosť kódu – musíte skombinovať použitie indexu a hash stránky. To znamená, že aktuálna snímka musí byť vybratá na základe polohy ukazovateľa a snímky vybratej prostredníctvom odkazov.Toto je možné synchronizovať pomocou číselného indexu každého odkazu v DOM. Jeden odkaz - jedna snímka, takže ich indexy budú 0, 1, 2 atď.
V jQuery bude kód vyzerať takto:
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... pagination: ".slider-pagination", //... ), options); $. 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(); // Číselný index DOM $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == celkom - 1) ( $.fn.slideshow.index = celkom - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. index, $element); $a.addClass("aktuálny"). súrodenci().removeClass("aktuálny"); )); )); ); //... ))(jQuery);
Okamžite vidíte, že sa zmenila viditeľnosť kurzora – index je teraz deklarovaný ako vlastnosť objektu prezentácie. Týmto spôsobom sa vyhneme problémom s rozsahom, ktoré môžu vzniknúť spätnými volaniami v jQuery. Kurzor je teraz dostupný všade, dokonca aj mimo menného priestoru doplnku, pretože je deklarovaný ako verejná vlastnosť objektu prezentácie.
Metóda .index() poskytuje číselný index každého odkazu.
V čistom JS takáto metóda neexistuje, takže je jednoduchšie použiť atribúty údajov:
(function() ( function 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.navigationLinks = this.el.querySelectorAll(".slider-pagination a"); this.index = 0; this.total = this.slides.length; this.setup() ; this.actions(); ), //... setup: function() ( var self = this; //... for(var k = 0; k< self.navigationLinks.length; ++k) { var pagLink = self.navigationLinks[k]; pagLink.setAttribute("data-index", k); // Или pagLink.dataset.index = k; } }, //... }; })();
Teraz môžeme prepojiť naše postupy s referenciami a použiť dátové atribúty, ktoré sme práve vytvorili:
Akcie: function() ( var self = toto; //... 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 = "blok"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), nepravda); ))
Pochopenie dimenzií Vráťme sa k nasledujúcemu pravidlu CSS:Slider-wrapper (šírka: 9999px; výška: 683px; pozícia: relatívna; prechod: doľava 500 ms lineárne; )
Ak máme veľa snímok, potom 9999 nemusí stačiť. Veľkosti snímok musíte priebežne upravovať na základe šírky každej snímky a počtu snímok.
V jQuery je to jednoduché:
// Prezentácia na celú šírku return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(okno).width()); $(options.wrapper, $element).width($(window).width() * celkovo); //... ));
Vezmite šírku okna a nastavte šírku každej snímky. Celková šírka vnútorného obalu sa získa vynásobením šírky okna a počtu snímok.
// Slideshow s pevnou šírkou return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * total); //... ));
Tu je počiatočná šírka nastavená na šírku každej snímky. Stačí si nastaviť celkovú šírku zavinovačky.
Vnútorná nádoba je teraz dostatočne široká. V čistom JS sa to robí približne rovnakým spôsobom:
// Prezentácia na celú šírku 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; // šírka výrezu var winWidth = okno .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"; }, //... };
Efekty miznutia Efekty blednutia sa často používajú v prezentáciách. Aktuálna snímka zmizne a zobrazí sa ďalšia. jQuery má metódy fadeIn() a fadeOut(), ktoré pracujú s vlastnosťami nepriehľadnosti aj zobrazenia, takže prvok sa po dokončení animácie zo stránky odstráni (display:none).V čistom JS je najlepšie pracovať s vlastnosťou opacity a použiť zásobník na umiestnenie CSS. Potom bude najprv snímka viditeľná (nepriehľadnosť: 1) a ostatné budú skryté (nepriehľadnosť: 0).
Nasledujúci súbor štýlov demonštruje túto metódu:
Posúvač ( šírka: 100 %; pretečenie: skryté; pozícia: relatívna; výška: 400px; ) .slider-wrapper ( šírka: 100 %; výška: 100 %; pozícia: relatívna; ) .snímka ( poloha: absolútna; šírka: 100 %; výška: 100 %; nepriehľadnosť: 0; ) .slider-wrapper > .slide:first-child ( nepriehľadnosť: 1; )
V čistom JS musíte zaregistrovať prechod CSS každej snímky:
Snímka ( plávajúca: vľavo; pozícia: absolútna; šírka: 100 %; výška: 100 %; nepriehľadnosť: 0; prechod: nepriehľadnosť 500 ms lineárne; )
Ak chcete v jQuery použiť metódy fadeIn() a fadeOut(), musíte zmeniť nepriehľadnosť a zobrazenie:
Snímka ( float: left; pozícia: absolútna; šírka: 100 %; výška: 100 %; zobrazenie: žiadne; ) .slider-wrapper > .slide:first-child ( display: block; )
V jQuery je kód nasledovný:
(funkcia($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", previous: ".slider-previous", next: ".slider-next" , snímky: ".slide", nav: ".slider-nav", rýchlosť: 500, nábeh: "linear" ), možnosti); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides) , element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); //. ..); ))(jQuery);
Pri animácii nepriehľadnosti je tiež potrebné zmeniť hodnoty tejto vlastnosti pre zostávajúce snímky.
V JavaScripte by to bolo:
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; } } }, //... };
Prvky médií: Video Do prezentácie môžeme zahrnúť video. Tu je príklad prezentácie videa z Vimeo:
Videá sú zahrnuté prostredníctvom prvku iframe. Ide o rovnaký vymeniteľný inline blok ako na obrázku. Vymeniteľné – pretože obsah je prevzatý z externého zdroja.
Ak chcete vytvoriť celostránkovú prezentáciu, musíte zmeniť štýly takto:
Html, telo ( okraj: 0; odsadenie: 0; výška: 100 %; minimálna výška: 100 %; /* Výška by mala byť celá stránka */ ) .posuvník ( šírka: 100 %; pretečenie: skryté; výška: 100 %; minimálna výška: 100 %; /* Výška a šírka na plnú výšku */ poloha: absolútna; /* Absolútna poloha */ ) .slider-wrapper ( šírka: 100 %; výška: 100 %; /* Výška a šírka do plná */ pozícia: relatívna; ) .snímka ( plávajúca: vľavo; pozícia: absolútna; šírka: 100 %; výška: 100 %; ) .prvok snímky ( zobrazenie: blok; /* Prvok bloku */ pozícia: absolútna; /* Absolútne umiestnenie */ šírka: 100 %; výška: 100 %; /* Celá výška a šírka */ )
Automatické prezentácie Automatické prezentácie využívajú časovače. Zakaždým, keď je funkcia časovača setInterval() zavolaná späť, kurzor sa zvýši o 1 a teda sa vyberie ďalšia snímka.Keď kurzor dosiahne maximálny počet snímok, musí sa resetovať.
Nekonečné prezentácie sa pre používateľov rýchlo stanú nudnými. Najlepšou praxou je zastaviť animáciu, keď na ňu používateľ umiestni kurzor myši, a pokračovať, keď sa kurzor presunie preč.
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( slides: ".slide", speed: 3000, easing: "linear" ), options); var timer = null; // Časovač var index = 0; // Varovanie kurzora 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) ( // Inicializácia sekvenčného časovača = setInterval ( function() ( index++; // Zväčšenie kurzora o 1 if(index == $(options.slides, element).length) ( index = 0; // Resetovanie kurzora ) slideTo(index, element); ), options.speed ); // Rovnaký interval ako v metóde.animate() ); var startStop = funkcia(prvok) ( element.hover(funkcia() ( // Zastavenie animácie clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Obnovenie animácie )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);
Oba parametre metódy .stop() sú nastavené na hodnotu true, pretože z našej sekvencie nepotrebujeme vytvárať animačné fronty.
V čistom JS sa kód zjednoduší. Pre každú snímku registrujeme prechod CSS s určitým trvaním:
Snímka ( prechod: nepriehľadnosť 3 s lineárne; /* 3 sekundy = 3 000 milisekúnd */ )
A kód bude takýto:
(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll( ".slide"); this.index = 0; // Kurzor this.timer = null; // Timer this.action(); this.stopStart(); ), _slideTo: function(slide) ( var currentSlide = this. snímky; 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; } } }, action: function() { var self = this; // Initializes the sequence self.timer = setInterval(function() { self.index++; // Увеличим курсор на 1 if(self.index == self.slides.length) { self.index = 0; // Обнулим курсор } self._slideTo(self.index); }, 3000); // Тот же интервал, что и у перехода CSS }, stopStart: function() { var self = this; // Останавливаем анимацию self.el.addEventListener("mouseover", function() { clearInterval(self.timer); self.timer = null; }, false); // Возобновляем анимацию self.el.addEventListener("mouseout", function() { self.action(); }, false); } }; })();
Navigácia pomocou klávesnice Pokročilé prezentácie ponúkajú navigáciu pomocou klávesnice, t.j. Prechádzajte snímkami pomocou tlačidiel. Pre nás to jednoducho znamená, že musíme zaregistrovať spracovanie udalosti stlačenia klávesu.Aby sme to urobili, pristúpime k vlastnosti keyCode objektu udalosti. Vráti kód stlačeného tlačidla (zoznam kódov).
Udalosti, ktoré sme pripojili k tlačidlám „Predchádzajúci“ a „Ďalej“, môžu byť teraz pripojené k klávesom „vľavo“ a „vpravo“. jQuery:
$("body").on("keydown", function(e) ( kód var = e.keyCode; if(code == 39) ( // Šípka doľava $next.trigger("click"); ) if( kód == 37) ( // šípka doprava $previous.trigger("click"); ) ));
V čistom JS budete musieť namiesto jednoduchej metódy .trigger() použiť dispatchEvent():
Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // kliknutie myšou if(code == 39) ( // Šípka doľava self .next.dispatchEvent(evt); ) if(code == 37) ( // šípka doprava self.previous.dispatchEvent(evt); ) ), false);
V slušných projektoch to nie je zvykom. Museli by sme definovať funkčnosť, ktorá poskytuje preklápanie vo verejnej metóde, a potom ju zavolať, keď sa klikne na tlačidlo. Potom, ak by iná časť programu potrebovala implementovať túto funkcionalitu, nebolo by potrebné emulovať udalosti DOM, ale mohli by sme jednoducho zavolať túto metódu.
Spätné volania Bolo by pekné mať možnosť pripojiť nejaký kód k akejkoľvek akcii prezentácie, ktorá by sa vykonala, keď sa táto akcia vykoná. Na to slúžia funkcie spätného volania – vykonajú sa len vtedy, keď nastane určitá akcia. Povedzme, že naša prezentácia má titulky a sú predvolene skryté. V čase animácie musíme zobraziť titulok pre aktuálnu snímku alebo s ňou dokonca niečo urobiť.V jQuery môžete vytvoriť spätné volanie takto:
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... callback: function() () ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing, // Spätné volanie pre aktuálnu snímku options.callback($ currentSlide)). súrodenci(options.slides). css("opacity", 0); ); //... ); ))(jQuery);
V tomto prípade je spätným volaním funkcia z .animate(), ktorá berie aktuálnu snímku ako argument. Môžete ho použiť takto:
$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Zobrazí aktuálny popis a skryje ostatné $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("pomaly"); ) )); ));
V čistom JS:
(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Naše spätné volanie this.el = document.querySelector(element); this.init(); ) Prezentácia. prototyp = ( 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); // Вызывает функцию по окончанию перехода } }; // })();
Funkcia spätného volania je definovaná ako druhý parameter konštruktora. Môžete ho použiť takto:
Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Zobrazí aktuálny popis a skryje ostatné var allSlides = wrapper. 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"); } } }); });
Externé API Zatiaľ je náš pracovný scenár jednoduchý: všetky snímky sú už v dokumente. Ak do nej potrebujeme vkladať dáta zvonku (YouTube, Vimeo, Flickr), musíme snímky dopĺňať za chodu, keď prijímame externý obsah.Keďže odpoveď zo servera tretej strany nemusí byť okamžitá, musíte vložiť animáciu načítania, aby ste ukázali, že proces prebieha:
Predchádzajúci Nasledujúci
Môže to byť gif alebo čistá animácia CSS:
#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 ( content: ""; pozícia: absolútna; farba pozadia: #000; hore:2px; zľava: 48%; výška: 38px; šírka: 2px; polomer okraja: 5px; -webkit-transform-origin: 50 % 97 %; pôvod transformácie: 50 % 97 %; -animácia webkitu: uhlová 1s lineárna nekonečná; animácia: uhlová 1s lineárna nekonečná; ) @-webkit-keyframes uhlové ( 0%(-webkit-transform:rotate(0deg) );) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes uhlové ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( obsah: ""; pozícia: absolútna; farba pozadia: #000; hore:6px; vľavo: 48%; výška: 35px; šírka: 2px; polomer-okraja: 5px; -webkit-transform-origin: 50% 94% ; pôvod transformácie: 50 % 94 %; -animácia webkitu: ptangular 6s linear infinite; animácia: 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);) )
Kroky budú takéto:
- vyžiadať si údaje zvonku
- skryť bootloader
- analyzovať údaje
- zostaviť HTML
- zobraziť prezentáciu
- spracovať prezentácie
Povedzme, že vyberieme najnovšie videá používateľa zo služby YouTube. jQuery:
(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... limit: 5, username: "learncodeacademy" ), options); //... var getVideos = function() ( // Získanie videí z YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Získanie videa ako objektu JSON $(options.loader). hide(); // Skrytie načítač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);
V čistom JavaScripte existuje ďalší krok - vytvorenie metódy na získanie JSON:
(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"; ), _getJSON: function(url , spätné volanie) ( spätné volanie = spätné volanie || function() (); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request.onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // spätné volanie objektu JSON(data); ) else ( console.log(request.status) ;) ); ), //... ); )) ();
Potom sú postupy podobné:
(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: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // objekt JSON callback(data); ) else ( console. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // Získať video YouTube var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // Získanie videa ako objektu JSON var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "žiadny"; // Skrytie zavádzača pre (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(); // Обрабатываем слайд-шоу } }; })(); Добавить метки
Niekedy musím riešiť problémy súvisiace s frontendom, aj keď ma to nebaví :)
Vlastne môj postoj ku všetkému, čo súvisí s „krásnym“, by ste mohli odhadnúť z dizajnu tejto stránky, ktorý som vytvoril iba ja :)
Relatívne nedávno som však čelil potrebe implementovať posuvník v JavaScripte, čo sa muselo urobiť bez hotových knižníc a dokonca aj bez obľúbeného jQuery každého.
Táto potreba bola spôsobená tým, že výsledkom mal byť JS skript, ktorý by bol s webom spojený cez službu tretej strany. V dôsledku toho už hotové karusely v JavaScripte neboli potrebné, pretože Na ich integráciu bolo potrebné pridať pripojenie knižnice k HTML kódu stránky pomocou značky skriptu a skopírovať samotné súbory buď na server, alebo ich stiahnuť cez cdn, ale to by si opäť vyžadovalo úpravu zdrojového kódu.
Ako vytvoriť posúvač JavaScript: začiatokDnes si myslím, že každý, kto sa ocitol v podobnej situácii, začínal hľadaním existujúceho vývoja, pretože... keď je úloha vyrobiť kolotoč JS v rámci práce, mala by byť vždy vykonaná čo najrýchlejšie. A za takýchto podmienok vám nikto nedovolí sedieť a vymýšľať si vlastné bicykle.
Zákazníkov vždy nezaujíma, ako je kód napísaný, aká je jeho architektúra, hlavnou vecou je vidieť výsledok!
Ako ste pochopili, pred napísaním posuvníka v JavaScripte bez jQuery som sa rozhodol nájsť hotový a upraviť ho tak, aby vyhovoval mojim potrebám. Prečo nie jQuery? Áno, pretože na cieľovom zdroji, kde som plánoval pripojiť svoj posúvač cez službu, bolo volanie jQuery v kóde umiestnené neskôr ako skript pripojený službou. Preto konštrukty jQuery v mojom kóde jednoducho neboli vnímané.
Ako základ som si vzal tento JavaScriptový posúvač obrázkov - https://codepen.io/gabrieleromanato/pen/pIfoD.
Rozhodol som sa tam zastaviť, pretože... jeho kód JS bol napísaný pomocou princípov OOP a jeho triedy sú založené na prototypoch, nie na banálnych funkciách.
Aby som bol úprimný, hlboko nerozumiem a neuznávam súčasný humbuk okolo JavaScriptu pomocou OOP, frameworkov a iných architektonických vecí v jazyku, ktorý bol pôvodne zamýšľaný ako jednoduchý dynamický skriptovací jazyk. Rovnako ako samotný JS, úprimne povedané, nemám ho rád s jeho syntaktickou vinaigretou, ktorá umožňuje písať rovnaké konštrukcie niekoľkými spôsobmi.
Ale, bohužiaľ, v modernom svete len málo ľudí zdieľa moje pozície, pretože... tento jazyk sa vyvíja šialeným tempom a dokonca sa pokúša získať si mysle backendových vývojárov pomocou Node.js ako alternatívy k Jave, PHP, C#, Ruby a iným monštrám.
V dôsledku toho, aby ste jednoducho nezostali bez práce, musíte potichu prísť na JavaScript. A v čistej implementácii posúvača JavaScriptu, ktorú som si vybral, som sa stretol s niečím, čím, ako viete, v tomto jazyku opovrhujem. Preto som si ho vybral, aby bol aspoň nejaký dôvod pracovať a rozumieť JavaScript OOP a prototypovým triedam - inak by som sa ich v živote dobrovoľne nedotkol :)
Na základe kódu, ktorý som našiel, som potreboval vyvinúť posuvník v čistom JS vo vyskakovacom okne (táto vec sa nazýva aj popup, popup atď.), ktorý by mal tlačidlá na prepínanie snímok a klikateľné indikátory aktuálneho šmykľavka. Taktiež bolo potrebné vyrobiť tlačidlo na zatvorenie tohto okna.
S týmto som skončil.
Vytvorenie posuvnej knižnice JSNajprv som sa rozhodol všetko múdro implementovať a urobiť pre stránku JavaScript slider vo forme knižnice, ktorú je možné prepojiť s webom pomocou jediného skriptu, v ktorom sa budú volať komponenty slideru rozdelené do podadresárov. Rozhodol som sa ho nazvať popupSlider.js na počesť jeho pôvodného účelu.
Jeho kód nájdete na GitHub na tejto adrese - https://github.com/Pashaster12/popupSlider.js
Štruktúra knižnice je nasledovná:
Priečinok Slides je určený pre obrázky. Ovládanie obsahuje obrázky ovládacích prvkov karuselu JS (tlačidlá na zatváranie posúvača a prepínanie posúvačov). A v aktívach sú statické prvky posúvača JS: označenie HTML a súbor so štýlmi CSS.
No, súbor popupSlider.js je srdcom samotnej knižnice, v ktorej sa zapisujú JavaScriptové akcie karuselu a nadväzuje sa spojenie s inými súbormi. Práve tento spojíme na stránke a zavolá ostatných.
Rozhodol som sa začať s HTML značkovaním nášho kolotoča obrázkov JS, ktorý v mojom prípade vyzerá takto:
Text 1 
Text 2 
Text 3
Na navrhnutie posúvača v JavaScripte ako kontextového okna som použil nasledujúce štýly:
#slider ( margin: auto; šírka: 600px !dôležité; pretečenie: skryté; ) #slider-wrapper ( šírka: 9999px; výška: 343px; poloha: relatívna; prechod: vľavo 400 ms lineárne; ) .slide ( float: left; width : 600px; position: relativní; overflow: hidden; ) .caption ( width: 600px; height: 110px; line-height: 1.5; font-size: 15px; font-weight: 300; text-align: center; color: # 000; display:table; ) .caption-container ( display: table-cell; vertical-align: middle; padding: 0 20px; ) #slider-nav ( position: absolute; bottom: -36px; text-align: center; left: 50%; transform: translateX(-50%); ) #slider-nav a (šírka: 8px; výška: 8px; text-decoration: none; color: #000; display: inline-block; border-radius: 50 %; margin: 0 5px; background-color: #fafafa; ) #slider-nav a.current ( background-color: #337ab7; ) .horizontal-controls ( position: absolute; display: inline-block; width: 12px ; výška: 20px; hore: 50%; margin-top: -10px; ) #prev ( background: url(../controls/arrow_left_inactive.png); vľavo: -40px; ) #prev:hover ( background: url(../controls/arrow_left_active.png); ) #next ( background: url(../controls/arrow_right_inactive.png); right: -40px; ) #next:hover ( background : url(../controls/arrow_right_active.png); ) #cq-popup ( šírka: 600px; z-index: 23; vľavo: calc(50%); hore: calc(50%); pozícia: pevná !dôležité ; opakovanie na pozadí: bez opakovania; poloha na pozadí: vpravo; farba pozadia: #fff; rodina fontov: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana" ; transform: translate(-50%, -50%) scale(1); ) #cq-popup .header ( display: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( šírka: 500px; veľkosť písma: 22px; výška riadku: 36px; ) #cq-popup-btclose ( dekorácia textu: žiadna; pozícia: absolútna; vpravo: -40px; hore: 0; pozadie: url(. ./controls/btn_delete_inactive.png); výška: 16px; šírka: 16px; ) #cq-popup-btclose:hover ( pozadie: url(../controls/btn_delete_active.png); ) #cq-popup-bg ( pozícia : pevná, vrch: 0, šírka: 100 %; výška: 100 %; pozadie: rgba(51,51,51,0,8); z-index: 22; )
V dôsledku použitia týchto štýlov JS vyzerá karusel takto:
Značky HTML aj štýly CSS som presunul do samostatných súborov popupSlider.html a popupSlider.css, ktoré sa nachádzajú v adresári aktív knižnice posuvníkov JavaScript. Urobil som to zámerne, aby používatelia pri používaní tohto kódu mohli ľahko upravovať označenie a dizajn bez toho, aby sa motali v kóde JS, kde by sa to, čo by bolo potrebné vypísať, muselo napísať priamo.
Navyše, veľa ľudí stále rádo minimalizuje JS, aby urýchlilo načítanie stránok. Bolo by teda veľmi ťažké prispôsobiť toto riešenie za špecifikovaných podmienok.
V dôsledku toho som sa rozhodol jednoducho zahrnúť hotové súbory do súboru hlavnej knižnice popupSlider.js, ktorý pre moju úlohu mal nasledujúcu formu:
Funkcia Slider(element) ( this.loadStatic(); 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.nextBtn = this.el.querySelector("#next"); this.prevBtn = toto. el.querySelector("#prev"); this.navigate(); ), navigácia: funkcia () ( var self = toto; pre (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "blok"; else if (index == 1) this.prevBtn.style.display = "none"; ), setCurrentLink: function (link) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Niekoľko poznámok k vyššie uvedenému kódu. Obsahom súboru popupSlider.js je jedna trieda JavaScript Slider, ktorá podobne ako v PHP obsahuje konštruktor a metódy triedy. Len v JS je definícia konštruktora na rozdiel od PHP povinná.
Konštruktor je definovaný pomocou nasledujúceho konštruktu:
Posuvník funkcie (prvok) ( //kód konštruktora)
Vo vnútri konštruktora musia byť špecifikované akcie, ktoré sa vykonajú pri vytváraní objektu triedy.
Samotné metódy triedy budú umiestnené vo vnútri prototypu a budú dostupné pre všetky inštancie tejto triedy JavaScript. Prototyp JS je v mojom prípade opísaný nasledujúcim dizajnom:
Slider.prototype = ( //metódy )
Mimo tela triedy sa budú nazývať takto:
Var slider = new Slider(); slider.class_method();
A v samotnom kóde triedy je k dispozícii nasledujúca metóda:
This.class_method();
Hlavnou vecou je nezabudnúť, že v JavaScripte hodnota závisí od kontextu volania, takže v telách niektorých metód, v ktorých bolo potrebné volať metódy a vlastnosti triedy, existuje takáto konštrukcia:
Var self = toto; self.class_method(); //pre prístup k metóde, ktorá je o úroveň vyššie ako kód opísanej metódy
Zdá sa, že som hovoril o všetkých nuansách písania kódu. Teraz pár slov o metódach našej triedy JavaScript, ktoré obsahujú popisy akcií JS kolotoča obrázkov.
loadStatic()
Úplne prvá metóda volaná pri vytváraní inštancie triedy v konštruktore. Zodpovedá za pridanie značky posuvníka a súboru so štýlmi do HTML kódu webovej stránky.
Najprv sa v pamäti vytvorí nová značka odkazu pomocou funkcie JavaScript document.createElement() a priradia sa jej hodnoty všetkých potrebných atribútov vrátane cesty k súboru CSS so štýlmi posuvníka JS. A nakoniec sa pridá na stránku HTML pomocou metódy JavaScript appendChild() na koniec sekcie head, kde by mali byť štýly.
Ďalej urobíme to isté pre súbor s označením HTML nášho posúvača v čistom JavaScripte. Je tu len malá nuansa: do toho istého súboru nemôžete vložiť iba súbor HTML, ako sme to urobili so súborom CSS. Existujú na to špeciálne knižnice, napríklad aby bolo možné zahrnúť HTML do HTML, výborná je knižnica z w3.org - https://www.w3schools.com/howto/howto_html_include.asp
Potom by však musel byť zahrnutý v samotnej knižnici posuvníkov alebo požiadať používateľov, aby si ho nainštalovali sami. Ale toto všetko nie je optimálne, pretože... vyžaduje veľa pohybov tela a spomaľuje rýchlosť načítania stránky kvôli dodatočným skriptom.
Nakoniec som sa rozhodol vziať obsah súboru HTML do kódu JavaScript a načítať ho do nového prvku div vytvoreného v pamäti, rovnako ako predtým, keď som do JavaScriptu vložil súbor CSS. Vygenerovaný prvok je zahrnutý na samom konci časti tela HTML kódu stránky lokality.
Ak chcete vložiť div s označením posúvača nielen na koniec tela, ale aj do konkrétneho kontajnera, môžete namiesto toho použiť nasledujúci kód:
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
Zadajte nasledujúce a uveďte požadovaný identifikátor cieľového kontajnera (v mojom prípade bude posúvač HTML JS umiestnený v prvku s ID popupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
Metóda, ktorá sa volá v konštruktore po loadStatic(), je potrebná na inicializáciu vlastností triedy zodpovedajúcich hlavným prvkom HTML, ku ktorým budeme pristupovať v nasledujúcom kóde.
Nakoniec sa zavolá metóda navigate().
navigovať ()
Pri tejto metóde sú akcie, ktoré sa vyskytnú po kliknutí na tlačidlá posuvného prepínača a navigačné prvky umiestnené pod samotným posúvačom, označené vo forme kruhov.
Pre pohodlie som kód JavaScript na zmenu snímok presunul do samostatnej metódy slide(), ale v tejto metóde ho len pripojím k udalosti kliknutia pre každé okrúhle tlačidlo v slučke.
Keď kliknete na tlačidlá „predchádzajúca snímka“ / „nasledujúca snímka“, ako vidíte, rozhodol som sa len napodobniť kliknutie na zodpovedajúci kruh, pričom som definoval požadovaný v porovnaní s aktuálnym, ktorý má triedu CSS aktuálnu.
snímka (prvok)
Metóda „zodpovedná za mágiu“ samotného kolotoča JavaScript, ktorá obsahuje kód, ktorý mení polohy snímok. Hneď na začiatku je zavolaná metóda setCurrentLink(), o ktorej si povieme trochu neskôr.
Ako vstupný parameter sa mu odovzdá objekt navigačného tlačidla posuvníka JS vo forme kruhu.
Samotný posuvný prepínač funguje takto:
Na konci metódy je popísané správanie tlačidiel „predchádzajúca snímka“/„nasledujúca snímka“, ktoré sú navrhnuté ako šípky doľava/doprava. Ak je aktuálna snímka prvou z celého zoznamu, tlačidlo na prechod na predchádzajúcu snímku je skryté. Ak je to druhé, odstráňte tlačidlo a prejdite na ďalšiu snímku.
setCurrentLink(link)
Táto metóda našej triedy posuvníkov JavaScript je zodpovedná za zvýraznenie navigačného tlačidla zodpovedajúceho aktuálnemu prvku. Tie. ak máme vybranú druhú snímku, zvýrazní sa druhé tlačidlo.
Objekt tlačidla, ktorý má byť vybraný ako aktuálny, sa odovzdá funkcii ako vstupný parameter.
Logika zvýraznenia aktuálneho prvku je jednoduchá:
Úplne posledná metóda triedy, ktorá definuje akciu pri kliknutí na tlačidlo zatvorenia posúvača vo forme krížika. Tu je kód v skutočnosti najzrozumiteľnejší zo všetkých obsiahnutých v triede posuvníkov JS.
Po kliknutí na tlačidlo zavrieť, ku ktorému sa dostanete pomocou jeho identifikátora, sa zo stránky odstráni prvok posúvača a prvok, ktorý nastavuje priesvitné pozadie. Získavajú sa tiež pomocou jedinečných identifikátorov.
Samotná metóda sa volá v predtým popísanom navigate(), ktorý obsahuje všetky scenáre akcií prebiehajúcich na našom posúvači JavaScript.
Mimochodom, ak chcete zatvoriť posúvač, keď kliknete mimo neho, pridajte do tejto metódy nasledujúci kód:
Document.getElementById("cq-popup-bg").onclick = funkcia () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
Prezentácia JavaScript založená na vyvinutej knižniciNiekedy v praxi možno budete musieť vytvoriť JS rolovací kolotoč, ktorý sa často nazýva prezentácia. V mojom prípade to nebolo potrebné, ale stále som sa rozhodol vytvoriť jeden na základe konečného kódu knižnice pre prípad, keď by to mohlo byť užitočné.
V skutočnosti sa implementácia prezentácie v JavaScripte mierne líši od bežného posúvača. Rozdiel je len v tom, že pri slide show sa slajdy prepínajú automaticky v danom časovom intervale, kým pri bežnom JS kolotoči sa menia manuálne pomocou navigačných prvkov.
SlideShow: function (timeout) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute ("data-slide"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); ), časový limit); )
Myslím, že je jasné, čo sa tu deje. Aby som vytvoril túto metódu, skopíroval som kód z udalosti kliknutia tlačidiel manuálneho posúvania a umiestnil som ho do volania JavaScriptu funkcie setInterval(), ktorá po určitom čase vykoná zadanú akciu.
Akčný skript sa odovzdá ako prvý argument ako anonymná funkcia a ako druhý sa odovzdá časový interval, ktorý som sa rozhodol urobiť ako premennú, ktorej hodnota sa odovzdá pri volaní slideShow().
Jedinou úpravou kódu v rámci setInterval(), ktorá bola potrebná, bolo určiť počet snímok a porovnať index aktuálnej snímky s ním, aby sa cyklovalo automatické prepínanie.
No, aby tento kód fungoval, musí sa zavolať samotná metóda. Rozhodol som sa to všetko urobiť v rovnakom navigate(), čo je presne zbierka najrôznejších skriptov. Hovor som umiestnil na úplný koniec a ako argument som uviedol hodnotu časového intervalu pre automatickú zmenu snímok v našej JS prezentácii (vybral som 2 000 milisekúnd alebo 2 sekundy, toto číslo môžete podľa potreby zmeniť):
self.slideShow(2000);Potom skontrolujte fungovanie posúvača JavaScript a nezabudnite vyčistiť prehliadač.
Teoreticky by všetko malo fungovať. Ak nie, preštudujte si chyby v konzole prehliadača a podeľte sa o ne v komentároch.
Vďaka tomu sme dostali JS slide show, v ktorej sa snímky prepínajú automaticky a v kruhu, t.j. keď sa dosiahne posledná snímka, predstavenie prejde do novej slučky a predstavenie sa začne znova od úplne prvého prvku.
Pri práci s rôznymi JS knižnicami pre obrázkové kolotoče a recenzie som si všimol, že vývojári túto prax aktívne využívajú, no s určitým doplnením. Vo všetkých riešeniach, ktoré som videl, sa automatická prezentácia preruší, ak používateľ manuálne prepne. Tak som sa rozhodol urobiť to isté vo svojej knižnici.
Na prerušenie automatického zobrazovania kolotočových snímok JavaScriptu som sa rozhodol použiť štandardnú JS funkciu clearInterval(), ktorej odovzdávam ako argument identifikátor časového intervalu, ktorý vracia funkcia setInterval() pri jeho nastavení.
V dôsledku toho som dostal nasledujúci kód, ktorý som sa rozhodol nenapísať ako samostatnú metódu:
ClearInterval(self.slideCycle);
A umiestnil ho na miesta, kde sú popísané úkony pri klikaní na rôzne navigačné prvky, t.j. v nasledujúcom:
Link.addEventListener("kliknutie", funkcia (e) (...)); self.prevBtn.addEventListener("kliknutie", funkcia (e) (...)); self.nextBtn.addEventListener("kliknutie", funkcia (e) (...));
Je lepšie zavolať clearInterval() bližšie k samotnej udalosti kliknutia, hlavná vec je pred ňou a nie po nej.
Integrácia jazdca JavaScript do webovej stránkyTakže náš posuvník v čistom JS je pripravený. Teraz už zostáva len pripojiť ho k stránke.
Ak to chcete urobiť, musíte postupne vykonať nasledujúce kroky, ktoré sú vo všeobecnosti štandardnými akciami pri integrácii knižníc JavaScript tretích strán.
Krok 1 . Súbory knižnice skopírujeme na našu webovú stránku do samostatného adresára.
Krok 2. Pridajte nasledujúci kód do kódu HTML stránok, na ktorých bude potrebné zobraziť posúvač, a umiestnite ho pred koncovú značku tela:
Krok 3. Nasledujúci kód na volanie kolotoča JS umiestnime do akéhokoľvek existujúceho súboru JavaScript, ktorý je zahrnutý na stránke po pripojení samotného posúvača:
Var aSlider = new Slider("#slider");
Ako vidíte, tento kód v podstate vytvára objekt triedy Slider, ktorý je obsiahnutý v popupSlider.js. Preto by sa mal volať až po pripojení samotného súboru triedy k stránke.
Pridanie nových snímok do kolotoča JavaScriptVšetko je tu veľmi jednoduché. Keďže naše snímky sú prevzaté zo samostatného adresára knižnice snímok, pri pridávaní nových obrázkov do nich stačí hodiť potrebné súbory a najprv im dať rovnakú veľkosť ako ostatné.
A potom v kóde súboru assets/popupSlider.html pridajte nový blok do kontajnera s id slider-wrapper :
Text
V zásade môžete jednoducho skopírovať podobný existujúci a zmeniť cestu k súboru obrázka a text podpisu (ak je to vôbec potrebné).
Budete tiež musieť pridať nový navigačný prvok vo forme kruhu, pretože... V súčasnosti ešte nie je implementované jeho automatické pridávanie. Ak to chcete urobiť, musíte do kontajnera s identifikátorom slider-nav pridať nasledujúci kód a napísať ho na úplný koniec:
Hodnota atribútu data-slide musí byť väčšia ako najväčšia hodnota ostatných prvkov. Stačí zvýšiť maximálny prúd o jeden.
Zbalenie kolotoča JS do jedného skriptuTo je všetko, posúvač JavaScript je pripravený a pripojený. Osobne odporúčam využiť túto možnosť v praxi, ak ju vôbec potrebujete :)
Mimochodom, na urýchlenie jeho prevádzky môžete ďalej komprimovať statické komponenty: súbory CSS, HTML a JavaScript. Neurobil som to a ponúkol som vám miniifikovaný kód, pretože teraz existuje veľa frontendových zostavovacích systémov: Gulp, Grunt, Webpack a ďalšie. A každý z nich má svoje vlastné algoritmy na kompresiu a pripojenie súborov.
Minifikované výsledky môžu navyše v rôznych operačných systémoch fungovať odlišne. Vo všeobecnosti existuje veľa dôvodov.
A samotné zdrojové kódy si myslím, že nie sú také ťažké, aby potrebovali tento postup. Ak ich však potrebujete, nakonfigurujte minifikáciu sami, berúc do úvahy váš operačný systém a zberateľa.
Ako som napísal na úplnom začiatku, na vyriešenie úlohy, ktorá bola pre mňa pôvodne nastavená, som potreboval získať jeden súbor JS na správne používanie môjho posúvača prostredníctvom služby tretej strany na stránke. Z tohto dôvodu som prísne vzaté nepoužil hotové knižnice tretích strán.
Potom sa vám bude hodiť možnosť jediného skriptu kolotoča JavaScript, pretože... všetok obsah bude obsiahnutý priamo v nej, vrátane HTML/CSS kódu, ktorý je v prípade knižnice uložený v samostatných súboroch.
Scenár sa v mojom prípade skladá z dvoch častí. Prvá časť obsahovala obsah súboru popupSlider.js, ktorý už druhýkrát predstavovať nebudem. Vložte ho sami, odstráňte popis metódy loadStatic() a jej volanie z kódu triedy, pretože nebudeme ich potrebovať.
Druhou časťou jediného skriptu posúvača JavaScript pre lokalitu je obslužný program pre udalosť DOMContentLoaded, ku ktorej dochádza pri načítaní obsahu stránky.
Tam pridáme karuselový JS kód na HTML/CSS stránku a vytvoríme objekt triedy Slider, čo je ekvivalent aktivácie samotného slidera.
Schematicky kód vyzerá takto:
/* obsah popupSlider.js bez opisu metódy loadStatic() a jej volania */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*kód css*/ \ /* html kód * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Keďže v mojom prípade bola možnosť nahrávania súborov na server úplne uzavretá, musel som nahrať obrazové súbory ovládacích prvkov kolotoča JavaScript do cloudu a namiesto ciest k nim v kóde HTML a CSS napísať odkazy vygenerované počas šetrenie.
Ak takéto ťažkosti nemáte, nemusíte nič meniť, ale nezabudnite skopírovať adresáre knižnice snímok a ovládacích prvkov na server a zadať k nim správne cesty.
Custom JS slider - perspektívy vývojaAby som bol úprimný, neplánujem sa venovať cielenej podpore a rozvoju mnou vytvoreného riešenia :) Momentálne existuje kopa podobných sliderov a malý vozík, ktoré majú na rozdiel od toho môjho svoju históriu, sú dôkladne testované a sú podporované veľkou komunitou používateľov a vývojárov.
Akosi nie je pre mňa zaujímavé začať celú túto cestu od nuly sám a vytvoriť ďalšiu motorku a vlastne na to nemám čas. Ale na druhej strane je tento posuvník JavaScript vynikajúcou príležitosťou na precvičenie vývoja refaktorovaním jeho kódu a implementáciou nových zaujímavých funkcií, ktoré možno ešte neexistujú.
Ak teda rovnako ako ja potrebujete kódovú základňu na experimenty a máte aspoň trochu voľného času navyše, skopírujte si kód JavaScript slideru, ktorý som opísal, alebo sa pridajte k prispievateľom na GitHub. Úložisko je otvorené a odkaz naň som uviedol na začiatku článku.
Ak chcete zlepšiť svoje front-endové zručnosti na mojom výtvore, môžem vám dokonca poskytnúť malý zoznam úprav a vylepšení, ktoré kód potrebuje a ktoré by vás mohli zaujímať z hľadiska ich implementácie:
Zoznam úprav, ktoré som uviedol, samozrejme nie je konečný a možno ho doplniť. Napíšte o svojich návrhoch, myšlienkach a želaniach do komentárov pod článkom a zdieľajte ich so svojimi priateľmi prostredníctvom sociálnych sietí, aby ste ich tiež zapojili do vývoja.
Žiadam vás, aby ste môj kód neposudzovali striktne, pretože ako som už povedal, nepovažujem sa za špecialistu na Frontend a ani ním nie som. Som otvorený aj všetkým vašim pripomienkam k štýlu kódovania a dúfam, že sa od vás niečo naučím a vy odo mňa, t.j. plní hlavný účel vývoja a podpory produktov OpenSource.
Zapojte sa do projektových komunít, prihláste sa na odber aktualizácií a dokonca mi môžete pomôcť aj finančne pomocou formulára priamo pod článkom, ak som vám mohol s niečím pomôcť alebo sa vám jednoducho páči to, čo robím :)
To je všetko, čo som chcel povedať! Všetko najlepšie! 🙂
P.S. : ak potrebujete webovú stránku alebo potrebujete vykonať zmeny na existujúcej, ale nie je na to čas ani chuť, môžem vám ponúknuť svoje služby.
Viac ako 5 rokov skúseností s profesionálnym vývojom webových stránok. Práca s PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular a ďalšími technológiami vývoja webu.
Skúsenosti s vývojom projektov na rôznych úrovniach: vstupné stránky, firemné weby, internetové obchody, CRM, portály. Vrátane podpory a rozvoja projektov HighLoad. Prihlášky posielajte e-mailom [chránený e-mailom].
Ahojte všetci!
Vývojári všetkých odvetví sa pri tvorbe svojho ďalšieho webového projektu často zaujímajú o otázku, ako prezentovať svojim používateľom rôzne typy obrázkov, či už sú to fotografie alebo sady obrázkov. Zvedavé hlavy online priestoru, z väčšej časti samozrejme ide o „buržoázny“ priestor, preto hľadajú stále nové a nové riešenia na vytváranie veľkolepých, farebných a hlavne funkčných prezentácií a fotogalérií. Z veľkej časti sú prispôsobené vývojármi tak, aby vyhovovali dizajnu šablóny vytváraného webového projektu, alebo vo forme pluginov a modulov pre konkrétny engine pre správu stránok. Stojí za to pozrieť sa na moderné šablóny, pre ktoré sa ani jedna téma, až na zriedkavé výnimky, nezaobíde bez nejakého zásuvného posúvača alebo jednoduchého rotátora obrázkov. Je teda pochopiteľné, že mnohí weboví vývojári chcú mať niečo také vo svojom arzenáli a svojich čitateľov maximálne prekvapiť efektívnym prezentovaním obrázkov na svojich stránkach.
V nadväznosti na prebiehajúcu sériu recenzií vznikajúcich nových riešení pri tvorbe som sa rozhodol dať dokopy úplnejšiu zbierku najzaujímavejších a najefektívnejších prezentácií a fotogalérií, s akými som sa kedy stretol, vytvorených pomocou kúzla jQuery.
Hneď upozorňujem, že v recenzii rozoberané zdroje sú prevažne v angličtine, ale myslím, že kto to potrebuje, príde na to intuitívne alebo s pomocou prekladateľov, ktorých je tucet desať. A ak budete dosť usilovne hľadať, nájdete popisy techniky vytvárania niektorých galérií a posúvačov v ruštine, pretože mnohí naši weboví vývojári prekladajú pri práci na konkrétnom projekte najskôr pre seba a potom uverejňujú podrobné popisy všetkých svojich manipulácií. pre voľný prístup.
Takto som to napríklad robil ja, keď som pracoval na mechanizme tvorby , najskôr som v burzhunete našiel možnosť galérie, ktorá sa mi hodila, preložil som ju pre lepšie pochopenie toho, čo robím, a v budúcnosti toto sa ukázalo, dovolím si dúfať, nie zlý článok o používaní skriptu Highslide s ukážkami práce v rôznych variáciách aplikácií.
A tak dosť bolo zbytočných textov, prejdime priamo k recenzii, pozerajme, čítajme stručné vysvetlivky a vyberajme si z obrovského množstva nových jQuery pluginov a skriptov na implementáciu zaujímavých obrázkových sliderov, fotogalérií, prezentácií na vašich stránkach: s posúvače automatickej a ručnej zmeny, posúvače obrázkov na pozadí, s miniatúrami a bez nich atď. a tak ďalej...
Of.Site | Demo
Kompletná, prispôsobiteľná galéria obrázkov jQuery s prvkami prezentácie, prechodovými efektmi a viacerými možnosťami albumov. Kompatibilné so všetkými modernými stolnými a mobilnými prehliadačmi.
Návod, ako vytvoriť galériu na celú obrazovku pomocou jQuery. Myšlienkou je, aby sa miniatúra odporúčaného obrázka na celú obrazovku zobrazila nabok s odrazom, keď sa pohybujete po obrázkoch pomocou šípok alebo kliknutia myšou. Veľké obrázky sa posúvajú nahor alebo nadol v štýle prezentácie v závislosti od vybratého prechodu. Schopnosť zmeniť mierku obrázka, vďaka čomu je obrázok na pozadí viditeľný v režime celej obrazovky alebo prispôsobený veľkosti stránky.
Paralaxný posúvač
Parallax Slider je zaujímavým riešením pre organizáciu zobrazovania obrázkov vo forme prezentácie s prvkami manuálneho ovládania. Pozornosť priťahuje originálne umiestnenie miniatúr obrázkov. Oficiálna webová stránka obsahuje úplný rozpis toho, ako integrovať a nakonfigurovať posúvač.
Minimalistická galéria prezentácií s jQuery je vynikajúca galéria obrázkov s prvkami na automatické zmeny obrázkov, ako aj s možnosťou manuálneho ovládania zobrazenia a výberu obrázkov z rozbaľovacieho bloku s mriežkou miniatúr. Jednou z nevýhod je absencia prezerania obrázkov v plnej veľkosti, ale to je minimalizmus tejto galérie.
Toto je celoobrazovková prezentácia s automaticky sa meniacimi obrázkami, bez ohromujúcich efektov, všetko je jednoduché a vkusné.
Minimit Gallery je vysoko prispôsobiteľný doplnok jQuery s veľkým výberom prechodov obrázkov. Pomocou galérie Minimit môžete organizovať zobrazenie obrázkov vo forme kolotoča, prezentácie, jednoduchého rotátora a bežného posúvača obrázkov.
je malý (2 kb) doplnok jQuery, ktorý poskytuje jednoduchý a nezmyselný spôsob zobrazenia obrázkov ako prezentácie.
je pekne vyzerajúca galéria javascriptu s intuitívnym ovládaním a bezproblémovou kompatibilitou na všetkých počítačoch, telefónoch iPhone a mobilných zariadeniach. Veľmi jednoduchá inštalácia a konfigurácia
Na rozdiel od mnohých posúvačov obrázkov Javascript a jQuery je Slider.js hybridným riešením, ktoré využíva prechody a animácie CSS3.
Toto je jednostránková šablóna na vytváranie rôznych prezentácií v HTML5 a CSS3.
Diapo slideshow je projekt s otvoreným zdrojom. Ak chcete, môžete navrhnúť zmeny alebo vylepšenia. Môžete si ho stiahnuť a používať zadarmo a nič a nikto vám nebráni používať tento posúvač vo svojich projektoch. Posuvník sa ľahko prispôsobuje, medzi prezentovaným obsahom sú zaujímavé prechody a do posuvníka môžete umiestniť čokoľvek, funguje pomerne rýchlo, bez zásekov.
nie je nič iné ako ďalší nástroj na vytváranie prezentácií na webových stránkach a iných webových projektoch. Podporuje všetky moderné prehliadače, horizontálne a vertikálne animácie, podporu vlastných prechodov, callback API a mnoho ďalšieho. Vo svojich snímkach môžete použiť akékoľvek HTML prvky, je zrozumiteľný a prístupný pre začiatočníkov a je distribuovaný úplne zadarmo.
Prezentácia JavaScript pre agilný vývoj
Implementujte svoje prezentácie pomocou tohto úžasného doplnku jQuery. Vysoko prispôsobiteľný nástroj, vďaka ktorému si môžete zostaviť prezentáciu obsahu podľa svojich požiadaviek. Ak chcete poskytnúť jednoduchšiu integráciu s externými údajmi alebo údajmi z vášho CMS, . Toto je nová verzia a napísaná od začiatku. Vývojári sa snažili veľmi jasne a zrozumiteľne opísať celý proces práce s ich duchovným dieťaťom.
je doplnok jQuery, ktorý vám umožňuje transformovať neusporiadané zoznamy na prezentácie s atraktívnymi animačnými efektmi. V prezentácii môžete zobraziť zoznam snímok pomocou čísel alebo miniatúr alebo pomocou tlačidiel Predchádzajúci a Ďalší. Posuvník má veľa originálnych typov animácií, vrátane kocky (s rôznymi podtypmi), potrubia, bloku a ďalších.
Kompletná sada nástrojov na organizovanie všetkých druhov prezentácií rôzneho obsahu na vašich webových projektoch. Buržoázni chlapi sa snažili, vrátane takmer všetkých typov rôznych sliderov a galérií využívajúcich kúzlo jQuery. Posúvač fotografií, fotogaléria, dynamická prezentácia, kolotoč, posúvač obsahu, ponuka kariet a oveľa viac, vo všeobecnosti je tu priestor pre našu nepotlačiteľnú predstavivosť, aby sa mohla rozbehnúť.
Toto je doplnok prezentácie jQuery, ktorý je vytvorený s ohľadom na jednoduchosť. Obsahuje len tie najužitočnejšie funkcie pre začiatočníkov aj pokročilých vývojárov, ktoré poskytujú možnosť vytvárať jednoduché, no zároveň veľmi efektívne prezentácie, ktoré sú užívateľsky prívetivé.
— jednoduchý posúvač postavený na jQuery, jednoduchý vo všetkých ohľadoch, nevyžaduje špeciálne zručnosti, myslím si, že mnohí ho budú považovať za užitočný pri implementácii prezentácií na svojich webových stránkach. Plugin bol testovaný vo všetkých moderných prehliadačoch, vrátane pomalého prehliadača IE.
jbgallery je druh widgetu používateľského rozhrania napísaný v javascripte knižnice jQuery. Jeho funkciou je zobraziť jeden veľký obrázok ako pozadie stránky v režime celej obrazovky, niekoľko obrázkov vo forme posúvača. Všetky režimy zobrazenia majú ovládacie prvky zobrazenia. Je to svojím spôsobom zaujímavé riešenie a v niektorých prípadoch ani štandardné.
Je to ľahko použiteľný doplnok jQuery na zobrazenie vašich fotografií ako prezentácie s prechodovými efektmi medzi obrázkami (zaujímavejšie ste videli). jqFancyTransitions je kompatibilný a značne testovaný so Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
je voľne distribuovaný plugin jQuery na prezeranie obrázkov a iných informácií vo forme Lightbox. Vyskakovacie okno s ovládacími prvkami, tieňované pozadie a to všetko, jednoduché a vkusné.
Ďalší doplnok jQuery zo série Lightbox, aj keď váži neuveriteľne málo (9 KB), ale má veľa funkcií. K dispozícii je slušne navrhnuté rozhranie, ktoré môžete kedykoľvek vylepšiť alebo prispôsobiť pomocou CSS.
Už z názvu je jasné, že nejde o nič vymyslené, máme tu veľmi jednoduchý automatický posúvač obrázkov s úplne chýbajúcimi ovládacími prvkami. Ktovie, možno vás tento slider zaujme práve svojim minimalizmom.
Rotátor obrázkov s rôznymi typmi prechodov. Funguje automaticky aj kliknutím a je celkom jednoduché ho nastaviť.
— plnohodnotná galéria obrázkov, nie len posúvač. Náhľad miniatúr a možnosť výberu prechodových efektov, plná podpora pre všetky prehliadače, podrobný popis integrácie do webového projektu a bezplatná distribúcia.
Toto je implementácia prezentácií pripravených na použitie pomocou scriptaculous/prototype alebo jQuery. Horinaja je trochu inovatívne riešenie, pretože vám umožňuje pomocou kolieska posúvať obsah umiestnený v posúvači. Keď je ukazovateľ myši mimo oblasti prezentácie, rolovanie sa uskutoční automaticky; keď je ukazovateľ umiestnený nad prezentáciou, rolovanie sa zastaví.
Ide o funkciu zo série jednoduchých posúvačov obrázkov, aj keď s ovládacími prvkami na prezeranie, a preto funguje v automatickom aj manuálnom režime.
s3Slider je doplnok jQuery, ktorý vytvára prezentáciu z neusporiadaného zoznamu obrázkov a dá sa ľahko implementovať na ľubovoľnú webovú platformu.
Toto je doplnok jQuery, ktorý je optimalizovaný na spracovanie veľkého množstva fotografií a zároveň šetrí šírku pásma.
Pozadie Vegas
Plugin Vegas Background jQuery vám umožňuje pridávať nádherné obrázky na pozadí na celú obrazovku na webové stránky, všetko s prvkami prezentácie. Ak si pozorne preštudujete zložitosť práce s doplnkom, môžete nájsť veľa zaujímavých riešení, samozrejme, iba ak to potrebujete.
— posúvač ako posúvač, nič viac, nič menej, s titulkami k obrázkom alebo oznámeniam článkov a jednoduchým náhodným ovládaním.
je ľahký (približne 5 KB) javascript na organizáciu prezerania obrázkov. Automatická zmena veľkosti a mierka veľkých obrázkov vám umožňuje zobraziť obrázok v plnej veľkosti v okne prehliadača
Verzia 4 PikaChoose jQuery Image Gallery je k dispozícii! Pikachoose je ľahká prezentácia jQuery so skvelými funkciami! Vývojári doplnkov vám ponúkajú integráciu s Fancyboxom, vynikajúce témy (aj keď nie zadarmo) a oveľa viac.
Skontroluje počet obrázkov vo vašom zozname a dynamicky vytvorí súbor odkazov na fotografie ako digitálnu navigáciu. Okrem toho sa kliknutím na každý obrázok posuniete dopredu alebo dozadu a môžete tiež posúvať obrázky v závislosti od oblasti, na ktorú kliknete na obrázku (napríklad: kliknutím na ľavú stranu obrázka sa posúvajú snímky tam a späť, pre pravú stranu obrázka).
Ďalší posuvník jQuery, ktorý dokonale zapadne do akejkoľvek šablóny WordPress.
Ďalší vývoj "Nivo", ako všetko, čo chlapci z tohto štúdia robia, je plugin vyrobený vo vysokej kvalite, obsahuje 16 jedinečných prechodových efektov, navigáciu pomocou klávesnice a oveľa viac. Táto verzia obsahuje špeciálny doplnok priamo pre WordPress. Takže pre všetkých fanúšikov tohto blogovacieho enginu bude Nivo Slider to pravé pre vás.
Plugin jQuery, ktorý vám umožní rýchlo vytvoriť jednoduchý, efektívny a krásny posuvník pre obrázky akejkoľvek veľkosti.
Pirobox je ľahký skript „lightbox“ jQuery, prezeranie prebieha vo vyskakovacom bloku, ktorý sa automaticky prispôsobuje veľkosti obrázka, so všetkými ovládacími prvkami.
Tvorcovia tejto galérie ponúkajú pomerne originálnu prezentáciu obrázkov. Obrázky sa zobrazujú v miniatúrach vo forme vlny, keď kliknete na miniatúru, zobrazí sa nám stredne veľká verzia obrázka, kliknite druhýkrát a uvidíte veľký obrázok. Môžete to považovať za experiment, ale musíte uznať, že niečo nové a nezvyčajné je vždy zaujímavé.
Prezentácia na celú obrazovku s HTML5 a jQuery
Na vytváranie prezentácií a zobrazovanie obrázkov v režime celej obrazovky vývojári použili už známy plugin Vegas jQuery, ktorý obsahuje veľa nápadov a techník, ktoré boli predtým podrobne opísané v článkoch skupiny. Atraktívna je prítomnosť HTML5 audio prvkov a štýl prechodov medzi obrázkami.
Ďalší vývoj od tímu Codrops, plnohodnotná a funkčná galéria obrázkov, ale nemá zmysel to popisovať, musíte to vidieť.
Prezentácia obrázkov, obrázky miznú priamo pred vašimi očami, efekt je jednoducho úžasný.
Je rámec galérie obrázkov JavaScript postavený na knižnici jQuery. Cieľom je zjednodušiť proces vývoja profesionálnej galérie obrázkov pre web a mobilné zariadenia. Môžete ho zobraziť v kontextovom okne alebo v režime celej obrazovky.
Potichu si začíname zvykať a čakať na nové diela od tímu Codrops. Získajte vynikajúci posúvač obrázkov s nádherným 3D prechodovým efektom na prezeranie obrázkov v režime celej obrazovky.
Ďalší doplnok WordPress zo série organizátorov prezentácií. Ľahko sa integruje do takmer akéhokoľvek dizajnu a ponúka veľa možností prispôsobenia skúseným aj neskúseným používateľom.
Ďalší doplnok napísaný pre WordPress, výrazne zjednoduší organizovanie prezentácie obrázkov alebo akéhokoľvek iného obsahu na vašich blogoch.
Dobrý doplnok pre prezentáciu na integráciu do WordPress. Xili-floom-slideshow sa nainštaluje automaticky a sú povolené aj osobné nastavenia.
Slimbox2 je dobre zavedený doplnok WordPress na zobrazovanie obrázkov s efektom Lightbox. Podporuje automatickú prezentáciu a zmenu veľkosti obrázkov v okne prehliadača. A vo všeobecnosti má tento doplnok mnoho výhod oproti iným doplnkom z tejto série.
Tento doplnok/widget vám umožňuje vytvárať dynamické, riadené prezentácie a prezentácie pre váš web alebo blog bežiaci na motore WordPress.
Tento doplnok WordPress premieňa vložené obrázky galérie na jednoduchú a flexibilnú prezentáciu. Doplnok používa posúvač obrázkov FlexSlider jQuery a osobné nastavenia používateľa.
je WordPress plugin na organizovanie prezentácií fotografií, obrázkov z RSS kanálov SmugMug, Flickr, MobileMe, Picasa alebo Photobucket, funguje a zobrazuje pomocou čistého Javascriptu.
Jednoduchý posuvník pre WordPress a ďalšie. Nič nadbytočné ani ťažkopádne, práca je odvedená v minimalistickom štýle, dôraz je kladený na stabilitu a rýchlosť, výborne nadväzuje na engine správy blogu.
Skitter je podľa mňa jeden z najlepších sliderov, ktorý podporuje prácu s WordPress. Láka ma stabilita a rýchlosť ovládania, nie príliš výrazné ovládanie, prechodové efekty a celkom jednoduché prepojenie s témou.
je doplnok pre WordPress, pomocou ktorého môžete jednoducho a rýchlo usporiadať galériu obrázkov na svojom webe s možnosťou prezerania v režime prezentácie. Zobrazenie môže byť automatické alebo plne ovládané s ukážkou miniatúr a titulkov k obrázkom.
Of.Site | Demo
Zobrazuje všetky obrázky pre príspevok/stránku ako prezentáciu. Jednoduchá inštalácia. Tento doplnok vyžaduje Adobe Flash pre verziu s prechodovými animáciami, ak sa Flash nenájde, posuvník funguje ako zvyčajne.
Ďalší jednoduchý posuvník pre WordPress, zobrazuje obrázky pre príspevky a krátke oznámenia článkov. Práve takýto plugin na tomto blogu z času na čas používam.
Meteor Slides je posúvač jQuery WordPress s viac ako dvadsiatimi štýlmi prechodu, z ktorých si môžete vybrať. Autor nazval plugin „meteor“, čo pravdepodobne naznačuje rýchlosť prevádzky; možno som si nevšimol nič meteorické.
oQey Gallery je plnohodnotná galéria obrázkov s prvkami prezentácie pre WordPress, so vstavanými funkciami videa a hudby.
Ide o prezentáciu s prvkami flash animácie na prezeranie obrázkov a videí na webových stránkach a blogoch. Tento posúvač môžete umiestniť na akúkoľvek webovú stránku, v akejkoľvek veľkosti a s akýmkoľvek obsahom, ktorý sa vám páči.
Doplnok Flash Gallery premení vaše bežné galérie na úžasné obrazové steny s podporou viacerých albumov na príspevok, prezeraním na celej obrazovke a režimom prezentácie.
WOW Slider je posúvač obrázkov jQuery pre WordPress s úžasnými vizuálnymi efektmi (Explózia, Fly, Blinds, Squares, Fragments, Basic, Fade, Stack, Vertical Stack a Linear) a profesionálne navrhnutými šablónami.
Promotion Slider je doplnok jQuery, ktorý uľahčuje vytváranie jednoduchej prezentácie alebo implementáciu viacerých zón rotujúcich reklám na stránke, pretože ide o vysoko prispôsobiteľný nástroj, budete mať plnú kontrolu nad tým, čo zobrazíte v posúvači a ako modul funguje všeobecne.
| Demo
Novinka vo verzii 2.4: podpora triedenia fotografií drag-n-drop priamo cez editor WordPress, ako aj možnosť pridávať odkazy na fotografie k hlavným obrázkom. (IE8 môže mať nejaké chyby, funguje dobre vo všetkých hlavných prehliadačoch. Autori sľubujú plnú podporu pre IE8 v budúcnosti.)
| Demo
Posledným akordom tejto recenzie bude tento doplnok pre WordPress, ďalší posúvač so zaujímavými vizuálnymi efektmi na výber a zmenu obrázkov.
Pozerám sa na všetko, čo je popísané vyššie, a žasnem, akú fantáziu títo ľudia majú, ale to nie je všetko, s čím rôzni weboví vývojári v poslednej dobe prišli na tému usporiadania obrázkov na webových projektoch. Je skvelé, že teraz je možné implementovať také úžasné riešenia na vytváranie galérií a prezentácií.
Dovolím si ticho dúfať, že si v tejto kolekcii nájdete niečo zaujímavé pre seba, vytvoríte si vlastnú jedinečnú galériu alebo slider pre radosť svojich užívateľov a samozrejme aj svojho milovaného ja a kde by sme bez toho boli...
Pri vývoji webového projektu sa pravdepodobne pristihnete pri myšlienke, že by bolo pekné nájsť nejaké jednoduché, ale užitočné fotogalérie alebo prezentácie. Ale predstavte si, že obrovské množstvo galérií vyvinutých v AJAX, CSS, javascript, Lightbox a Flash je už vo vašich rukách! Dúfame, že tento článok bude pre vás mimoriadne užitočný a nájdete v ňom presne to, čo ste hľadali.
Bezplatné skripty prezentácií a lightboxov
Toto je bezplatná galéria Flash, ktorú navrhol Christopher Einarsrud.
Vytvárajte oslnivé prezentácie, prezentácie, bannery pomocou Active Slideshow Pro. Tento nástroj má za cieľ zvýšiť pravdepodobnosť úspechu pri vytváraní prezentácií a poskytuje vám kontrolu nad snímkami, textom, prechodmi a zvukom.
Vyberte svoje obľúbené obrázky tak, aby vyplnili celú obrazovku. Táto aplikácia, založená na kombinácii technológie PicLens a Media RSS, vám umožňuje jednoducho pridávať prezentácie na vašu vlastnú webovú stránku. Tieto exportované galérie je možné použiť aj ako plnohodnotné webové stránky.
Toto je nová generácia bezplatných systémov fotogalérie. Webová aplikácia nie je zaprataná zbytočnými funkciami a nastaveniami. To však neznamená, že nástroj je zlý, môže vám ponúknuť to, čo potrebujete na prácu s obrázkami.
Ide o online službu na prezeranie takmer všetkých mediálnych formátov publikovaných na internete. Služba je napísaná v javascripte a CSS, a preto je ľahké si ju navrhnúť tak, ako chcete.
Vytváranie prechodov medzi obrázkami.
Galleriffic sa inšpiroval doplnkom Cycle, ktorý vytvoril Mike Alsup. Ale s funkcionalitou na vytváranie veľkých objemov fotografií.
Pomôcka na zobrazovanie obrázkov, obsahu HTML a multimédií v štýle lightbox pre Mac, ktorý sa vznáša na povrchu webovej stránky.
Ak vytvárate roztomilú malú galériu, potom bude ručné rozloženie v pohode. Ale ak hovoríme o veľkých galériách, je nepravdepodobné, že by ste to chceli písať ručne, existujú aj iné spôsoby, konkrétne galéria automatického generovania!
Dynamická galéria obrázkov a prezentácia – už nefunguje
Asi každý už videl stránku Baracka Obamu, ktorá je jednoznačne najlepšia z tých stránok, ktoré boli robené pre prezidentských kandidátov. Nielenže je príkladom moderného kreatívneho dizajnu, ale poskytuje aj jednoduché ovládanie a navigáciu.
Doplnok jQuery, ktorý automaticky zistí príponu každého mediálneho súboru a pridá ho do príslušného prehrávača.
Bezplatná galéria vyvinutá na kompaktnej, modulárnej a objektovo orientovanej platforme pomocou javascriptovej knižnice MooTools. Nasmerujte ho na priečinok s obrázkami a automaticky ich stiahne pomocou PHP.
Flickrshow je ľahká prezentácia JavaScript pre rôzne prehliadače, ktorá poskytuje jednoduchý spôsob zobrazenia obrázkov Flickr na stránkach vašej lokality.
Protoflow - zdroj prestal existovať
Aplikácia je napísaná v javascripte pomocou Prototype a Scriptaculous na vykonanie ťažkých úloh. Na vytvorenie odrazu obrazu používa aj Reflection.js.
Veľmi krásna šablóna vyvinutá vo Flashi. Každý prevrátený obrázok zanechá na podlahe malý odraz. Rozmery zobrazených obrázkov sa upravujú v súboroch šablón. Je tiež veľmi jednoduché pridať obrázok na pozadí.
Fotogaléria vyvinutá v AJAX a zameraná na jednoduchú správu. Založené na javascripte a knižnici AJAX pre MooTools. Nevyžaduje sa žiadne skriptovanie na strane servera! Znalosť Flash sa tiež nevyžaduje. Aj keď sú vaše obrázky na Flickr, SmugMug alebo na vašom vlastnom serveri, tento nástroj ich bude môcť zobraziť.
Bezplatná webová aplikácia, ktorá vám umožní zobraziť obrázky Flickr alebo Picasa na vašom blogu alebo webovej stránke.
Fotogaléria s plynulými prechodmi, piktogramami a príjemnými odleskami.
Bezplatný prehliadač obrázkov Flash s možnosťou zmeny dizajnu. Rozhranie pozostáva z množstva pohľadníc roztrúsených po stole.
Platforma javascript, ktorá vám umožňuje rýchlo vytvárať webové stránky pomocou AJAX. Nerozumieš ničomu o javascripte? To už nie je problém. Aplikácia je navrhnutá tak, aby vyzerala viac ako HTML a CSS, takže ktokoľvek so základnými znalosťami tvorby webových stránok môže vytvárať novú generáciu webových aplikácií aj pomocou AJAX.
Táto šablóna využíva vynikajúci javascript Lightbox vyvinutý spoločnosťou Lakesh Dakar.
Tvorca fotoalbumov, ktorý vám umožňuje vytvárať a publikovať bohaté a interaktívne fotogalérie na vašich webových stránkach.
Táto aplikácia vám umožňuje uverejňovať fotogalérie na vašom webe, aj keď nerozumiete ničomu z programovania webu. To všetko vďaka javascriptovej platforme MooTools. Stačí pridať nejaké súbory javascript a CSS.
Bezplatný prehliadač obrázkov 3D Flash s možnosťou zmeny dizajnu.
Publikácie na danú tému
-
Brzdy databázy súborov - ako sa vyhnúť (z nedávnych skúseností) spomaleniu 1s 8
2. Vlastnosti programu. Často, dokonca aj pri optimálnom nastavení, 1C pracuje veľmi pomaly. Zvlášť dramaticky klesá výkon...
-
Chyba: Nepodarilo sa nakonfigurovať aktualizácie systému Windows
Máte problémy s aktualizáciou prehliadača Chrome na počítači? Pravdepodobne sa vám zobrazuje jedna z nasledujúcich správ: Aktualizácia zlyhala. Aktualizácie...