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 til WorldWideScripts.net

Abonner på vores feed for at holde dig ajour !

Nyt! Følg os som du ønsker det!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Denne jQuery plugin er en hel side skyder til at navigere mellem websider. For eksempel kunne du have din hjemmeside på ét dias, kontaktside på en anden, og så videre. Det er lydhør og arbejder i alle større browsere, herunder Internet Explorer 6 ( : o ) Og mobile browsere.

Som navnet antyder, kan du sætte noget inde i et dias (andre jQuery indhold, videoer og hvad-ikke), og hver slide vil rulle for at se overløb ligesom enhver normal side. Der er ikke noget jeg kender, der vil bryde skyderen, og du kan tilføje en uendelig mængde af dias. Dette er præcis, hvad du har brug for at krydre din hjemmeside!

Selv om dette er designet til fuld vindue indhold, kan du lige så godt bruge dette som en traditionel jQuery indhold skyderen. Faktisk pageAnimate er sandsynligvis bedre end andre skydere, da det fungerer smukt i Internet Explorer 6!

Bemærk: Hvis du se CodeCanyon forhåndsvisning i en mobil browser, vil CodeCanyon gengivelse ikke arbejde på alle. Du er nødt til at besøge http://creativewebsites.me/pageAnimate/preview at se det i aktion.

Version 1.1 UPDATE

Version 1.1 kommer med to nye funktioner: evnen til at give hvert dias en unik URL (med brug af hash) og en auto fremrykkende funktion, således at skyderen automatisk cykler gennem alle dias kontinuerligt. Begge kan ikke aktiveres på samme tid (jeg kan ikke tænke på nogen, der ønsker, at alligevel).

Hvis du har den tidligere version installeret, og du opdatere til denne version, skal du sørge for, at du hardcode den "data-slide =" 0 "'attribut i div, der har en klasse af.pageAnimate. Som så:

 <div class = "pageAnimate" data-slide = "0"> </ div> 

Du vil også nødt til at tilføje følgende klasse til alle dias udløser:.pageAnimate_trigger

Hvad hvis JavaScript er deaktiveret?

Dette plugin kører primært på JavaScript - men hvad hvis JavaScript er slået fra? Er skyderen ubrugelig (og det betyder, at folk kan kun se din hjemmeside!). Nej, selvfølgelig ikke. Du kan tilføje en fallback 'href' linket til de udløsende faktorer, der går til et dias. Så når javascript er deaktiveret, vil dette udløse ikke gå til et dias i pageAnimate, men vil bare fortsætte på normal vis til en anden side (som du definerede i "href").

Er pageAnimate skyderen pull indhold fra andre web-sider?

Nej, plugin selv ikke trække indhold fra andre web-sider. Selvom du kunne gøre det med kun et par linjer af Ajax eller PHP kode, er selve scriptet ikke har denne funktionalitet og hver slide s / sidens indhold skal tilføjes manuelt. At trække indhold fra din web-server med Ajax, bare bruge denne kode:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Bare ændre #slide_id_or_class "til CSS id eller klasse af pageAnimate dias, du vil føje til)

Så hvordan gør jeg det Slider gå til en Slide?

Det kunne ikke være nemmere - bare tilføje denne kode:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Denne tekst vil gå til at glide 2 </a> 
Læg mærke til nummeret føjes til slutningen af ​​klassen navn? Den lille antal definerer, hvad dias vil blive animeret til. Men da alt i JavaScript er nul-baserede (bære over med mig her), er vi nødt til minus 1 ud af dias nummer. Så for eksempel, hvis vi ønsker skyderen til at gå til at glide # 4, når teksten er klikket, vil vi tilføje denne klasse: "pageAnimate_trigger 3". Hvis vi ønsker skyderen til at gå til at glide # 6, vil vi tilføje denne klasse: "pageAnimate_trigger 5". Som nævnt ovenfor, kan du tilføje et link til anker tag, som kun kan følges, når JavaScript er deaktiveret. Så det betyder besøgende vil stadig være i stand til at se en klonet side et andet sted på dit websted, hvis de har JavaScript deaktiveret.

Skal jeg nødt til manuelt at tilføje et link til hver Slide?

Overhovedet ikke - scriptet gør alt arbejdet for dig.

Hvordan kan jeg gøre dette til et normalt indhold Slider og ikke en web-side Slider?

Easy - alt du skal gøre er at ændre en enkelt linje i 'Indstillinger' i jQuery script. Du bliver nødt til at have en div (eller anden lignende mærke) som en beholder til pageAnimate skyderen. Du skal blot definere, at div i scriptet.

Er der nogen problemer eller Bugs?

  1. Når browservinduet er zoomet ind eller ud i IE 8, behøver dias ikke automatisk ændre størrelsen til at blive fuld skærm. Jeg har prøvet for aldre at finde en løsning, men kan ikke. Men de ændrer størrelse, når det faktiske vindue trækkes mindre eller større. Dette er enestående for IE 8. Denne bør ikke være en big deal, da der ikke vil være alt for mange mennesker zoome ind og ud på IE8.
  2. Når du bruger jQuery 1.8.1, Firefox fryser når mange triggere der klikkes hurtigt efter hinanden. Fungerer fint med jQuery 1.7.2.
  3. Skyderen navigation helt bryder ned, når du zoomer ind på en smartphone. Dette kan fastsættes ved at tilføje denne kode til <head> i dit HTML-dokument:
     <meta name = "viewport" content = "width = device-width, initial-skala = 1; maksimum-skala = 1"> 
  4. Skyderen animation kan være lidt nervøs på gamle smartphones - selvom det ikke er alt for dårlig.

Hent
Andre komponenter i denne kategoriAlle komponenter i denne forfatter
KommentarerOfte stillede spørgsmål og svar

Egenskaber

Oprettet:
13 november 12

Sidste ændring:
18 maj 13

Høj opløsning:
Ja

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

Filer Inkluderet:
JavaScript JS, HTML, CSS

Software Version:
jQuery

Søgeord

eCommerce, eCommerce, Alle emner, css, html, javascript, jquery, jquery slider, side skyderen, pageAnimate, paginering, royal skyderen, skyderen