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

Abonneer u op onze feed om de hoogte te blijven!

Nieuw! Volg ons als u het wilt!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Dit jQuery plugin is een volledige pagina slider voor het navigeren tussen webpagina's. Bijvoorbeeld, kon u uw startpagina hebben op een dia, contactpagina op een ander, en zo verder. Het is responsief en werkt in alle belangrijke browsers, waaronder Internet Explorer 6 ( :O ) En mobiele browsers.

Zoals de naam al doet vermoeden, kun je alles te zetten in een slide (andere jQuery inhoud, video's, en wat-niet), en elke dia zal scrollen om overflow te bekijken, net als een normale pagina. Er is niets dat ik weet dat zal de schuif te breken, en u kunt een oneindige hoeveelheid dia's toe te voegen. Dit is precies wat je nodig hebt om Spice up your website!

Hoewel dit is ontworpen voor volledige venster inhoud, kunt u net zo gemakkelijk dit te gebruiken als een traditionele jQuery inhoud slider. In feite is de pageAnimate is waarschijnlijk beter dan andere sliders omdat het werkt prachtig in Internet Explorer 6!

Opmerking: Als u de CodeCanyon voorvertoning in een mobiele browser te bekijken, zal CodeCanyon's rendering helemaal niet werken. Je nodig hebt om te bezoeken http://creativewebsites.me/pageAnimate/preview om in actie te zien.

Versie 1.1 UPDATE

Versie 1.1 wordt geleverd met twee nieuwe functies: de mogelijkheid om elke dia een unieke URL (met het gebruik van hasj) geven en een auto oprukkende functie, zodat de schuif automatisch doorloopt alle dia's continu. Beide kunnen niet worden ingeschakeld tegelijk (ik kan niet denken van iemand die dat toch zou willen).

Als u de vorige versie geïnstalleerd en u update naar deze versie, zorg ervoor dat u de 'data-slide = "0" "attribuut hardcode in de div dat een klasse van.pageAnimate heeft. Als volgt:

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

Ook moet u naar de volgende klasse toe te voegen aan de dia triggers:.pageAnimate_trigger

Wat als Javascript is uitgeschakeld?

Deze plugin werkt voornamelijk op JavaScript - maar wat als JavaScript is uitgeschakeld? Is de schuifknop nutteloos (en dat betekent dat mensen kunnen alleen uw homepage!). Nee natuurlijk niet. U kunt een fallback 'href' link toe te voegen aan de triggers die naar een dia. Dus als JavaScript is uitgeschakeld, zal deze trigger niet naar een dia in de pageAnimate, maar zal gewoon doorgaan op de normale manier naar een andere pagina (die u in het 'href' gedefinieerd).

Heeft de pageAnimate slider pull inhoud van andere webpagina's?

Nee, de plugin zelf geen inhoud van andere webpagina's te trekken. Hoewel je zou kunnen doen met slechts een paar regels van Ajax of PHP-code, heeft het script zelf niet hebben dat functionaliteit en content / pagina's per dia's moeten handmatig worden toegevoegd. Om de inhoud van uw web-server met Ajax te trekken, gewoon gebruik maken van deze code:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Verander gewoon #slide_id_or_class "om de CSS-id of klasse van de pageAnimate dia die u wilt toevoegen aan)

Dus hoe maak ik de Slider naar een Slide?

Het kan niet eenvoudiger zijn - voeg deze code:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Deze tekst gaat naar 2 </a> schuiven 
Let op het nummer toegevoegd aan het einde van de naam van de klasse? Dat kleine aantal bepaalt wat dia zal worden geanimeerd aan. Maar omdat alles in JavaScript is zero-based (dragen bij mij hier), moeten we min 1 van de dia nummer. Dus bijvoorbeeld, als we willen dat de slider naar schuiven # 4 wanneer de tekst wordt geklikt, zouden we deze klasse toe te voegen: "pageAnimate_trigger 3". "PageAnimate_trigger 5": als we willen dat de slider naar schuiven # 6, zouden we deze klasse toe te voegen. Zoals hierboven vermeld, kunt u een link toe te voegen aan het anker-tag, die alleen kan worden gevolgd wanneer JavaScript is uitgeschakeld. Dus dat betekent dat de bezoekers nog steeds in staat zijn om een ​​gekloonde pagina elders bekijken op uw site als ze JavaScript hebben uitgeschakeld.

Moet ik handmatig een link naar elke dia?

Helemaal niet - het script doet al het werk voor u.

Hoe maak ik dit in een normaal Content Slider en niet een web-pagina Slider?

Eenvoudig - alles wat je doen is een enkele lijn in de 'settings' van de jQuery script. U moet een div (of een ander soortgelijk label) als een container voor de pageAnimate slider hebben. Definiëren gewoon dat div in het script.

Zijn er problemen of Bugs?

  1. Wanneer het browservenster wordt ingezoomd of in IE 8, hoeft de dia niet automatisch aanpassen aan full-screen te worden. Ik heb geprobeerd voor leeftijden om een ​​oplossing te vinden, maar kan niet. Echter, ze verkleinen wanneer de werkelijke venster kleiner of groter wordt gesleept. Dit is uniek voor IE 8. dit niet een groot probleem zou moeten zijn, omdat er niet te veel mensen in- en uitzoomen op IE8.
  2. Bij het gebruik van jQuery 1.8.1, Firefox bevriest wanneer veel triggers worden geklikt in snel tempo op. Werkt prima met jQuery 1.7.2.
  3. Navigatie van de slider is volledig afbreekt wanneer u inzoomt op een smartphone. Dit kan worden opgelost door het toevoegen van deze code om de <head> sectie van uw HTML-document:
     <meta name = "viewport" content = "width = apparaat breedte; initiële schaal = 1, maximaal schaal = 1"> 
  4. Animatie van de slider is misschien een beetje springerig op oude smartphones zijn - al is het niet al te slecht.

Downloaden
Andere onderdelen in deze categorieAlle onderdelen van deze auteur
OpmerkingenVeelgestelde vragen en antwoorden

Eigenschappen

Gemaakt:
13 november 12

Laatste update:
18 mei 13

Hoge resolutie:
Ja

Compatibele Browsers:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Bestanden Inbegrepen:
JS JavaScript, HTML, CSS

Software versie:
jQuery

Trefwoorden

eCommerce, eCommerce, Alle spullen, css, html, javascript, jQuery, jQuery slider, pagina slider, pageAnimate, paginering, royal slider, schuif