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

@es1wwsSuscríbete a nuestro RSS para estar al día!

¡Nuevo! Síguenos como quieras!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Este plugin jQuery es un slider página completa para navegar por las páginas web. Por ejemplo, usted podría tener su página de inicio en una diapositiva, página de contacto en otro, y así sucesivamente. Es sensible y funciona en todos los navegadores, incluyendo Internet Explorer 6 ( : o ) Y los navegadores móviles.

Como su nombre indica, se puede poner nada dentro de una diapositiva (otro contenido jQuery, videos, y lo que-no), y cada diapositiva se desplazará para ver desbordamiento como cualquier página normal. No hay nada que conozco que se rompa el control deslizante, y se puede añadir una cantidad infinita de diapositivas. Esto es exactamente lo que necesita para darle vida a su sitio web!

Aunque esto está diseñado para el contenido de la ventana completa, se puede utilizar la misma facilidad como un control deslizante de contenido tradicional jQuery. De hecho, el pageAnimate es probablemente mejor que otros controles deslizantes ya que funciona muy bien en Internet Explorer 6!

Nota: Si ve la vista previa CodeCanyon en un navegador móvil, prestación de CodeCanyon no funcionará en absoluto. Es necesario visitar http://creativewebsites.me/pageAnimate/preview para verlo en acción.

Versión 1.1 ACTUALIZACIÓN

La versión 1.1 viene con dos nuevas características: la capacidad de dar a cada diapositiva de una URL única (con el uso de hachís) y una función de auto avanzar para que el deslizador conmutará automáticamente entre todas las diapositivas de forma continua. Ambos no pueden estar habilitadas a la vez (no puedo pensar en nadie que quiera que de todos modos).

Si usted tiene la versión anterior instalada y actualizar a esta versión, asegúrese de codificar el 'data-slide = "0" "atributo en el div que tiene una clase de.pageAnimate. Al igual que:

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

Además, tendrá que añadir la siguiente clase a todos desencadena la diapositiva:.pageAnimate_trigger

¿Qué pasa si Javascript está desactivado?

Este plugin se ejecuta principalmente en JavaScript - pero lo que si JavaScript está desactivado? ¿Es el deslizador inútil (y eso significa que la gente sólo puede ver su página principal!). Claro que no. Usted puede agregar un enlace de retorno 'href' a los factores desencadenantes que van a una diapositiva. Así que cuando JavaScript no está habilitado, este disparador no ir a una diapositiva en el pageAnimate, pero se acaba de proceder de la forma habitual a otra página (que se definió en el 'href').

No tire contenido de otros web-páginas el deslizador pageAnimate?

No, el propio plugin no tira el contenido de otras páginas web. Aunque se puede hacer eso con sólo unas pocas líneas de Ajax o código PHP, el guión en sí no tiene esa funcionalidad y el contenido de cada diapositiva / de la página se debe agregar manualmente. Para sacar el contenido de su servidor web con Ajax, sólo tiene que utilizar este código:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Sólo cambia #slide_id_or_class "para la Identificación del CSS o clase de la diapositiva pageAnimate que desea añadir a)

Entonces, ¿cómo puedo hacer que el control deslizante de ir a una diapositiva?

No podría ser más fácil - sólo tiene que añadir este código:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Este texto irá a deslizar 2 </a> 
Observe el número agregado al final del nombre de la clase? Ese pequeño número define qué diapositiva se animó a. Pero como todo en JavaScript está basado en cero (tengan paciencia conmigo aquí), necesitamos menos 1 de la serie de diapositivas. Así, por ejemplo, si queremos que el control deslizante para ir a la diapositiva # 4 cuando se hace clic en el texto, nos gustaría añadir esta clase: "pageAnimate_trigger 3". Si queremos que la barra de desplazamiento para ir a la diapositiva # 6, añadiríamos esta clase: "pageAnimate_trigger 5". Como se mencionó anteriormente, se puede añadir un enlace a la etiqueta de anclaje, que sólo puede ser seguido cuando JavaScript está desactivado. Así que eso significa visitantes aún podrán ver una página clonada en otros lugares en su sitio si se han desactivado JavaScript.

¿Tengo que añadir manualmente un enlace a cada diapositiva?

No, en absoluto - el guión hace todo el trabajo por usted.

¿Cómo puedo hacer esto en un contenido normal de control deslizante y no una página web deslizante?

Fácil - todo lo que hacen es cambiar una sola línea en los "ajustes" de la secuencia de comandos de jQuery. Usted tendrá que tener un div (u otra etiqueta similar) como un contenedor para el control deslizante pageAnimate. Simplemente defina que div en el guión.

¿Existen problemas o errores?

  1. Cuando la ventana del navegador se amplía o se reduce en IE 8, las diapositivas no cambian de tamaño automáticamente para convertirse en pantalla completa. He intentado durante años para encontrar una solución, pero no puedo. Sin embargo, ellos cambian de tamaño cuando la ventana actual se arrastró más pequeña o más grande. Esto es aplicable sólo a IE 8. Esto no debería ser un gran problema ya que no habrá demasiada gente zoom dentro y fuera de IE8.
  2. Al usar jQuery 1.8.1, Firefox se congela cuando muchos disparadores se hace clic en una rápida sucesión. Funciona bien con jQuery 1.7.2.
  3. Navegación del control deslizante completamente rompe cuando se acerque en un teléfono inteligente. Esto se puede solucionar mediante la adición de este código a la sección <head> del documento HTML:
     <meta name = "viewport" content = "width = dispositivo de ancho; escala inicial = 1; escala máxima = 1"> 
  4. Animación del deslizador podría ser un poco nervioso en los teléfonos inteligentes viejos - aunque no es demasiado malo.

Descargar
Otros componentes de esta categoríaTodos los componentes de este autor
ComentariosPreguntas frecuentes y respuestas

Propiedades

Creado:
13 de noviembre 12

Última actualización:
18 de mayo 13

Alta resolución:

Los navegadores compatibles:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Archivos incluidos:
JavaScript JS, HTML, CSS

Versión del software:
jQuery

Palabras clave

eCommerce, eCommerce, Todos los objetos, css, html, javascript, jQuery, slider jQuery, pá, gina deslizador, pageAnimate, paginació, n, slider real, deslizador