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

Rep les nostres RSS per estar al dia!

Nou! Segueix-nos com vulguis!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Aquest plugin jQuery és un slider pàgina completa per navegar per les pàgines web. Per exemple, vostè podria tenir la seva pàgina d'inici en una diapositiva, pàgina de contacte en un altre, i així successivament. És sensible i funciona en tots els navegadors, incloent Internet Explorer 6 ( : O ) I els navegadors mòbils.

Com el seu nom indica, es pot posar res dins d'una diapositiva (altre contingut jQuery, vídeos, i el que-no), i cada diapositiva es desplaçarà per veure desbordament com qualsevol pàgina normal. No hi ha res que conec que es trenqui el control lliscant, i es pot afegir una quantitat infinita de diapositives. Això és exactament el que necessita per donar-li vida al seu lloc web!

Encara que això està dissenyat per al contingut de la finestra completa, es pot utilitzar la mateixa facilitat com un control lliscant de contingut tradicional jQuery. De fet, el pageAnimate és probablement millor que altres controls lliscants ja que funciona molt bé a Internet Explorer 6!

Nota: Si veu la vista prèvia CodeCanyon en un navegador mòbil, prestació de CodeCanyon no funcionarà en absolut. Cal visitar http://creativewebsites.me/pageAnimate/preview per veure'l en acció.

Versió 1.1 ACTUALITZACIÓ

La versió 1.1 ve amb dues noves característiques: la capacitat de donar a cada diapositiva d'una URL única (amb l'ús d'haixix) i una funció d'auto avançar perquè el lliscador commutarà automàticament entre totes les diapositives de forma contínua. Tots dos no poden estar habilitades alhora (no puc pensar en ningú que vulgui que de totes maneres).

Si vostè té la versió anterior instal·lada i actualitzar a aquesta versió, assegureu-vos de codificar el 'data-slide = "0" "atribut en el div que té una classe de.pageAnimate. Igual que:

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

A més, haurà d'afegir la següent classe a tots desencadena la diapositiva:.pageAnimate_trigger

Què passa si Javascript està desactivat?

Aquest connector s'executa principalment en JavaScript - però el que si JavaScript està desactivat? És el botó lliscant inútil (i això vol dir que la gent només pot veure la seva pàgina principal!). No, per descomptat que no. Vostè pot afegir un enllaç de retorn 'href' als factors desencadenants que van a una diapositiva. Així que quan JavaScript no està habilitat, aquest disparador no anar a una diapositiva en el pageAnimate, però s'acaba de procedir de la forma habitual a una altra pàgina (que es va definir en el 'href').

No tiri contingut d'altres web-pàgines el botó lliscant pageAnimate?

No, el propi connector no tira el contingut d'altres pàgines web. Encara que es pot fer això amb només unes poques línies de Ajax o codi PHP, el guió en si no té aquesta funcionalitat i el contingut de cada diapositiva / de la pàgina s'ha de afegir manualment. Per treure el contingut del seu servidor web amb Ajax, només ha d'utilitzar aquest codi:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("Http://www.yourserver.com/yourpage.html"); </ Script> 
(Només canvia #slide_id_or_class "per a la Identificació del CSS o classe de la diapositiva pageAnimate que voleu afegir a)

Llavors, com puc fer que el control lliscant d'anar a una diapositiva?

No podria ser més fàcil - només ha d'afegir aquest codi:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Aquest text anirà a lliscar 2 </a> 
Observi el nombre agregat al final del nom de la classe? Aquest petit nombre defineix què diapositiva es va animar a. Però com tot en JavaScript està basat en zero (tinguin paciència amb mi aquí), ens cal menys 1 de la sèrie de diapositives. Així, per exemple, si volem que el control lliscant per anar a la diapositiva # 4 quan es fa clic en el text, ens agradaria afegir aquesta classe: "pageAnimate_trigger 3". Si volem que la barra de desplaçament per anar a la diapositiva # 6, afegiríem aquesta classe: "pageAnimate_trigger 5". Com es va esmentar anteriorment, es pot afegir un enllaç a l'etiqueta d'ancoratge, que només pot ser seguit quan JavaScript està desactivat. Així que això significa visitants encara podran veure una pàgina clonada en altres llocs al seu lloc si s'han desactivat JavaScript.

¿He d'afegir manualment un enllaç a cada diapositiva?

No, en absolut - el guió fa tot el treball per vostè.

Com puc fer això en un contingut normal de control lliscant i no una pàgina web lliscant?

Fàcil - tot el que fan és canviar una sola línia en els "ajustos" de la seqüència de comandaments de jQuery. Vostè haurà de tenir un div (o una altra etiqueta similar) com un contenidor per al control lliscant pageAnimate. Simplement defineixi que div en el guió.

Hi ha problemes o errors?

  1. Quan la finestra del navegador s'amplia o es redueix en IE 8, les diapositives no canvien de mida automàticament per convertir-se en pantalla completa. He intentat durant anys per trobar una solució, però no puc. No obstant això, ells canvien de mida quan la finestra actual es va arrossegar més petita o més gran. Això és aplicable només a IE 8. Això no hauria de ser un gran problema ja que no hi haurà massa gent zoom dins i fora de IE8.
  2. En utilitzar jQuery 1.8.1, el Firefox es congela quan molts disparadors es fa clic a una ràpida successió. Funciona bé amb jQuery 1.7.2.
  3. Navegació del control lliscant completament trenca quan s'acosti a un telèfon intel·ligent. Això es pot solucionar mitjançant l'addició d'aquest codi a la secció <head> del document HTML:
     <meta name = "viewport" content = "width = dispositiu d'ample; escala inicial = 1; escala màxima = 1"> 
  4. Animació del punt lliscant pot resultar una mica nerviós en els telèfons intel·ligents vells - tot i que no és massa dolent.

Descarregar
Altres components d'aquesta categoriaTots els components d'aquest autor
Comentaris dels clientsPreguntes freqüents i respostes

Propietats

Creat:
Novembre 13 12

Darrera actualització:
Maig 18 13

Alta resolució:

Els navegadors compatibles:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Arxius inclosos:
JavaScript JS, HTML, CSS

Versió del programari:
jQuery

Paraules clau

eCommerce, eCommerce, Tots els Articles, css, html, javascript, jQuery, slider jQuery, pà, gina lliscant, pageAnimate, paginació, slider real, lliscant