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å vårt feed for å holde deg oppdatert!

Nyhet! Følg oss som du vil ha det!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Dette jQuery plugin er en hel side slider for navigering mellom nettsider. For eksempel kan du ha din hjemmeside på ett lysbilde, kontaktside på en annen, og så videre. Det er responsiv og fungerer i alle de store nettleserne, inkludert Internet Explorer 6 ( : o ) Og mobile nettlesere.

Som navnet antyder, kan du sette noe inni et lysbilde (annen jQuery innhold, videoer og hva er ikke), og hvert lysbilde vil bla for å vise overløp akkurat som en vanlig side. Det er ingenting jeg vet om som vil bryte glidebryteren, og du kan legge til en uendelig mengde lysbilder. Dette er akkurat hva du trenger for å piffe opp ditt nettsted!

Selv om dette er laget for hele vinduet innhold, kan du like gjerne bruke dette som en tradisjonell jQuery innhold slider. Faktisk er trolig bedre enn andre glidere siden det fungerer flott i Internet Explorer 6 på pageAnimate!

Merk: Hvis du viser CodeCanyon forhåndsvisning i en mobil nettleser, vil CodeCanyon gjengivelse fungerer ikke i det hele tatt. Du må besøke http://creativewebsites.me/pageAnimate/preview å se den i aksjon.

Versjon 1.1 UPDATE

Versjon 1.1 kommer med to nye funksjoner: evnen til å gi hvert bilde en unik nettadresse (med bruk av hasj) og en auto fremme funksjon slik at glidebryteren automatisk blar gjennom alle lysbilder kontinuerlig. Begge kan ikke være aktivert samtidig (jeg kan ikke tenke meg noen som ønsker det likevel).

Hvis du har den forrige versjonen installert og du oppdatere til denne versjonen, sørg for at du hardcode "data-lysbilde =" 0 "'attributt inn i div som har en klasse for.pageAnimate. Som så:

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

Også, må du legge til følgende klassen til alle raset utløser:.pageAnimate_trigger

Hva om Javascript er deaktivert?

Denne plugin kjører primært på Java - men hva om Javascript er deaktivert? Er glidebryteren ubrukelig (og det betyr at folk bare kan se hjemmesiden din!). Nei selvfølgelig ikke. Du kan legge til en fallback "href koblingen til de triggere som går til et lysbilde. Så når Javascript er deaktivert, vil dette utløse ikke gå til en side i pageAnimate, men vil bare fortsette på vanlig måte til en annen side (som du har definert i "href").

Har pageAnimate slider trekke Innhold fra andre web-sider?

Nei, det plugg selv henter ikke innhold fra andre nettsider. Selv om du kunne gjøre det med bare noen få linjer med Ajax eller PHP-kode, ikke manuset selv ikke har denne funksjonaliteten, og hvert bilde er / sidens innhold må legges manuelt. Å trekke innhold fra web-server med Ajax, bare bruk denne koden:
 <script type = "text / javascript"> $ ("#slide_id_or_class»).load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Bare endre #slide_id_or_class "til CSS-id eller klasse av pageAnimate lysbildet du vil legge til)

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

Det kunne ikke vært enklere - bare legge inn denne koden:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Denne teksten vil gå til å gli 2 </a> 
Legg merke til nummer lagt til på slutten av klassen navnet? Det lille antallet definerer hva lysbilde skal animeres til. Men siden alt i Javascript er null-basert (bære med meg her), må vi minus 1 av lysbildenummer. Så for eksempel hvis vi ønsker glidebryteren for å gå til lysbilde # 4 når teksten er klikket, vil vi legge denne klassen: "pageAnimate_trigger 3". Hvis vi ønsker glidebryteren for å gå til lysbilde # 6, vil vi legge denne klassen: "pageAnimate_trigger 5". Som nevnt ovenfor, kan du legge en link til ankerkoden, som bare kan følges når Javascript er deaktivert. Så det betyr at besøkende vil fortsatt være i stand til å vise en klonet siden andre steder på nettstedet ditt hvis de har deaktivert Javascript.

Må jeg manuelt legge en link til hvert lysbilde?

Ikke i det hele tatt - scriptet gjør hele jobben for deg.

Hvordan kan jeg gjøre dette til en normal Content Slider og ikke en Web-side Slider?

Easy - alt du gjør er å endre en eneste linje i "innstillinger" av jQuery script. Du må ha en div (eller en annen lignende tag) som en beholder for pageAnimate glideren. Bare definere at div i manuset.

Er det noen problemer eller feil?

  1. Når nettleservinduet er zoomet inn eller ut i IE 8, trenger lysbildene ikke automatisk endre størrelsen for å bli full skjerm. Jeg har prøvd i evigheter å finne en løsning, men kan ikke. Men de gjør endre størrelse når selve vinduet dras mindre eller større. Dette er unikt for IE 8. Dette bør ikke være en stor avtale siden det ikke blir for mange mennesker zoome inn og ut på IE8.
  2. Når du bruker jQuery 1.8.1, fryser Firefox når mange triggere er klikket i rask rekkefølge. Fungerer fint med jQuery 1.7.2.
  3. Glideren navigasjons bryter helt ned når du zoomer inn på en smarttelefon. Dette kan fikses ved å legge denne koden til <head> delen av HTML-dokumentet:
     <meta name = "view" content = "width = device-width, initial-skala = 1; maksimal skala = 1"> 
  4. Glideren animasjon kan være litt skvetten på gamle smarttelefoner - selv om det ikke er så ille.

Laste ned
Andre komponenter i denne kategorienAlle komponenter av denne forfatteren
KommentarerOfte stilte spørsmål og svar

Egenskaper

Laget:
13 november 12

Siste oppdatering:
18 mai 13

Høy oppløsning:
Ja

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

Filer Inkludert:
Javascript JS, HTML, CSS

Programvareversjon:
jQuery

Søkeord

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