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

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

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


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Das jQuery-Plugin ist ein Full-Seite Schieberegler für die Navigation zwischen Web-Seiten. Zum Beispiel könnten Sie Ihre Homepage auf einer Folie, Kontakt Seite auf eine andere zu haben, und so weiter. Es reagiert und arbeitet in allen gängigen Browsern, einschließlich Internet Explorer 6 ( :O ) Und mobilen Browsern.

Wie der Name andeutet, können Sie alles in einem Objektträger gelegt (mit jQuery Content, Videos, und was-nicht), und jede Folie wird scrollen, um Überlauf wie jede normale Seite zu sehen. Es gibt nichts, ich weiß, dass das Schieberegler zu brechen, und Sie können eine unendliche Menge an Folien hinzufügen. Das ist genau das, was Sie da runter, um Ihre Website brauchen!

Obwohl dies für die vollständige Fensterinhalt konzipiert, können Sie ebenso leicht zu nutzen, als eine traditionelle jQuery Content Slider. In der Tat ist die pageAnimate wahrscheinlich besser als andere Schieberegler, da es funktioniert wunderbar in Internet Explorer 6!

Hinweis: Wenn Sie die CodeCanyon Vorschau in einem mobilen Browser anzeigen, werden CodeCanyon Die Wiedergabe überhaupt nicht funktionieren. Sie müssen besuchen http://creativewebsites.me/pageAnimate/preview, um es in Aktion zu sehen.

Version 1.1 UPDATE

Version 1.1 kommt mit zwei neuen Features: die Fähigkeit zu jeder Folie eine eindeutige URL (mit dem Einsatz von Hash) zu geben und ein Auto-Förderung-Funktion, so dass der Schieber automatisch durch alle Folien kontinuierlich. Beide können nicht gleichzeitig aktiviert sein (ich kann nicht von jedermann, das überhaupt wollen würde denken).

Wenn Sie die vorherige Version installiert ist und Sie auf diese Version aktualisieren, stellen Sie sicher, dass Sie die "Daten-slide =" 0 "" -Attribut in die div, die eine Klasse von.pageAnimate hat codieren. Etwa so:

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

Außerdem müssen Sie die folgende Klasse, um alle der Schieber löst hinzufügen:.pageAnimate_trigger

Was ist, wenn es deaktiviert ist?

Dieses Plugin läuft in erster Linie auf JavaScript - aber was, wenn JavaScript ist deaktiviert! Ist der Schieberegler nutzlos (und das bedeutet, dass die Menschen sehen nur Ihre Homepage!). Nein natürlich nicht. Sie können eine Fallback-Link "href" auf die Auslöser, die zu einer Folie zu gehen hinzuzufügen. Also, wenn es deaktiviert ist, wird diese Trigger nicht auf eine Folie in der pageAnimate gehen, aber wird nur in der üblichen Weise auf eine andere Seite (die Sie in der 'href' definiert) gehen.

Hat der pageAnimate Schieberegler ziehen, Inhalt von anderen Web-Seiten?

Nein, das Plugin selbst nicht ziehen Sie Inhalte von anderen Web-Seiten. Obwohl man, dass mit nur ein paar Zeilen von Ajax und PHP-Code zu tun, wird das Skript selbst nicht über diese Funktionen und Inhalte der einzelnen Objektträger / der Seite müssen manuell hinzugefügt werden. Um Inhalte von Ihrem Web-Server mit Ajax zu ziehen, benutzen Sie einfach diesen Code:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Ändern Sie einfach #slide_id_or_class "auf die CSS-ID oder Klasse des pageAnimate Folie, die Sie hinzufügen möchten)

So wie ich die Slider gehen Sie zu einem Slide?

Es könnte nicht einfacher sein - nur diesen Code hinzu:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Dieser Text wird gehen, um 2 </a> schieben 
Beachten Sie die Zahl an das Ende des Klassennamen hinzugefügt? Das kleine Zahl definiert, was Dia wird animiert werden, um. Aber da alles in JavaScript basiert auf Null (mit mir tragen Sie hier), 1 müssen wir minus von der Foliennummer. So zum Beispiel, wenn wir wollen, dass die Schieberegler, um gehen zu schieben # 4, wenn der Text angeklickt wird, würden wir diese Klasse hinzu: "pageAnimate_trigger 3". "PageAnimate_trigger 5": Wenn wir wollen, dass die Schieberegler, um gehen zu schieben # 6, würden wir diese Klasse hinzuzufügen. Wie oben erwähnt, können Sie einen Link auf die Anker-Tag, der nur verfolgt werden, wenn JavaScript ist deaktiviert hinzuzufügen. Das heißt also, die Besucher werden immer noch in der Lage, eine geklonte Seite an anderer Stelle auf Ihrer Website anzuzeigen, wenn sie JavaScript deaktiviert zu sein.

Muss ich einen Link manuell hinzufügen zu jeder Folie?

Ganz und gar nicht - das Skript macht die ganze Arbeit für Sie.

Wie mache ich dies in eine normale Inhalt Slider und nicht um eine Web-Seite Slider?

Einfach - alles, was Sie tun, ist zu ändern eine einzelne Zeile in den "Einstellungen" des jQuery-Skript. Sie benötigen, um ein div (oder ein ähnliches tag) als Behälter für die pageAnimate Schieberegler haben. Definieren Sie einfach, dass div im Skript.

Gibt es irgendwelche Probleme oder Bugs?

  1. Wenn das Browser-Fenster ist in oder in IE 8 gezoomt, werden die Folien nicht automatisch die Größe in den Vollbild geworden. Ich habe seit Jahren versucht, eine Lösung zu finden, aber nicht kann. Aber sie haben die Größe, wenn die Ist-Fenster kleiner oder größer gezogen. Dies ist einzigartig in IE 8. Das sollte kein großes Problem sein, da es nicht zu viele Leute, Vergrößern und Verkleinern auf IE8 zu sein.
  2. Bei der Verwendung von jQuery 1.8.1, Firefox friert, wenn viele Trigger werden in schneller Abfolge angeklickt. Funktioniert mit jQuery 1.7.2.
  3. Die Schieberegler der Navigation komplett zusammenbricht, wenn Sie Vergrößern auf einem Smartphone. Dies kann durch Zugabe diesen Code in den <head> -Abschnitt des HTML-Dokuments festgelegt werden:
     <meta name = "Viewport" content = "width = Gerätebreite; anfänglichen Maßstab = 1; max-scale = 1"> 
  4. Die Schieberegler der Animation könnte ein wenig nervös auf alten Smartphones sein - obwohl es nicht so schlimm.

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

Eigenschaften

Erstellt:
13. November 12

Letzte Aktualisierung:
18. Mai 13

Hohe Auflösung:
Ja

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

Dateien enthalten:
JavaScript JS, HTML, CSS

Softwareversion:
jQuery

Stichworte

eCommerce, eCommerce, Alle Elemente, css, html, javascript, jquery, jQuery-Slider, Seite Schieberegler, pageAnimate, Pagination, royal Schieberegler, Schieberegler