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

Subskrybuj nasz kanał aby być na bieżąco!

Nowy! Dołącz do nas, jak chcesz!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Ta wtyczka jQuery jest pełna strona suwak do nawigacji między stronami WWW. Na przykład, możesz mieć stronę główną na jednym slajdzie, stronie kontaktowej na inny, i tak dalej. Jest czuły i działa we wszystkich głównych przeglądarek, w tym Internet Explorer 6 ( : o ) Oraz przeglądarek mobilnych.

Jak sama nazwa wskazuje, można umieścić wszystko wewnątrz slajdu (inne treści jQuery, filmy i co-nie), a każdy slajd będzie przewijać aby zobaczyć przepełnienie, tak jak każdy normalny stronie. Nic nie wiem, że złamie suwak, i można dodać nieskończoną ilość slajdów. To jest dokładnie to, czego potrzebujesz, aby urozmaicić swoją stronę!

Mimo, że ten jest przeznaczony do pełnej zawartości okna, można równie dobrze wykorzystać jako tradycyjną jQuery zawartości suwaka. W rzeczywistości, pageAnimate jest chyba lepiej niż inne suwaki ponieważ działa pięknie w programie Internet Explorer 6!

Uwaga: W przypadku wyświetlenia podglądu CodeCanyon w przeglądarce telefonu komórkowego, renderowania CodeCanyon nie będzie działać w ogóle. Musisz odwiedzić http://creativewebsites.me/pageAnimate/preview, aby zobaczyć go w akcji.

Wersja 1.1 AKTUALIZACJA

Wersja 1.1 jest wyposażony w dwie nowe funkcje: możliwość dać każdego slajdu unikalny adres URL (z wykorzystaniem hash) oraz funkcję auto naprzód tak, że suwak automatycznie przełączanie wszystkich slajdów w sposób ciągły. Oba nie mogą być włączone w tym samym czasie (nie mogę myśleć o nikim, że chcesz, że tak).

Jeśli masz zainstalowane w poprzedniej wersji i aktualizacji do tej wersji, upewnij się, że hardcode "data-slide =" 0 "" atrybutu do div, który ma klasę.pageAnimate. Tak:

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

Ponadto, należy dodać następujące klasy do wszystkich slajdów wyzwala:.pageAnimate_trigger

Co zrobić, jeśli JavaScript jest wyłączony?

Wtyczka działa przede wszystkim na JavaScript - ale co, jeśli JavaScript jest wyłączony? Czy suwak bezużyteczny (i oznacza, że ​​ludzie widzą tylko stronę główną!). Nie, oczywiście nie. Możesz dodać awaryjnej 'href' link wyzwalaczy, które go do slajdu. Tak więc, gdy JavaScript jest wyłączony, to spust nie pójdzie do slajdu w pageAnimate, ale po prostu przejść w normalny sposób do innej strony (co zdefiniowano w 'href').

Czy suwak pageAnimate wyciągnąć zawartość z innych stron internetowych?

Nie, sama wtyczka nie pobiera treści z innych stron internetowych. Mimo, że może to zrobić tylko kilka linii kodu PHP, Ajax lub, sam skrypt nie posiada tę funkcjonalność i treść każdego slajdu / Strona musi być dodane ręcznie. Aby wyciągnąć zawartość z Twojego serwera WWW z Ajax, wystarczy użyć tego kodu:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Wystarczy zmienić #slide_id_or_class "na id CSS lub klasy suwaka pageAnimate, który chcesz dodać do)

Więc jak mam zrobić suwak przejść do slajdu?

To nie może być prostsze - wystarczy dodać ten kod:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Ten tekst będzie przesuwać 2 </a> 
Należy zwrócić uwagę na szereg dodawany na końcu nazwy klasy? Ta mała liczba określa, co slajdów będzie animowana się. Ale ponieważ wszystko w JavaScript jest od zera (pokrywa się ze mną tutaj), musimy minus 1 od liczby slajdów. Tak na przykład, jeśli chcemy suwak, aby przejść do slajdów # 4, gdy tekst jest kliknięty, możemy dodać tę klasę: "pageAnimate_trigger 3". Jeśli chcemy suwak, aby przejść do slajdów # 6, możemy dodać tę klasę: "pageAnimate_trigger 5". Jak wspomniano powyżej, można dodać link do tagu kotwicy, które mogą być następnie tylko wtedy, gdy JavaScript jest wyłączony. To znaczy, użytkownicy będą nadal mogli zobaczyć sklonowany strony w innym miejscu na swojej stronie, jeżeli mają wyłączoną obsługę JavaScript.

Czy muszę ręcznie dodać link do każdej Slide?

Wcale nie - skrypt wykonuje całą pracę za Ciebie.

Jak zrobić to w normalnej zawartości Slider, a nie strony internetowej Slider?

Proste - wszystko co musisz zrobić to zmienić jedną linię w "Ustawienia" skryptu jQuery. Musisz mieć div (lub inny podobny tag) jako kontener dla suwaka pageAnimate. Wystarczy zdefiniować, że div w skrypcie.

Czy są jakieś problemy lub błędy?

  1. Gdy okno przeglądarki jest powiększony lub w IE 8, nie przesuwa się automatycznie zmienić rozmiar, aby stać się pełnym ekranie. Próbowałem przez wieki, aby znaleźć rozwiązanie, ale nie może. Jednak robią, gdy rzeczywisty rozmiar okna jest przeciągany mniejsze lub większe. To jest unikalne dla IE 8. To nie powinno być nic wielkiego, ponieważ nie będzie zbyt wielu ludzi, powiększanie i pomniejszanie na IE8.
  2. Podczas korzystania z jQuery 1.8.1, Firefox zawiesza się podczas wielu wyzwalacze są kliknięciu w krótkich odstępach czasu. Działa dobrze z jQuery 1.7.2.
  3. Nawigacja suwaka całkowicie zepsuje podczas powiększania na smartphone. Można to naprawić dodając ten kod do sekcji <head> dokumentu HTML:
     <meta name = "rzutni" content = "width = device-width; początkowa skala = 1; maksymalna skala = 1"> 
  4. Animacja suwaka może być trochę nerwowy na starych smartfonów - choć nie jest tak źle.

Pobierz
Inne akcesoria w tej kategoriiWszystkie składniki tego autora
KomentarzeNajczęściej zadawane pytania i odpowiedzi

Właściwości

Stworzony:
13 listopada 12

Ostatnia aktualizacja:
18 maj 13

Wysoka rozdzielczość:
Tak

Zgodne przeglądarki:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Google Chrome

Pliki wliczony:
JavaScript JS, HTML, CSS

Wersja oprogramowania:
jQuery

Słowa kluczowe

eCommerce, eCommerce, Wszystkie przedmioty, css, html, javascript, jquery, jquery slider, Strona suwak, pageAnimate, paginacja, Suwak kró, lewski, suwak