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

jSimplePresentation

— Add- On om WorldWideScripts.net

Abonneer u op onze feed om de hoogte te blijven!

Nieuw! Volg ons als u het wilt!


jSimplePresentation - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Dit artikel is een nieuwe visie van een diavoorstelling, aangeboden als een jQuery plugin.
Sommige van mogelijke toepassingen:

  • Om het te gebruiken in plaats van powerpoint om uw ideeën te presenteren
  • Om een ​​product, adverteren een website,...
  • Om een ​​HTML ontworpen boek maken
  • etc, etc.

Kenmerken

  • In staat om andere plugins gebruiken naast deze ene
  • In staat om onbeperkt aantal pagina's laden
  • Het kan bevat wat je wilt (een pagina is een eenvoudig div)
  • De pagina's (in het midden van de pagina) worden automatisch aangepast met de browser
  • Volledig en gemakkelijk aanpasbaar
  • Zeer eenvoudig in gebruik
  • Keyboard navigatie (rechts / links / ruimte / L)
  • Slideshow optie
  • Autoplay optie
  • Loop optie
  • Afbeelding voorbelasting optie
  • Ga naar een bepaalde pagina (met beveiligde ingang controle)
  • W3C Geldige
  • Werkt op iOS (iPhone / iPad) en zeker op Android
  • Drie thema's inbegrepen (grijs, blauw, oranje)
  • 4 overgang presets
  • U kunt uw eigen transitie te schrijven met een eenvoudige functie in de plugin oproep
  • Overgangen kunnen verschillend zijn voor de volgende en vorige acties
  • Nou commentaar (de meeste acties in de code bevatten opmerkingen)

Hoe te gebruiken

JS - Syntax
 $ (Document).simplePresentation ({ autoplay: boolean, lus: boolean, intervalTime: integer, voorspanning: boolean, transitionFct: function }); 

JS - Voorbeeld met een vooraf ingestelde transitie
 var transitionFunction = function (elt, bron, transitionTime) { Transition.opacity (elt, bron, transitionTime); }; $ (Document).simplePresentation ({ autoplay: vals, lus: vals, intervalTime: 2000 voorspanning: vals, transitionFct: transitionFunction }); 

JS - bijvoorbeeld met een overgang we schrijven
 var transitionFunction = function (elt, bron, transitionTime) { elt.css ("opaciteit", "0"); // Als we gaan naar de volgende pagina if (bron == "RIGHT") { elt.css ("marginLeft", "100%"); elt.animate ({ "Ondoorzichtigheid": 1, "MarginLeft": "0px" }, TransitionTime); } Else { elt.css ("marginRight", "100%"); elt.animate ({ "Ondoorzichtigheid": 1, "MarginRight": "0px" }, TransitionTime); } }; $ Presentatie = $ (document).simplePresentation ({ autoplay: vals, lus: vals, intervalTime: 4000, voorspanning: true, transitionFct: transitionFunction }); 

HTML
 <Div id = "container"> <Div id = "pagina1"> ... </ Div> <Div id = "page2"> ... </ Div> </ Div> 
Elke div met id = "pageX" vertegenwoordigen een pagina.
Elke pagina moet een id die begint met "pagina" te hebben.

Compatibele browsers

Dit item werkt met de volgende browsers:
  • Firefox 4+
  • IE7 + (maakt gebruik van een gescheiden css stylesheet voor IE minder dan V.9)
  • Opera
  • Chrome
  • Safari

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

Eigenschappen

Gemaakt:
15 december 11

Laatste Update:
N / A

Hoge Resolutie:
Nee

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

Bestanden Inbegrepen:
JS JavaScript, HTML, CSS

Software Version:
jQuery

Trefwoorden

eCommerce, eCommerce, Alle Spullen, animatie, ontwerp, Power Point, presentatie, schuif, slideshow, overgang