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>
Este es un ejemplo concreto cuyo código puede verse en este archivo de texto y bastaría copiarlo y pegarlo en un elemento HTML de la plantilla para que funcionara:


EJEMPLO 1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat ... [ leer más ]
EJEMPLO 2: Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat sed diam nonummy nibh euismod tincidunt idea
[ leer más ]
EJEMPLO 3: Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis ... [ leer más ]

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>
En este otro archivo de texto está el código del demo:


EJEMPLO 1:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ullamcorper nibh vitae erat. Nunc hendrerit viverra urna. Etiam sed ipsum. Quisque et urna. Praesent vehicula, libero non aliquet pretium, felis arcu luctus eros, ac semper quam turpis ut tellus. Maecenas eget pede ac nisi ultricies hendrerit. Etiam nec urna. Aliquam nec nisl. Nulla facilisi. Donec id est. Quisque faucibus ante sit amet nulla.

Phasellus tempor arcu suscipit nunc. Sed convallis justo sit amet eros. In ullamcorper arcu feugiat arcu. Morbi convallis, risus id aliquet ornare, arcu arcu blandit erat, ac accumsan sem nunc facilisis tellus. Praesent pulvinar, ante id ultrices tincidunt, augue metus dignissim dolor, ut luctus elit nisi sed lorem.
EJEMPLO 2:
Pellentesque condimentum dignissim nisi. Donec in lectus. Sed at sapien. Aenean augue lectus, aliquet feugiat, fringilla ac, sollicitudin eu, odio. Pellentesque in magna quis tellus ornare porttitor. Morbi elementum fringilla dui. In augue. Integer laoreet, pede ac faucibus rhoncus, eros tellus ultricies nibh, ac rhoncus nisi erat at nunc. Cras vitae turpis. Vivamus fringilla hendrerit quam. Phasellus purus mauris, vulputate in, pellentesque sit amet, dapibus consectetuer, lorem. Suspendisse potenti. Nam eleifend velit a felis.

diablo1 diablo2
EJEMPLO 3:

Etiam fermentum elit. Sed rhoncus, lorem ut feugiat rhoncus, sapien nisi imperdiet tortor, in varius magna augue eget turpis. Maecenas feugiat tortor ut est. Nulla nulla eros, venenatis quis, scelerisque in, viverra sed, ligula. Praesent dignissim, velit sed volutpat euismod, odio elit rhoncus eros, eu mattis magna massa non nunc. Quisque augue diam, lobortis sit amet, bibendum vitae, posuere et, sapien. Pellentesque eleifend eros sit amet erat.

Pellentesque vitae sem. Etiam ullamcorper tellus. Phasellus fermentum euismod enim. Proin velit est, hendrerit quis, feugiat quis, consequat ut, pede.

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>
En este otro archivo de texto está el código del demo:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ullamcorper nibh vitae erat. Nunc hendrerit viverra urna. Etiam sed ipsum. Quisque et urna. Praesent vehicula, libero non aliquet pretium, felis arcu luctus eros, ac semper quam turpis ut tellus. Maecenas eget pede ac nisi ultricies hendrerit. Etiam nec urna. Aliquam nec nisl. Nulla facilisi. Donec id est. Quisque faucibus ante sit amet nulla.

Phasellus tempor arcu suscipit nunc. Sed convallis justo sit amet eros. In ullamcorper arcu feugiat arcu. Morbi convallis, risus id aliquet ornare, arcu arcu blandit erat, ac accumsan sem nunc facilisis tellus. Praesent pulvinar, ante id ultrices tincidunt, augue metus dignissim dolor, ut luctus elit nisi sed lorem.

Phasellus tempor arcu suscipit nunc. Sed convallis justo sit amet eros. In ullamcorper arcu feugiat arcu. Morbi convallis, risus id aliquet ornare, arcu arcu blandit erat, ac accumsan sem nunc facilisis tellus. Praesent pulvinar, ante id ultrices tincidunt, augue metus dignissim dolor, ut luctus elit nisi sed lorem.

Phasellus tempor arcu suscipit nunc. Sed convallis justo sit amet eros. In ullamcorper arcu feugiat arcu. Morbi convallis, risus id aliquet ornare, arcu arcu blandit erat, ac accumsan sem nunc facilisis tellus. Praesent pulvinar, ante id ultrices tincidunt, augue metus dignissim dolor, ut luctus elit nisi sed lorem.

Phasellus tempor arcu suscipit nunc. Sed convallis justo sit amet eros. In ullamcorper arcu feugiat arcu. Morbi convallis, risus id aliquet ornare, arcu arcu blandit erat, ac accumsan sem nunc facilisis tellus. Praesent pulvinar, ante id ultrices tincidunt, augue metus dignissim dolor, ut luctus elit nisi sed lorem.



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
Mauricio  

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 ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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