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

Prenumerera på vårt foder för att hålla dig uppdaterad!

Nytt! Följ oss som du vill ha det!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Denna jQuery plugin är en helsida reglaget för att navigera mellan webbsidor. Till exempel kan du ha din hemsida på en bild, kontaktsida på en annan, och så vidare. Det är lyhörd och fungerar i alla större webbläsare, inklusive Internet Explorer 6 ( :o ) Och mobila webbläsare.

Som namnet antyder, kan du sätta något inuti en bild (andra jQuery innehåll, videor och vad händer-inte), och varje bild kommer att bläddra för att visa spill precis som en vanlig sida. Det finns inget jag känner till som kommer att bryta reglaget, och du kan lägga till en oändlig mängd bilder. Detta är precis vad du behöver för att fräscha upp din hemsida!

Även om detta är avsedd för hela fönstret innehåll, kan du lika gärna använda detta som en traditionell jQuery innehåll reglaget. I själva verket är pageAnimate förmodligen bättre än andra reglagen eftersom det fungerar vackert i Internet Explorer 6!

Obs: Om du läser CodeCanyon förhandsvisning i en mobil webbläsare, kommer CodeCanyon rendering fungerar inte alls. Du måste besöka http://creativewebsites.me/pageAnimate/preview att se den i aktion.

Version 1,1 UPPDATERING

Version 1.1 kommer med två nya funktioner: förmågan att ge varje bild en unik webbadress (med hjälp av hash) och en automatisk framåt funktion så att reglaget automatiskt går igenom alla bilder kontinuerligt. Båda kan inte aktiveras samtidigt (jag kan inte tänka mig någon som vill det ändå).

Om du har en tidigare version installerad och du uppdaterar till denna version, se till att du hårdkoda "Data-slide =" 0 "" attribut i div som har en klass av.pageAnimate. Så där:

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

Dessutom måste du lägga till följande klass till alla glid utlöser:.pageAnimate_trigger

Vad händer om JavaScript är inaktiverat?

Denna plugin körs främst på JavaScript - men vad händer om Javascript är inaktiverat? Är reglaget värdelös (och som innebär att människor kan bara se din hemsida!). Nej, självklart inte. Du kan lägga till en reserv "href" länk till triggers som går till en bild. Så när JavaScript är avaktiverat, kommer utlösaren inte gå till en bild i pageAnimate, men kommer bara att fortsätta på vanligt sätt till en annan sida (som du definierat i "href").

Har reglaget pageAnimate dra innehåll från andra webbsidor?

Nej, inte plugin själv inte dra innehåll från andra webbsidor. Även om du kunde göra det med bara några rader Ajax eller PHP-kod, inte manuset själv inte har den funktionalitet och varje bild är / sidas innehåll måste läggas till manuellt. Att dra innehåll från din webbserver med Ajax, bara använda denna kod:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Just ändra #slide_id_or_class "till CSS-id eller klass pageAnimate bild som du vill lägga till)

Så hur gör jag Slider gå till ett bildspel?

Det kunde inte vara enklare - bara lägga till denna kod:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Denna text kommer att gå till glida 2 </a> 
Lägg märke till numret läggs till i slutet av klassnamnet? Den lilla antal definierar vad slide kommer att animeras till. Men eftersom allt i JavaScript är nollbaserat (bära med mig här), behöver vi minus en av bildnummer. Så till exempel, om vi vill att skjutreglaget för att gå att glida # 4 när texten klickas, skulle vi lägga till den här klassen: "pageAnimate_trigger 3". Om vi vill att skjutreglaget för att gå att glida # 6, skulle vi lägga till den här klassen: "pageAnimate_trigger 5". Som nämnts ovan, kan du lägga till en länk till ankartaggen, som endast kan följas när JavaScript är avaktiverat. Så det innebär att besökare kommer fortfarande att kunna se en klonad sida någon annanstans på din webbplats om de har JavaScript inaktiverat.

Måste jag manuellt lägga till en länk till varje bild?

Inte alls - skriptet gör allt arbete för dig.

Hur gör jag detta till en normal Content Slider och inte en web-sida Slider?

Easy - allt du behöver göra är att ändra en enda rad i "Inställningar" i jQuery manus. Du måste ha en div (eller annan liknande tag) som en behållare för reglaget pageAnimate. Helt enkelt definiera att div i skriptet.

Finns det några problem eller buggar?

  1. När webbläsarfönstret zoomas in eller ut i IE 8, inte bilderna inte automatiskt ändra storlek för att bli fullskärmsläge. Jag har försökt för åldrar att hitta en lösning, men kan inte. Men de ändra storlek när den verkliga fönstret dras mindre eller större. Detta är unikt för IE 8. Detta bör inte vara en stor sak eftersom det inte blir för många människor zooma in och ut på IE8.
  2. När du använder jQuery 1.8.1, fryser Firefox när många triggers klickas i snabb följd. Fungerar bra med jQuery 1.7.2.
  3. Reglaget navigations bryts helt ned när du zoomar in på en smartphone. Detta kan åtgärdas genom att lägga till denna kod till <head> i HTML-dokumentet:
     <meta name = "Viewport" content = "width = enhetsbredd, inledande skala = 1, maximal skala = 1"> 
  4. Skjutreglagets animering kan vara lite hoppigt på gamla smartphones - även om det inte är så illa.

Hämta
Andra komponenter i denna kategoriAlla komponenter i denna författare
KommentarerVanliga frågor och svar

Egenskaper

Skapad:
13 November 12

Senaste uppdateringen:
18 maj 13

Hög upplösning:
Ja

Kompatibla webbläsare:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Filer Ingår:
JavaScript JS, HTML, CSS

Programvaruversion:
jQuery

Nyckelord

e-handel, e-handel, Alla objekt, css, html, JavaScript, jQuery, jQuery reglaget, sida reglaget, pageAnimate, paginering, kunglig reglaget, lö, paren