JMiur [E]

Contentslider es un pequeño script que nos permite crear bloques con contenidos que pueden efectuar scrolls de manera manual o automática.

En el sitio, puede descargarse un ZIP que contiene una serie de ejemplos pero, de todo su contenido, lo único que necesitamos es el archivo slider.js que subimos a un servidor y que luego cargamos en la plantilla, justo antes de </head>:
<script type="text/javascript" src="URL_slider.js"></script>
El área donde queremos usar el efecto la definimos como una serie de bloques DIV. Un ejemplo sencillo:
<div class="sliderDemo">
<div id="sliderDemo" class="sliderDemoContent">
<div id="sliderSeccion-1" class="sliderSeccion"> el contenido </div>
<div id="sliderSeccion-2" class="newssection"> el contenido </div>
<div id="sliderSeccion-3" class="newssection"> el contenido </div>
</div>
</div>
Claro que, debemos establecer las propiedades de esos bloques pero son muy pocas las propiedades obligatorias, el resto es muy personal:
<style type="text/css">
.sliderDemo { /* es el área general */
position:relative;
overflow:hidden;
height:VALORpx;
}
.sliderDemoContent { /* es el área interior */
position:absolute
}
.sliderSeccion { /* cada una de las secciones que se mostrarán */
}
</style>
Cada DIV debe tener un ID es decir, un nombre único y los de las secciones deben ser iguales entres si con el agregado de un guión y un número correlativo entre 1 y 50:
<div id="section-1" class="section"></div>
¿Cómo hacemos que funcione?

Hay dos modelos diferentes. Uno hace que el script funcione de manera automática y realice un scroll constante. Para este, lo que debemos hacer es llamar a la función inmediatamente después del código HTML que la contiene:
<script type="text/javascript">autoScroll('sliderDemo','sliderSeccion',5,true);</script>
La función es esta:

autoScroll(id,prefix,timer,restart)

donde:

id es el ID del bloque general
prefix es el prefijo que le colocamos a los IDs numerados con el contenido de las secciones
timer es el tiempo que permanece visible cada sección
restart es false si no queremos que sea contínuo y true si queremos que lo sea

También hay una función que nos permite detenerlo:
<a href="javascript:void(0);" onclick="cancelAutoScroll('sliderDemo')">PAUSAR</a>
Y para restaurarlo, hacemos lo mismo que antes, volvemos a llamar a la función de autoscroll:
<a href="javascript:void(0);" onclick="autoScroll('sliderDemo','sliderSeccion',5,true)">
CONTINUAR</a>

El segundo modelo es similar al anterior pero su característica principal es que no hace un scroll constante sino que nos muestra un contenido determinado por vez.

El código HTML es exactamente igual al anterior y lo único que debemos tener en cuenta es que si usamos varios, los nombres de los IDs deben ser diferentes.

En este caso, no hace falta llamar a ninguna función para que se ejecute, eso, lo hacemos con enlaces usando los eventos onClick, onMouseOver, onMouseDown, etc:
<a href="javascript:void(0);" onmousedown="slideContent('section-1')">;EJEMPLO 1</a>
<a href="javascript:void(0);" onmousedown="slideContent('section-2')">EJEMPLO 2</a>
<a href="javascript:void(0);" onmousedown="slideContent('section-3')">EJEMPLO 3</a>
<a href="javascript:void(0);" onmouseover="scrollContent('slider',-1)" onmouseout="cancelScroll('slider')">SUBIR</a>
<a href="javascript:void(0);" onmouseover="scrollContent('slider',1)" onmouseout="cancelScroll('slider')">BAJAR</a>

El último ejemplo es como el anterior excepto que sólo hay una gran sección de texto y utilizamos dos enlaces para subir y bajar por el contenido:
<a href="javascript:void(0);" onmouseover="scrollContent('textslider',-1)" onmouseout="cancelScroll('textslider')">SUBIR</a>
<a href="javascript:void(0);" onmouseover="scrollContent('textslider',1)" onmouseout="cancelScroll('textslider')">BAJAR</a>

11 comentarios:

Ale  

Hola, justamente estoy buscando algo de este estilo. Me gustaría tener un scroll que automáticamente pase líneas que yo escriba y una vez que termine vuelva a empezar.

Con este script que nos das, puedo hacer lo de mostrar cada línea cada cierto tiempo, pero tengo un problema. Cuando vuelva a comenzar, sube tooodas las lineas y a mi me gustaría que no me las muestre. Sino que una vez finalizada la última línea, vuelva a la primer línea pero sin hacer todo el retroceso (la verdad no sé si me explico jaja, hice un trabalenguas).

Gracias por cada cosa que ponés, me son muy muy útiles ^^

Responder
JMiur  

Sí, se comprende, Ale.

Una posibilidad son las MARQUEES, fíjate en este post.

Responder
Anónimo  

El comentario es off-topic, pero te quería dar las gracias porque ahora que termine, me di cuenta de que consulte este blog para muchas cosas y me haz ayudado a que el diseño de mi blog quede como ahora, ojalá me puedas dar un comentario sobre todo el diseño de mi blog, bueno gracias de nuevo y si te gusta la música que hay ahí no olvides suscríbirte! bye!

Enlace: DEPTRA

Responder
Ale  

Muchísimas gracias!!! Con las MARQUEES logré lo que quería :D

Gracias en serio, el blog me está quedando como quiero y gracias a todo lo que leí por acá.

Saludos! Y gracias ^^

Responder
JMiur  

Gracias, Maurico, veré de que se trata ;)

Ale, me alegro que te sirviera.

Responder
Inma  

Demasiado para mi, me da miedo probar porque seguro que la preparo. Inma

Responder
JMiur  

Jajaja. Crea un blog auxiliar, uno de pruebas donde puedas practicar y así, tu blog no sufrirá las consecuencias de los errores que son inevitables.

Responder
RED PEPPY  

Hola JMiur, soy nuevo en estas cuestiones de utilizar Blogger, pero luego de descubrir Vagabundia he aprendido muchas cosas y aún sigo aprendiendo.
Tras dar vueltas en el blog, encontré este post y automáticamente decidí ponerlo en práctica. Después de realizar los pasos tal como detallas, el resultado final no fue el esperado.
Los scripts no se ejecutan, no funcionan. Los textos se ven de manera estática y sin el efecto de transición.
También he probado utilizar los archivos de texto copiando y pegándolos en un elemento HTML, pero el resultado otra vez fue negativo.
Quisiera saber que tengo que hacer para lograr su funcionamiento.
Muchas Gracias.

Responder
JMiur  

Si el script no funciona, ese es el problema principal. Debería ver un ejemplo concreto donde lo hayas intentado para así tratar de ver qué pasa.

Responder
RED PEPPY  

JMiur, he intentado nuevamente poner en práctica el tutorial. Agregando el archivo de texto en un elemento HTML, he obtenido un resultado positivo, es decir, el script funciona. En cambio haciéndolo de la otra forma, no logré nada. Los textos quedan estáticos y sólo cambia de color (unicamente en Firefox). Podés observar lo que digo aquí: www.elblogderedpeppy.blogspot.com
El archivo slider.js lo aloje en google sites, tal vez no esté redireccionado del modo correcto.
Desde ya agradezco tu ayuda.

Responder
JMiur  

El que está en un elemento HTML funciona perfectamente; allí, puedes eliminar el script de http://hostfile.org/slider.js ya que es vuejo y no existe más. El script que se está ejecutando es el que está en Google Sites.

En el segundo, en ese, vas a tener que mirar la forma en que está armado el primero y estabelcer el CSS de sa parte que, ahora, no tiene ninguna.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR