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

@de1wwsAbonniere den Feed um auf dem neuesten Stand zu bleiben!

Neu! Folge uns, wie Du es möchtest!


jSimplePresentation - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Dieser Artikel stellt eine neue Vision einer Diashow als jQuery-Plugin angeboten.
Einige Verwendungsmöglichkeiten:

  • Um es anstelle von Powerpoint zu verwenden, um Ihre Ideen präsentieren
  • , Ein Produkt, Werbung für eine Website,...
  • Um ein HTML gestaltete Buch machen
  • etc, etc.

Eigenschaften

  • In der Lage, andere Plugins neben dieser einen verwenden
  • Der Lage, unbegrenzte Anzahl von Seiten zu laden
  • Es kann enthält, was Sie wollen (a Seite ist ein einfaches div)
  • Die Seiten (Mitte der Seite), werden automatisch mit dem Browser in der Größe verändert
  • Völlig und leicht anpassbar
  • Sehr einfach zu bedienen
  • Tastaturnavigation (rechts / links / SPACE / L)
  • Slideshow Option
  • Autoplay-Option
  • Loop-Option
  • Bild Vorspann Option
  • Gehen Sie zu einer bestimmten Seite (mit gesicherter Eingabekontrolle)
  • W3C Valid
  • Funktioniert auf iOS (iPhone / iPad) und sicherlich auf Android
  • Drei Themen enthalten (grau, blau, orange)
  • 4 Übergangs Voreinstellungen
  • Sie können Ihre eigenen Übergang mit einer einfachen Funktion im Plugin-Aufruf zu schreiben
  • Übergänge können für den nächsten und vorherigen Aktionen sein
  • Gut kommentiert (die meisten Aktionen im Code Kommentare enthalten)

Wie man es benutzt

JS - Syntax
 $ (Document).simplePresentation ({ autoplay: boolean, Schleife: boolean, intervalTime: integer, Vorspannung: boolean, transitionFct: Funktion }); 

JS - Beispiel mit einem vorgegebenen Übergangs
 var transitionFunction = function (elt, Quelle, Transition) { Transition.opacity (elt, Quelle, Transition); }; $ (Document).simplePresentation ({ autoplay: false, Schleife: false, intervalTime: 2000, Vorspannung: false, transitionFct: transitionFunction }); 

JS - Beispiel mit einer Übergangs wir schreiben
 var transitionFunction = function (elt, Quelle, Transition) { elt.css ("Deckkraft", "0"); // Wenn wir auf die nächste Seite gehen if (Quelle == "RIGHT") { elt.css ("margin", "100%"); elt.animate ({ "Deckkraft": 1, "Margin": "0px" }, Transition); } Else { elt.css ("margin", "100%"); elt.animate ({ "Deckkraft": 1, "Margin": "0px" }, Transition); } }; $ Präsentation = $ (document).simplePresentation ({ autoplay: false, Schleife: false, intervalTime 4000, Vorspannung: true, transitionFct: transitionFunction }); 

HTML
 <Div id = "container"> <Div id = "Seite1"> ... </ Div> <Div id = "Seite2"> ... </ Div> </ Div> 
Jedes div mit id = "pageX" stellen eine Seite.
Jede Seite muss eine ID, die mit "Seite" startet.

Kompatible Browser

Dieser Artikel arbeitet mit der folgenden Browser:
  • Firefox 4+
  • IE7 + (verwendet eine getrennte CSS-Stylesheet für IE weniger als V.9)
  • Oper
  • Chrom
  • Safari

Herunterladen
Weitere Komponenten in dieser KategorieAlle Komponenten dieses Autors
KommentareHäufige Fragen und Antworten

Eigenschaften

Erstellt:
15 11. Dezember

Letztes Update:
N / A

Hohe Auflösung:
Nein

Unterstützte Browser:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Dateien enthalten:
JavaScript JS, HTML, CSS

Software Version:
jQuery

Stichworte

eCommerce, eCommerce, Alle Elemente, Animation, Design, Steckdose, Prä, sentation, Schieberegler, Diashow, Ü, bergang