sencillo control deslizante jQuery te permite crear rápidamente una presentación de diapositivas desde una simple lista UL/LI :
1 2 3 4 5 | < ul > "Title 1" >< img title = "Subtitle 1" src = "image1.jpg" / >< / li > < a title = "Título 1"> < img title = "Subtítulo 1" src = "image1.jpg" /> </ a > "Title 2" >< img title = "Subtitle 2" src = "image2.jpg" / >< / li > < a title = "Título 2"> < img title = "Subtítulo 2" src = "image2.jpg" /> </ a > li > < a > ... </ a > </ ul > |
Todos los enlaces, imágenes o sottotiolo, se pueden introducir sin problemas:
1 2 3 4 5 | < ul > "Title 1" >< a href = "#" >< img border = "0" title = "Subtitle 1" src = "image1.jpg" / >< / a >< / li > < a title = "Título 1"> < un href = "#"> < img border = "0" title = "Subtítulo 1" src = "image1.jpg" /> </ un > </ a > "Title 2" >< img title = "Subtitle 2 with a <a href='#'> link < / a > " src="image2.jpg" /> < / li > < a title = "Título 2"> < img title = "Subtítulo 2 <a href='#'> enlace </ un > "src =" image2.jpg "/> </ a > li > < a > ... </ a > </ ul > |
Utilización
Puede descargar la última versión directamente desde el repositorio de Google Code :
1 2 3 | "text/javascript" src = "http://www.google.com/jsapi" >< / script > < script de type = "text / javascript" src = "http://www.google.com/jsapi"> </ script de > "text/javascript" > google.load("jquery", "1.3") < / script > < script de type = "text / javascript"> google.load ("jquery", "1.3") </ script de > |
Una vez que se carga la página:
1 2 3 4 5 6 7 |
Opciones
Puede pasar un conjunto de parámetros para el método de simpleSlider ():
1 2 3 4 5 6 7 8 | '0.7' ) , Leyenda alfa opacidad (por defecto 0 0.7 '), '#000' ) Leyenda bgColor el color de fondo (por defecto es "# 000") , 'normal' , 'fast' or number of milliseconds ) default 'slow' Antecedentes bgSpeed imagen se desvanecen de velocidad ("lento", "normal", "rápido" o el número de milisegundos) por defecto "lento" 'slow' , 'normal' , 'fast' or number of milliseconds ) default 'slow' Leyenda captionSpeed slideUp / slideDown velocidad ("lento", "normal", "rápido" o el número de milisegundos) por defecto "lento" '50px' ) Leyenda altura de la altura ('50px default ') CSS objeto TitleStyle por el título CSS objeto subtitleStyle de los subtítulos 4000 ) Milisegundos tiempo de espera entre el intervalo de diapositivas (por defecto 4000) |
Muy interesante, lo único que me perplime es la accesibilidad de estas herramientas. En otras palabras, se mete todo con JavaScript desactivado, y el uso de position: absolute hace difícil gestionar la presentación cuando el usuario amplía el texto de la página (ctrl +). ¿Cómo resolver estos problemas? Gracias
@ Camu: una gran pregunta! La pregunta, de hecho, es bastante amplia. En pocas palabras, tratando de responder a su pregunta, podemos dividir el problema en dos partes: Javascript es el diseño líquido y activo.
Herramientas tales como el propuesto por mí necesariamente parten de la suposición de que Javascript está activado y se ha cargado correctamente en la librería jQuery. Sin embargo, como en el caso que aquí se presenta, este tipo de secuencia de comandos realiza un cambio de tiempo de ejecución de un HTML pre-existentes, y muchas veces muy legible, incluso sin aplicar el guión. Esta técnica, conocida como la discreta JavaScript (Discreto Javascript), tiene como principal objetivo es la mejora de una página, que ya está funcionando y de fácil lectura, la realización de adiciones sólo si está activado JavaScript. Sin embargo no hay ninguna línea divisoria entre un JavaScript "intrusivo" y un "no intrusiva". Por ejemplo, el plugin que he presentado se podría considerar semi-intrusivo.
En el más claramente dedicado a la accesibilidad, como la posibilidad de ampliar la fuente, las cosas se complican aún más debido a que pone en juego el mapa de bits utilizado para crear páginas que generalmente no sufren despidos como las fuentes. Para superar el obstáculo que se debe crear una gráfica especial hojas de estilo bien embalado y el uso de una variedad de técnicas (algunas de las cuales requieren que Javascript activo) para "arreglar" una disposición de este tipo en tiempo de ejecución.
Pero vamos a destacar que algunos navegadores se han añadido recientemente las capacidades internas, la accesibilidad, para superar algunos obstáculos relacionados con el actual estándar de CSS y HTML. Por ejemplo, puede "zoom in", no sólo el tipo de letra, sino toda la página, haciendo un verdadero "Zoom Óptico", permitiendo que el layput todo ser todavía visible en la forma correcta (los mapas de bits pueden aparecer granuladas un poco) .
Creo que estas cuestiones deben ser una parte integral del "núcleo" de un navegador para que los desarrolladores podrán ser removidos de este tipo de problema.
Wow, eso es un rispostona
Gracias por ser tan detallado ... me puse a tomar notas!
Hola, gran guión, ... y sobre todo degradable.
Me pregunto una cosa, pero es posible decidir la cantidad de cada diapositiva devvo ser la duración?
Quiero decir, tal vez algunas imágenes son sólo títulos, sólo 4 segundos y luego el siguiente, pero si la imagen tiene una gran cantidad de texto para ser leído debe ser de al menos 8 / 10 segundos ...
Sería útil, por ejemplo, lo que indica la duración de la propia imagen, como un [buen ... Perdido ... ]
¿Qué te parece?
@ Santino Bivacqua:
Creo que entiendo lo que quieres decir, aunque ha perdido algunos de sus comentarios ... y me parece una buena idea. Se podría añadir un atributo, por ejemplo, en un campo
relo costumbre (ver horarios) y, en caso afirmativo, decidir individualmente entre una y otra diapositiva.Tan pronto como pueda voy a actualizar y yo le cita por el excelente asesoramiento. Gracias
Vaya lo siento, me pongo la etiqueta
imgy no me he dado cuenta ....Muchas gracias, sin embargo, mi idea era insertar el monto en el atributo rel de la imagen
por ejemplo:
o ancora
rel="4"rel="speed[4]"o simplementerel="speed-4", orel="4"sería más "conveniente, especialmente cuando se utiliza un motor de plantillas y diapositivas muestran a partir de la base de datos, sino que también crearía JavaScript incómodo, pero no imposible
@ Santino Bivacqua: de hecho, exactamente lo que pensé
[...] Inspirado por la sugerencia de que Santino Bivacqua conecté sencillo control deslizante jQuery puede establecer un tiempo de espera para cada diapositiva [...]
Usted puede colocar enlaces para obtener las diapositivas de un lado a otro sin tener que esperar el tiempo de espera?
@ G @ Briele No, con estas características en esta versión no ha sido programada.