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

— Lisäosa WorldWideScripts.net

Tilaa syötteen pysymään ajan tasalla!

Uusi! Seuraa meitä kuin haluat!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Tämä jQuery plugin on koko sivun liukusäädintä välillä siirtymiseen verkkosivujen. Esimerkiksi, sinulla voisi olla kotisivu yksi levy, kontaktisivulta toisella, ja niin edelleen. Se on herkkä ja toimii kaikissa suurimmissa selaimissa, kuten Internet Explorer 6 ( : O ) Ja mobiiliselaimet.

Kuten nimestä voi päätellä, voit laittaa mitään sisälle dia (muut jQuery sisältöä, videoita, ja mitä-ei), ja jokainen dia jos haluat nähdä ylivuoto aivan kuten kuka tahansa normaali sivu. Ei ole mitään tiedän, että murtaa liukusäädintä, ja voit lisätä ääretön määrä dioja. Tämä on juuri sitä mitä tarvitaan piristää sivustosi!

Vaikka tämä on suunniteltu koko ikkunan sisällön, voit aivan yhtä helposti käyttää tätä perinteistä jQuery sisältöä liukusäädintä. Itse asiassa, pageAnimate on luultavasti parempi kuin muut liukusäätimiä koska se toimii kauniisti Internet Explorer 6!

Huomautus: Jos tarkastelet CodeCanyon esikatselu mobiiliselaimella, CodeCanyon hahmontaa ei toimi ollenkaan. Sinun täytyy käydä http://creativewebsites.me/pageAnimate/preview nähdä sen toiminnassa.

1.1 -päivitys

Versio 1.1 tulee kaksi uutta ominaisuutta: kyky antaa kunkin kuvan yksilöllinen URL (jossa käytetään hash) ja auto etenee päälle, niin liukusäädin automaattisesti käy läpi kaikki diat jatkuvasti. Molemmat ei voi ottaa samaan aikaan (en voi ajatella ketään, joka haluaisi, että joka tapauksessa).

Jos sinulla on aiempi versio asennettuna ja päivität tähän versioon, varmista, että olet hardcode 'data-slide = "0" "ominaisuus osaksi div että on luokan.pageAnimate. Kuten niin:

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

Lisäksi sinun täytyy lisätä seuraavan luokan kaikki dia laukaisee:.pageAnimate_trigger

Mitä jos JavaScript on poistettu?

Tämä plugin toimii pääasiassa JavaScript - mutta mitä jos JavaScript ei ole käytössä? Onko liukusäädintä hyödytön (ja se tarkoittaa, että ihmiset voivat vain nähdä etusivullesi!). Ei tietenkään. Voit lisätä fallback "href" linkkiä laukaisee että mene dia. Joten kun JavaScript on estetty, tämä liipaisinta ei mene dian pageAnimate, mutta vain edetä normaaliin tapaan toiselle sivulle (josta määritelty "href").

Onko pageAnimate liukusäädintä vetää sisältöä muista web-sivut?

Ei, plugin itsessään ei vedä sisältöä muista web-sivuja. Vaikka et voisi tehdä, että vain muutaman rivin Ajax tai PHP, kirjoitus itsessään ei ole, että toiminnallisuus ja kunkin dian / sivun sisällön on lisättävä käsin. Vetää sisältöä web-palvelin Ajax, vain käyttää tätä koodia:
 <Script type = "text / javascript"> $ ("#slide_id_or_class").load ("Http://www.yourserver.com/yourpage.html"); </ Script> 
(Vain muuttaa #slide_id_or_class "CSS id tai luokan pageAnimate dia, jonka haluat lisätä)

Joten miten voin tehdä Slider mennä Slide?

Se ei voisi olla helpompaa - vain lisätä tämä koodi:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Tämä teksti menee liukua 2 </a> 
Huomaa numero lisätään loppuun luokan nimi? Tuo pieni määrä määritellään, mitä liukumäki on animoitu. Mutta koska kaikki JavaScript on nolla-pohjainen (vastaa minulle täällä), meidän on miinus 1 pois levyltä numero. Niinpä esimerkiksi, jos haluamme liukusäädintä mennä liukumaan # 4 kun teksti napsautetaan, haluamme lisätä tässä luokassa: "pageAnimate_trigger 3". Jos haluamme liukusäädintä mennä liukumaan # 6, haluamme lisätä tässä luokassa: "pageAnimate_trigger 5". Kuten edellä mainittiin, voit lisätä linkin ankkuri tag, joka voidaan suorittaa ainoastaan, jos JavaScript ei ole käytössä. Niin se tarkoittaa, kävijät voivat edelleen nähdä kloonattu sivu muualla sivustossasi, jos JavaScript ei ole käytössä.

Täytyykö minun manuaalisesti lisätä linkin Joka Slide?

Ei lainkaan - käsikirjoituksen tekee kaiken työn puolestasi.

Miten voin tehdä tästä normaali sisältö Slider eikä Web-sivu Slider?

Helppoa - sinun tarvitsee vain vaihtaa yhden rivin "asetukset" jQuery käsikirjoituksen. Sinun täytyy olla div (tai muu vastaava merkki) kuin säiliö pageAnimate liukusäädintä. Yksinkertaisesti määritellä, että div script.

Onko ongelmia tai vikoja?

  1. Kun selainikkunan suurennetaan sisään tai ulos IE 8, diat eivät automaattisesti muuttaa tulla koko näytön. Olen yrittänyt vuosikausia löytää ratkaisun, mutta ei voi. Ne eivät kuitenkaan kokoa kun varsinainen ikkuna vedetään pienempiä tai suurempia. Tämä on ainutlaatuinen IE 8. Tämän ei pitäisi olla iso juttu, koska siellä ei ole liian paljon ihmisiä suurentamalla ja ulos IE8.
  2. Kun käytät jQuery 1.8.1, Firefox jäätyy kun monet laukaisee napsautetaan nopeasti peräkkäin. Toimii hienosti jQuery 1.7.2.
  3. Liukusäädintä navigointi täysin hajoaa kun zoomata älypuhelimeen. Tämä voidaan korjata lisäämällä tämä koodi <head> -osaan asiakirjan:
     <Meta name = "viewport" content = "width = laite-leveys, alustava mittakaavan = 1, maksimi-asteikko = 1"> 
  4. Liukusäädintä animaatio voisi olla hieman hermostunut vanhoihin älypuhelimissa - vaikka se ei ole liian huono.

Lataa
Muut komponentit tässä luokassaKaikki osat tämän tekijän
KommentitUsein kysyttyjä kysymyksiä ja vastauksia

Ominaisuudet

Luotu:
13 marraskuu 12

Viimeisin päivitys:
18 toukokuu 13

Korkea resoluutio:
Kyllä

Yhteensopiva Selaimet:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Tiedostoja mukana:
JavaScript JS, HTML, CSS

Ohjelmistoversio:
jQuery

Avainsanoja

eCommerce, eCommerce, Kaikki tuotteet, css, html, javascript, jQuery, jQuery liukusä, ä, dintä, sivu liukusä, ä, dintä, pageAnimate, sivunumerointi, kuninkaallinen liukusä, ä, dintä, liukusä, ä, dintä