JMiur [E]

Para quien use sliders de alguna clase, glider.js es un script que requiere Prototype y Scriptaculous para crear pestañas donde se coloca cualquier tipo de contenido. Es la misma que se mostraba en el slideshow y tiene la particularidad de poder ser utilizada múltiples veces en una misma página.

En este demo, también hay alguna modificación del original que puede ser descargado desde la página del autor porque en el caso de Blogegr, se utilizan algunos nombres de clases que son incompatibles con las plantillas.

Al igual que antes, si no tenemos las librerías debemos agregarlas antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'></script>
Luego, el script en si mismo que cargamos desde un archivo externo:
<script src='URL_scriptaculous_gliderSOLAPAS.js' type='text/javascript'></script>
o lo agregamos directamente a la plantilla:
<script type='text/javascript'>
//<![CDATA[
... aquí copiamos y pegamos el contenido del archivo ...
//]]>
</script>
Y luego, otra vez el CSS mínimo:
<style type='text/css'>
/* el contenedor superior donde se mostrarán los enlaces a cada solapa */
ul.controles {
list-style-type:none;
margin: 0;
padding:0 ;
}
ul.controles li {
list-style-type:none;
margin: 0;
padding:0 ;
}
ul.controles li a { ... }
ul.controles li a:hover { ... }

/* el contendedor donde se mostrarán las solapas */
div.elscroller { /* lo dimensionamos a gusto */
height: 250px;
overflow: hidden;
width:600px;
}
div.contenidoSOLAPAS { /* le vamos a dar un ancho con un valor extremadamente alto para que entren todas */
margin: 0;
padding: 0;
width: 100000px;
}
div.seccion { /* dimensionamos los DIVs de cada solapa */
float: left;
height: 210px;
margin: 0;
overflow: hidden;
padding: 20px;
width: 560px;
}

/* el contendor con la navegación inferior que pueden ser textos o imágenes*/
div.navegaSOLAPAS { /* lo dimensiono */
clear: both;
height: 45px;
margin: 0 auto;
width: 500px;
}
div.navegaSOLAPAS a { /* ... cualquier propiedad, color, fuente, etc ... */ }
div.navegaSOLAPAS a:hover { /* ... si queremos un efecto sobre esos enlaces ... */ }
</style>
Y ahora el HTML que puede ir tanto en la platilla como en una entrada:
<div id="gliderSolapas">
<ul class="controles">
<li><a href="#seccion1"> texto o imagen 1</a></li>
<li><a href="#seccion2"> texto o imagen 2 </a></li>
<li><a href="#seccion3"> texto o imagen 3 </a></li>
</ul>
<div class="elscroller">
<div class="contenidoSOLAPAS">
<div class="seccion" id="seccion1">
....... aquí ponemos el contenido de la solapa 1 .......
</div>
<div class="seccion" id="seccion2">
....... aquí ponemos el contenido de la solapa 2 .......
</div>
<div class="seccion" id="seccion3">
....... aquí ponemos el contenido de la solapa 3 .......
</div>
.......
</div>
</div>
</div>
<div class="navegaSOLAPAS">
<a href="#" onclick="gliderDEMOsolapas.previous();return false;"> anterior </a>
<a href="#" onclick="gliderDEMOsolapas.next();return false"> siguiente </a>
</div>
<script type="text/javascript">
var gliderDEMOsolapas = new GliderSOLAPAS('gliderSolapas', {duration:0.5});
</script>


En el CSS se ve que cada solapa está en un DIV cuya clase, en este ejemplo, es seccion y están definidas como flotantes usando float: left pero ¿qué pasa si no flotaran o si les agregáramos la propiedad clear:both? Pués entonces, el desplazamiento no sería horizontal sino vertical; colóquense en la primera solapa y prueben el ejemplo, haciendo click en los enlaces para permutar entre uno y otro modo:

51 comentarios:

Felipe Calvo Cepeda  

Uy Jorgito, este está de un 10.

Puede servir tambien para mostrar una galeria de imágenes, o cambiar el header, o cualquier cosa :D

Las posibilidades son amplias y abiertas para todos los gustos.

Responder
Claudio - Poca Tinta  

Genial! Lo estaba viendo pero como siempre Usted lo explica tan bien que: ¡siempre será el Master!

:0 cargo el blog mas rapido con ¡¡¡¡IE9!!!!!
:X con Firefox no se ve tan bien los efectos... quizas estoy sugestionado. No quiero salir de la Matrix

Saludos

Responder
Unknown  

Por favor, me ha llevado un buen rato entender, precioso :)

Responder
Albus Dumbledore  

Hola JMiur, yo de nuevo, ya solucioné el problema con los elementos HTML/Javascript, pero ahora tengo otro, si entras a mi blog verás que en el archivo cuando haces clic sobre las flechitas para que se desplieguen las entradas antiguas no pasa nada, por qué ocurre eso? He probado con varios navegadores y en otra computadora, incluso en el archivo de tu blog si se pueden desplegar las entradas más antiguas. Será algún script que esta impidiendo que se desplieguen... Gracias por tu atención.

Responder
Adrián J. Messina  

Fantástico, inmenso efecto que resumen muchísimo en un blog.
Por cierto, que pedazo de tema el de Oasis, I am the walrus !!
Hasta esa perlita tiene!

Responder
X.LL.  

Hola, a ver si me puedes echar un cable...

Antes, cuando tenia otra plantilla, tenia puesto eso de que no pudieran copiar mi blog, es decir estaba anulada la opción del botón derecho del ratón. Pero cambié mi plantilla por otra que me gustaba más, pero no de blogger sino piratilla, por llamarlas de alguna forma. Me gustaría saber como podría volver a hacer aquello de impedir copiar mi blog o anular el botón derecho del ratón.

Gracias

Responder
Unknown  

Buenísimo JMiur!!!
Una consulta, como puedo modificar en la Lista de enlaces 1 solo enlace??? Algo así hice con el paint para mostrarte: http://img687.imageshack.us/img687/4904/cambiar.png jejeje... Eso es lo que quisiera hacer.

Responder
JMiur  

Felipe:
Es el mismo script que mostraba hace unos dias donde sólo había imágenes así que, puede usarse para cualquier cosa.

Claudio:
No he probado el IE9 porque sigo usando XP pero me encantaría probarlo ya que los demos que he visto son muy interesantes. Por ahora, seguiré esperando el Firefox 4 para que se amplien las posibilidades de los efectos :-)

Graciela:
Es interesante y la verdad, muy flexible. Parece complciado pero no l oes, es de los más sencillos que he visto.

Albus Dumbledore:
Elimina el elemento y vuelve a colocarlo porque el código que se muestra es erróneo. No sé si lo has estado modificando ya que lo que se ve es raro y no parece ser el código original de Blogger.

Xavi:
Fíjate en esta entrada aunque te advierto que es absolutamente inútil ya que siempre es posible copiar y en lo personal, es algo muy molesto para cualquier visitante.

Pozo:
Tendrías que identificar ese item en la lista y colocarle una clase; otra posibilidad pero no funcionará en IE por ahora es usar estas propiedades.

Responder
Unknown  

Claro pero la lista de enlaces no esta en el HTML, sino que es de la misma plantilla, y se encuentra solo en Elementos de la página.

Responder
Unknown  

Xavi no te sirve de nada inhabilitar el clic derecho, y es más hay gente que les resulta molesto y perdes visitas, te lo digo por experiencia propia. Aunque tengas inhabilitado el ratón, vas a Herramientas, Ver código fuente, y te copian igual.

Saludos!

Responder
Albus Dumbledore  

@JMiur

Ya cambie el código, pero ahora cuando hago clic sobre las flechitas las entradas tampoco se despliegan sólo se abre la página con todas las entradas de ese mes, por ejemplo si presiono la flechita que esta al lado de Agosto 2010 se abre una página con todas las entradas de ese mes...

Responder
JMiur  

Pués no, ya no sé por qué puede estar ocurriendo eso.

Responder
Albus Dumbledore  

@JMiur ya encontré el problema del ARCHIVO DEL BLOG, como te comenté el día de ayer, cuando hago clic en las flechitas que aparecen en el archivo de mi blog para que se desplieguen las entradas más antiguas no pasa nada, buscando y buscando encontré el problema: como verás el footer de mi blog se encuentra fuera de las etiquetas (body)...(/body), se me ocurrió colocar el blog dentro de dichas etiquetas y se despliegan las entradas antiguas exitosamente, pero obviamente no puedo dejar el archivo allí porque rompería la estética de mi blog... Habrá una solución para ello? Si me puedes ayudar te lo agradecería. Mientras tanto yo seguiré probando haber si lo puedo solucionar por mi cuenta...

Responder
Pavelkapaz  

Exelente, me gusto :D
Pero me surge una pregunta... es posible hacer que rote solo, en vez de que se quede quieto esperando que le hagan click... osea, hacer del slider un slideshow de contenido...

Gracias Jmiur, esta buenisimo.

Responder
JMiur  

Albus Dumbledore:
En una página web sólo existen dos partes, el head y el body; no se colcoan etiquetas fuera de esas etiquetas asi que el footer DEBE estar dentro de las etiquetas <body> y </body>.

Si ese cambio provoca alguna clase de error en al estructura del blog significa que el diseño es erróneo y que debe corregirse algo así que, primero que nada, debes mover el footer. Las dos últimas etiquetas de una página son </body> y </html>

Pavelkapaz:
Para eso, debes ver el post anterior; es el mismo script.

Responder
J.Guti  

Vagabundia.te agradeceria me indicases porque en este Slider con Scriptaculos, sigo tus pasos y me salen las imagenes de las solapas, me salen en vertical en vez de orizontal tal comno las muestras tu

Responder
Albus Dumbledore  

@JMiur Muchas gracias JMiur agradezco infinitamente tu colaboración hice lo que me indicaste y ahora todo funciona de maravilla…

Responder
JMiur  

J.Guti: No sé dónde está tu ejempl oapra verlo.

Albus Dumbledore: Perfecto. Me alegra que se solucionara el problema.

Responder
Kirei  

Hola Jmiur estupendo aporte, me gusto mucho como queda y sobre todo lo simple que parece de implementar, veremos si me sale, siemrpe paso por aqui y me sorprende la cantidad de cosas que aun me quedan por aprender, gracias por tu generosidad al compartir lo que sabes con nosotros. Un saludo desde Córdoba Argentina

Responder
JMiur  

Gracias por el comentario, Kirei :D

Responder
Anónimo  

Hola JMiur!

Excelente blog y excelente entrada, me ha sido muy útil. Muchas gracias :D

Y te tenia que comentar una cosita que he visto mal en el código, al implementarlo he querido editar el "line-height" de los controles, pero no me dejaba... y trasteando me he dado cuenta de que en el código html la clase definida es "controles" cuándo en el código CSS es "gcontroles" y de ahí que no me reconociera los cambios. Y despues de modificar de "gcontroles" a "controles" en el CSS todo perfecto :) Y lo digo modificando en el CSS y no en el html porque al hacerlo así se perdia el efecto "slide" :S

Todo esto no viene para quejarme ni ponerme quisquilloso, ni mucho menos... es solo para que lo avises o algo, así el siguiente que tenga el problema sepa el motivo. Solo por ayudar :P

Un saludo y sigue así! Que no sé que haríamos sin ti! :D

Responder
JMiur  

Listo, creo que ahí está solucionado el error del post :-)

Responder
Anónimo  

Por cierto, sería posible colocar los enlaces o controles en uno de los lados del slider? Lo intento y lo intento pero no lo consigo, si pudieras ayudarme... :P

Saludos!

Responder
Anónimo  

Y otra preguntita please. No tiene que ver con lo anterior por eso.

Fíjate si puedes en mi página, en el menú horizontal. El efecto hover de cambiar el color de la letra lo hace solo sobre la superficie de "a", seria posible que lo hiciese tambien en la superficie de "li"? Y el click para el enlace solo me aparece tambien en la superficie de "a", se puede extender a todo el recuadro de "li" tambien?

No sé si me explico bien :?

Un saludo y gracias de antemano! :)

Responder
JMiur  

Lo del diseño no tiene respuesta genérica, supongo que podría hacerse pero habría que verlo en un ejemplo.

Para el menú, podrías intentar cambiar las propeidades:

#menu li {
display:block;
float:left;
height:28px;
padding:12px 0 0px;
}
#menu a {
color:#FFFFFF;
display:block;
float:left;
font:14px Arial,Helvetica,sans-serif;
height:28px;
text-decoration:none;
padding:0 25px;
height:28px;
}
#menu li:hover {
border-bottom:1px solid #0099FF;
}
#menu a:hover {
color:#0099FF;
}

Responder
Anónimo  

Perfecto! Eres un crack!! :D

Desconocia por completo la función de la propiedad "padding" :S

Pues bueno muchísimas gracias por todo de nuevo! Nos vemos por aquí, que vaya muy bien. ;)

P.D: Si te gustan las videoconsolas y eso ya te avisaré cuando tenga lista la página, y a ver que te parece :)

Responder
Karla Castañeda  

Me gusta JMiur, muchas gracias :), solo que no puedo obtener el archivo que dispones... :( (el del script)

Veo varios pero no encuentro ninguno titulado Slider de contenido...o ¿cuál es?

Gracias de nuevo ;)

Responder
Karla Castañeda  

Otra vez yo JMiuri, encontré uno que dice scriptaculous glider y otro scriptaculous glider solapas.

El que corresponde a este, es el que dice scriptaculous glider solapas ¿o no?

Gracias y un abrazo y si te dejas un besín también...

Responder
JMiur  

¿ Aver si ahñí anda mejor? Ya cambié el enlace y es este.

Responder
Karla Castañeda  

JMiur, lo instalé pero no se ve... :(, solo el texto del contenido en forma de lista, y muy abajo anterior y siguiente ; es ese el script?

Responder
Karla Castañeda  

Hola otra vez JMiur...jaja el contenido es del mismo color del fondo, por eso no se veía, (blanco), en tu entrada se te olvidó poner display:inline; en los controles, para que se muestren en linea ;)

Es realmente sencillo, gracias a ti :)

Muchas Gracias de nuevo, eres un cielito lindo.

Responder
JMiur  

Perfecto :D

En lso controles no hay agregadas propiedades porque depende de cada caso y hay varias alternativas; puede usarse display:inline pero tambien float:left en cada etiqueta LI A si se quiere poner horizontal o bien ponerse vertical al costado o como se quiera :D

Responder
marti  

JMiur, quiero hacerte una consulta, intentando incluir esto en el blog veo que en primer lugar sale todo en vertical, y luego, sin ningún formato (y he revisado paso a paso todo, incluso poniendo el fichero js en un servidor) y tampoco resulta. Luego intenté incluir otro menú, que encontré en un blog en inglés, y tampoco salen los estilos que defino, y vuelve a surgir este mismo inconveniente, donde se ve todo en vertical, sin ningún formato. A que crees que puede deberse el error?

Responder
JMiur  

¿En que blog lo estás poniendo? Si has incluido el CSS, es posible que haya algún pequeño error en la plantilla de ese blog y que eso haga que desde cierto punto hacia abajo, los estilos no se ejecuten.

Si lo veo online, es posible que me de cuenta cuál es el error o ver qué está pasando.

Responder
marti  

Hola Jmiur, te paso la dirección del blog: www.unavidalucida.com.ar y te agradezco la disposición.

Responder
JMiur  

Me aprece que el problema es que estás tratando de usar dos librerías que son incompatibles, jQuery y Prototype+Scriptaculous y de allí surgen todos los conflictos ya que si funciona una, no funcioanrá la otra y los scripts que los requieran.

Ahora biem, en ese blog ¿cuál es el menú que te sale vertical?

Responder
marti  

No sabía que eran incompatibles, ya entiendo el problema ahora. El menú que salía en vertical, lo había tomado de una página en inglés que no puedo volver a encontrar, y llevo rato buscando. Lo quité porque quedaba realmente mal.

¿Conoces algún slider de contenido, o menú con css parecido al de este post, pero claro, que use jQuery?

Te agradezco tu tiempo y ayuda.

Responder
JMiur  

Hay muchos sliders de contenido dando vueltas en la web. Aquí hay dos publicados en este blog: ">1 2 pero hay cientos de ellos.

Responder
L  

Hola JMiur Muy chevere el script
pero nesecito ayuda con el css porfa.. es que use tu css de tu ejemplo y quiero ayuda con la seccion h3 que usas, si se puede colocar mas arriba ya que me desplaza el contenido hacia abajo..y la verdad no se que hacer
y tambien que deberia hacer para el efecto de deslizante que a mi no me sale ¬¬
igual como siempre gracias por tus buenos post que siempre son de ayuda
y gracias de antemano :)

Responder
L  

se me olvidava..
aqui esta el que he estado haciendo
http://archivo-jquery.blogspot.com/2011/11/prueba-4.html

Responder
JMiur  

En ese ejemplo de tu blog, el título H3 se ve abajo porque entre la imagen y la etiqueta H3 hay un salto de línea, una etiqueta <br/> generada por el editor de Blogger; puedes eliminarla colocando la etiqueta IMG y la etiqueta H3 en la misma línea.

Lo que parece faltar es el llamado a la función que es l oque se muestra al final de este ejemplo:

<script type="text/javascript">
var gliderDEMOsolapas = new GliderSOLAPAS('gliderSolapas', {duration:0.5});
</script>

Responder
L  

Hola otra vez JMiur gracias por tu respuesta, pero eso no era ni sale el br/ tambien intente borrar las h3 pero no queda bien
aqui esta el codigo de la entrada...
https://sites.google.com/site/ecuasagas/scripts/cod-post-scriptaculous
Y como siempre gracias JMiur :D

Responder
JMiur  

L etiqueta <br/> no será visible en el post; es algo que agrega Blogger automáticamente cuando se hace un salto de línea así que si escribo esto:

una linea
otra linea

el código HTML generado dirá:

una linea
<br/>
otra linea

Responder
L  

sii yo entiendo eso pero es que en el codigo no sale ni una sola vez el br... y no se como arreglar es nota :(
apoyate con eso porfa

Responder
JMiur  

En el código, esa etiqueta no está. Se agrega sola.
En el ejemplo que dejas en Google Sites, todo está escrito en una sola línea y por lo tanto no tiene saltos. Si lo copio y pego en una entrada, se ve perfectamente bien así que el salto debe estar en el post mismo.

Responder
L  

que coraje me da que tengas toda la razon ¬¬"
pero bueno ai que seguir, sabes ahora ultimo vi un post
que ojala ayude jeje http://www.ayuda-bloggers.info/2011/12/solucionar-el-alto-de-los-contenedores.html
ahora me pongo hacer unas pruebas ¬¬ ...cualquier cosas avisas :)
y gracias y perdon x las molestias ¬¬" jajaja

Responder
Colombia Habla  

Quisiera saber , como cambiarle los estilos, el fondo y eso, y como se hace para que se pasen solas las secciones? GRACIAS ERES EL MEJOR BLOGGERO

JMiur  

Los estilos los personalizas con el CSS, establecendo las reglas que quieras.

Lo de pasarlas automáticamente, lo desconozco; para eso, habría que modificar todo el script.

Responder
Pacheta  

Buenas, tengo un problema.
No me funciona el "anterior" y el "siguiente" :(

http://antropologiaetic.blogspot.com.es/

¿Qué puede ocurrir?

Muchas gracias !

JMiur  

Porque estás usando jQuery junto con ere Prototype+Scriptaculous y eso es incompatible o debes modificar los scripts. No conviene agregar ambas librerías en una misma página.

Pacheta  

¡Gracias!

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