WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

pageAnimate Web-Page Slider

— Add-On la WorldWideScripts.net

Aboneaza-te la feed-ul nostru pentru a rămâne până la data!

Nou! Urmați- ne cum vrei!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Acest plugin jQuery este o pagină slider complet pentru navigarea între pagini web. De exemplu, ai putea avea pagina dvs. de pornire pe un diapozitiv, pagina de contact pe un alt, și așa mai departe. Este receptiv și funcționează în toate browserele majore, inclusiv Internet Explorer 6 ( : o ) Și browsere mobile.

După cum sugerează și numele, puteți pune orice în interiorul unui diapozitiv (alte tipuri de conținut jQuery, video, și ceea ce-nu), și fiecare diapozitiv va derula pentru a vizualiza overflow la fel ca orice pagină normal. Nu este nimic știu de care va rupe cursorul, și puteți adăuga o cantitate infinită de diapozitive. Acest lucru este exact ceea ce aveți nevoie să-și condimenteze site-ul tau!

Deși acest lucru este proiectat pentru conținutul fereastră complet, puteți folosi la fel de ușor ca pe un slider conținut tradițional jQuery. De fapt, este, probabil, pageAnimate mai bine decât alte slidere, deoarece funcționează foarte bine în Internet Explorer 6!

Notă: Dacă vizualizați previzualizare CodeCanyon într-un browser mobil, redare CodeCanyon nu va funcționa deloc. Aveți nevoie pentru a vizita http://creativewebsites.me/pageAnimate/preview să-l văd în acțiune.

Versiunea 1.1 UPDATE

Versiunea 1.1 vine cu două noi caracteristici: capacitatea de a da fiecare diapozitiv un URL unic (cu utilizarea de hash) și o funcție de auto avansează, astfel încât cursorul cicluri automat prin toate diapozitivele continuu. Ambele nu poate fi activat în același timp (nu mă pot gândi la cineva care ar vrea asta, oricum).

Dacă aveți versiunea anterioară instalat și vă actualizați la această versiune, asigurați-vă că hardcode "date-diapozitiv =" 0 "" atribut în DIV, care are o clasă de.pageAnimate. Asa:

 <div class = "pageAnimate" date-alunecare = "0"> </ div> 

De asemenea, va trebui să adăugați următoarea clasă la toate slide declanșează:.pageAnimate_trigger

Ce se întâmplă dacă JavaScript este dezactivat?

Acest plugin funcționează în primul rând pe JavaScript - dar ce se întâmplă dacă JavaScript este dezactivat? Este cursorul inutil (și care înseamnă că oamenii pot vedea doar ca pagină de start!). Nu, desigur că nu. Puteți adăuga un link de rezervă "href" pentru a declanseaza care merg la un diapozitiv. Deci, atunci când JavaScript este dezactivat, acest declanșator nu va merge la un diapozitiv în pageAnimate, dar va continua doar în mod normal la o altă pagină (pe care ați definit în "href").

Are cursorul pageAnimate trage conținut de pe alte pagini web?

Nu, plugin-ul în sine nu trage conținut de pe alte-pagini web. Deși ai putea face asta cu doar cateva linii de cod PHP Ajax sau, script-ul în sine nu are această funcționalitate și conținutul fiecărui diapozitiv lui / pagina trebuie adăugate manual. Pentru a trage conținut din web-server cu Ajax, trebuie doar să utilizați acest cod:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Doar schimba #slide_id_or_class "la id CSS sau clasa de slide pageAnimate pe care doriți să îl adăugați la)

Deci, cum pot face Slider merge la un Slide?

Ea nu putea fi mai ușor - trebuie doar să adăugați acest cod:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Acest text va merge să alunece 2 </a> 
Observați numărul adăugat la sfârșitul numelui de clasă? Acest număr mic definește ceea ce diapozitiv va fi animată de. Dar din moment ce totul în JavaScript este bazată pe zero (poarte cu mine aici), avem nevoie pentru a minus 1 de pe numărul de diapozitive. Deci, de exemplu, dacă vrem cursorul pentru a merge să alunece # 4 în cazul în care textul este apasat, ne-ar adăuga acestei clase: "pageAnimate_trigger 3". Dacă vrem cursorul pentru a merge să alunece # 6, ne-ar adăuga acestei clase: "pageAnimate_trigger 5". După cum sa menționat mai sus, puteți adăuga un link către tag-ul ancora, care poate fi urmată numai în cazul în JavaScript este dezactivat. Asta înseamnă că vizitatorii vor fi în continuare posibilitatea de a vizualiza o pagină clonat în altă parte pe site-ul dvs. în cazul în care au JavaScript dezactivat.

Trebuie să adăugați manual un link către fiecare Slide?

Deloc - scenariu face toata munca pentru tine.

Cum fac acest lucru într-un conținut normal de Slider și nu un slider Web-pagină?

Easy - tot ce faci este schimba o singură linie în "Setări" de script-ul jQuery. Veți avea nevoie pentru a avea un div (sau un alt tag-ul similar) ca un container pentru cursorul pageAnimate. Pur și simplu definiți ca div în scenariu.

Există probleme sau bug-uri?

  1. Atunci când fereastra browser-ului este mărită sau în IE 8, lamele nu redimensiona automat pentru a deveni full-screen. Am încercat pentru vârstele să găsească o soluție, dar nu pot. Cu toate acestea, ele DO redimensiona atunci când fereastra reală este tarat mici sau mai mari. Acest lucru este unic pentru IE 8. Acest lucru nu ar trebui să fie o afacere mare, deoarece nu vor fi prea mulți oameni zoom in și pe IE8.
  2. Atunci când se utilizează jQuery 1.8.1, Firefox îngheață atunci când mulți declanșatoare se face clic în succesiune rapidă. Funcționează bine cu jQuery 1.7.2.
  3. Navigare cursorul complet strica atunci când zoom pe un smartphone. Acest lucru poate fi stabilit prin adăugarea acest cod în <head> a documentului HTML:
     <meta name = "viewport" content = "width = dispozitiv width, la scară inițială = 1; scară maxim = 1"> 
  4. Animație cursorul ar putea fi un pic nervos pe smartphone-uri vechi - deși nu e prea rău.

Descărcați
Alte componente din această categorieToate componentele acestui autor
ComentariiÎntrebări frecvente și răspunsuri

Proprietăți

Creată:
13.11.12

Ultima actualizare:
18 mai 13

Rezoluție înaltă:
da

Browsere compatibile:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Fișiere incluse:
JavaScript JS, HTML, CSS

Versiune software:
jQuery

Cuvinte cheie

eCommerce, eCommerce, Toate obiectele, CSS, html, javascript, jquery, slider jquery, Pagina slider, pageAnimate, paginare, slider regal, cursor