Share
Creați o slideshow jQuery care vă permite să faceți clic pe fiecare diapozitiv când JavaScript este dezactivat, fără a fi nevoie să afișați toate diapozitivele unul sub altul.
Există mai multe tutoriale care merg oamenii prin cum să creeze o prezentare jQuery, dar nu sunt multe
care se concentrează pe realizarea acesteia fără JavaScript. Aceasta deoarece majoritatea oamenilor cred că nu este posibilă decât
Voi explica o metodă extrem de simplă, care arată că este într-adevăr posibilă. Vei fi în curând
lovind-te și întrebându-mă: "Cum de nu m-am gândit la asta?" ...
În acest tutorial voi acoperi următoarele:
In primul rand, trebuie sa scriem marcajul pe care il va folosi prezentarea. Asa ca sa saritam drept
in și codificați-l:
Afișare slideshow jQuery cu file
Glisați unul
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Donec pretium arcu non-velit. Phasellus adipiscing auctor lorem. Curățirea în urnă se face în consecință. Phasellus ut diam. Cras magna libero, id id, venenatis sit amet, venenatis et, dui.
Glisați două
Nam ac nibh stau amet augue ultricies sagittis. Donec stai amet. Vivamus lacinia, nisi ac tincidunt comodo, purus nisi condimentum urna, sit amet molestie odio dolor non lectus. Cum socializează penatibus și măriți, participă la monte, nascetur ridiculus mus.
Glisați trei
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse adipiscing dui a nibh. Integer tristique lorem vitae massa. Etiam dapibus, eros sit amet euemod semper, felis erat congue lacus, sed aliquam metus libero sed elit.
- Glisați unul
- Glisați două
- Glisați trei
Acest lucru nu este încă complet, dar ca regulă generală, ar trebui
începeți întotdeauna cu minimul gol și îmbunătățiți / adăugați la acesta când
necesar.
Nu vom crea astăzi cea mai frumoasă prezentare de diapozitive ca și mine
doresc doar să demonstreze funcționalitatea mai mult decât orice.
următoarele stiluri vor crea prezentarea noastră gata de acțiune:
/ * ------------------------------------------------ ---- */ /* GLOBAL /* --------------------------------------- ------------- * / html font-size: 76%; corp font-family: arial, helvetica, sans-serif; linie înălțime: 1,4; font-size: 1.2m; umplutură: 5%; / * ------------------------------------------ ---------- * / / * SLIDESHOW / * --------------------------------- ------------------- * / #slideshow lățime: 960px; fundal-culoare: #eee; frontieră: 1px solid #ddd; #slideshow ul margine: 0; umplutura: 0; listă-tip: none; înălțime: 1%; / * IE stabilește * / #slideshow ul: după content: "."; clar: ambele; afișare: bloc; înălțime: 0; vizibilitate: ascuns; / * ------------------------------------------- --------- * / / * SLIDESHOW> SLIDES / * -------------------------------- -------------------- * / #slideshow .slides overflow: ascuns; lățime: 960px; #slideshow .slides ul / * lățimea totală a tuturor diapozitivelor - 960px înmulțit cu 3 în acest caz * / width: 2880px; #slideshow .slides li width: 920px; plutește la stânga; padding: 20px; #slideshow .slides h2 margin-top: 0; / * ------------------------------ ---------------------- * / / * SLIDESHOW> NAVIGARE / * ------------------- --------------------------------- * / #slideshow .slides-nav culoare-fundal: #ddd; border-top: 2px solid #ccc; #slideshow .slides-nav li float: stânga; #slideshow .slides-nav li a display: bloc; padding: 15px 20px; contur: nici unul;
Adăugați aceste stiluri la a slideshow.css stylesheet
într-un director CSS din rădăcină. Ar trebui să vedeți ceva acum
similar cu aceasta:
Unii dintre voi probabil vă întrebați cum va funcționa pe pământ acest lucru
până acum, așa că nu te voi mai aștepta.
Tot ce trebuie să facem este să oferim fiecăruia dintre diapozitivele noastre o identitate și o referință
ID în atributul href al elementului de navigare corespunzător. Asta este
simplu.
Noul dvs. marcaj ar trebui să arate după cum urmează:
Afișare slideshow jQuery cu file
Glisați unul
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Donec pretium arcu non-velit. Phasellus adipiscing auctor lorem. Curățirea în urnă se face în consecință. Phasellus ut diam. Cras magna libero, id id, venenatis sit amet, venenatis et, dui.
Glisați două
Nam ac nibh stau amet augue ultricies sagittis. Donec stai amet. Vivamus lacinia, nisi ac tincidunt comodo, purus nisi condimentum urna, sit amet molestie odio dolor non lectus. Cum socializează penatibus și măriți, participă la monte, nascetur ridiculus mus.
Glisați trei
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Suspendisse adipiscing dui a nibh. Integer tristique lorem vitae massa. Etiam dapibus, eros sit amet euemod semper, felis erat congue lacus, sed aliquam metus libero sed elit.
- Glisați unul
- Glisați două
- Glisați trei
Acum testați noul cod făcând clic pe fiecare filă ... Cât de cool este asta?
Aceasta nu este nicidecum o tehnică nedescoperită. Oamenii folosesc deja
pe site-uri pe care le-ați folosit, probabil, fără a realiza, cum ar fi
Site-ul Coda.
Bine, a fost distractiv! Acum este momentul să adăugați câteva animații de alunecare funky
la prezentarea noastră.
Va trebui să descărcați
minimizat
jQuery Cycle plugin care include toate tranzițiile și salvați-l ca jquery.cycle.js
în directorul "js" din rădăcina proiectului. Apoi adăugați următoarele la dvs.
sub eticheta jquery script script.
Vom crea acum slideshow.js fișierul menționat mai sus și salvați-l în
directorul "js" cu următorul cod:
Accentsconagua
$ slideshow = context: false, tabs: false, timeout: 1000, // timpul înainte de apariția următoarei diapozitive (în ms) slideSpeed: 1000, // timpul de alunecare în fiecare diapozitiv / timpul necesar pentru a glisa în fiecare diapozitiv (în ms) când faceți clic pe filele fx: 'scrollLeft', // efectul de diapozitiv pentru a utiliza init: function () // setați contextul pentru a accelera selectorii / .context = $ ('# slideshow'); // setați filele la elementele de navigație codate în mod curent this.tabs = $ ('ul.slides-nav li', this.context); // eliminați elementele de navigare codate greu din DOM // deoarece nu sunt conectate la ciclul jQuery this.tabs.remove (); // pregătiți slideshow și filele ciclului jQuery this.prepareSlideshow (); , prepareSlideshow: function () // initialize plugin-ul ciclului jquery - // pentru informatii despre optiunile setate mai jos du-te la: // http://malsup.com/jquery/cycle/options.html $ ("div. diapozitivul "ul", $ slideshow.context) .cycle (fx: $ slideshow.fx, timeout: $ slideshow.timeout, viteza: $ slideshow.slideSpeed, fastOnEvent: $ slideshow.tabSpeed, pager: $ -nav ", $ slideshow.context), pagerAnchorBuilder: $ slideshow.prepareTabs, înainte: $ slideshow.activateTab, pauzaOnPagerHover: true, pauză: true); , prepareTabs: functie (i, slide) // marcare returnare din tab-urile hardcoded pentru a fi folosita ca filele jQuery ciclu // (atribute evenimente jQuery necesare pentru file) return $ slideshow.tabs.eq (i); , activateTab: funcția (currentSlide, nextSlide) // obține fila activă var activTab = $ ('a [href = "#' + nextSlide.id + '"]', $ slideshow.context); // dacă există o filă activă dacă (activeTab.length) // eliminați stilul activ din toate filele $ slideshow.tabs.removeClass ('on'); // adăugați stilul activ la butonul activ activTab.parent () addClass ('on'); ; $ (functie () // initializeaza prezentarea cand DOM este gata $ slideshow.init (););
NOTĂ: Pentru a păstra scurt acest tutorial, nu voi explica totul
în acest nou fișier javascript, dar dacă aveți întrebări, nu ezitați
pentru a întreba în comentariile de mai jos și voi face tot posibilul pentru a vă ajuta să ieșiți)
Deschideți prezentarea actualizată într-un browser (asigurați-vă că nu există # slide- num)
sfârșitul adresei dvs. URL) și așteptați ... Vedeți culisant? ...
Grozav! Acum poți să dai clic pe file și să-l vezi ce glisează mai repede.
Deci, am reușit să lucrăm, dar ce e asta? $ Slideshow.activateTab ()
metoda pe care am adăugat-o? Ei bine, nu este absolut necesar de la ciclul jQuery
pluginul adaugă deja un .activeSlide clasă la navigarea activă
link-ul pentru tine, cu toate acestea, îmi place să-mi dau un pic mai mult control asupra navigației mele
această metodă doar adaugă o .pe clasa părintelui
a legăturii active.
Cu acest lucru, puteți adăuga următorul CSS la sfârșitul paginii noastre
slideshow.css pentru a evidenția fila activă:
#slideshow .slides-nav li.on, #slideshow .slides-nav li.on culoare-fundal: #eee; #slideshow .slides-nav li.on a poziție: relativă; top: -4px;
Când previzualizați, probabil veți observa că prima filă nu este evidențiată
încărcarea paginii ... acest lucru este ușor de rezolvat ... folosiți doar jQuery pentru a adăuga o .js
clasa la după cum se arată mai jos:
$ (functie () // adauga o clasa 'js' la corpul $ ('body') addClass ('js'); // initializeaza prezentarea cand DOM este gata $ slideshow.init; ; Apoi prefixați CSS pe care tocmai l-am adăugat cu noul .js clasă:
.js #slideshow .slides-nav li.on, .js #slideshow .slides-nav li.on a background-color: #eee; .js #slideshow .slides-nav li.on a poziție: relativ; top: -4px;
Aceasta înseamnă că butoanele evidențiate vor fi doar șablon dacă utilizatorul are javascript
activată și apoi codificăm greu .pe clasă pentru prima filă din
navigarea prin slideshow:
... și voila! Încercați să dezactivați / activați JavaScript și să îl actualizați
pentru a vă asigura că totul funcționează și că am terminat!
