JMiur [E]

glider.js es un script que utiliza Prototype y Scriptaculous para crear un carrusel deslizante; pestañas donde se coloca cierto contenido y pueden ser accedidas de manera individual, desplazándose de una a otra con un efecto o generar alguna clase de slideshow.

Lo interesante del script es que es muy pequeño y puede ser utilizado múltiples veces en una misma página.

Para esta primera entrada, lo que he hecho es modificarlo bastante y adaptarlo de tal modo de crear un slideshow de imágenes similar al mostrado hace unos días pero con el agregado de algunos controles extras que nos permiten navegar entre las imágenes.

El proyecto original puede ser descargado desde la página del autor; el de este ejemplo, que es el modificado, se encuentra en este otro ZIP


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_glider.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>
Por último, el CSS que es elemental así que podemos diseñarlo con bastante flexibilidad:
<style type='text/css'>
/* el contenedor superior donde se mostrarán los enlaces a cada imagen (IMG1 | IMG2 | etc */
div.gcontroles {
text-align: center;
}
div.gcontroles a { /* ... cualquier propiedad, color, fuente, etc ... */ }
div.gcontroles a:hover { /* ... si queremos un efecto sobre esos enlaces ... */ }

/* el contendedor donde se mostrarán las imágenes y que es una lista UL LI */
div.glider { /* lo dimensionamos a la medida de las imágenes */
height: 300px;
overflow: hidden;
width: 400px;
}
ul.listaglider { /* le vamos a dar un ancho con un valor extremadamente alto para que entren todas */
list-style-type: none;
margin: 0;
padding: 0;
width: 100000px;
}
li.gimg { /* dimensionamos cada item a la medida de las imágenes */
float: left;
height: 300px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 400px;
}
li.gimg img { /* por als dudas, fuerzo a que las imágenes se redimensiones siempre */
height: 300px;
width: 400px;
}

/* el contendor con la navegación inferior que pueden ser textos o imagenes*/
div.gflechas { /* lo dimensiono */
height: 45px;
margin: 0 auto;
width: 400px;
}
div.gflechas a { /* ... cualquier propiedad, color, fuente, etc ... */ }
div.gflechas a:hover { /* ... si queremos un efecto sobre esos enlaces ... */ }
</style>
El HTML tiene varias partes; la primera contiene los controles superiores que son anchors a los IDs de las imágenes; la segunda es una lista donde cada etiqueta LI tiene un ID diferente; la tercera son los enlaces para navegar hacia atras y hacia adelante y por último el llamado a la función:
<div id="glider_DEMO">
<div class="gcontroles">
<a href="#gimg1">IMG 1</a> | <a href="#gimg2">IMG 2</a> | <a href="#gimg3">IMG 3</a></a>
</div>
<div class="glider">
<ul class="listaglider">
<li class="gimg" id="gimg1"><img src="URL_imagen_1" /></li>
<li class="gimg" id="gimg2"><img src="URL_imagen_2" /></li>
<li class="gimg" id="gimg3"><img src="URL_imagen_3" /></li>
.......
</ul>
</div>
</div>
<div class="gflechas">
<a href=#" onclick="miejemplo.previous();return false;"></a>
<a href=#" onclick="miejemplo.next();return false"></a>
</div>
<script type="text/javascript">
var miejemplo = new Glider('glider_DEMO', {duration:0.5});
</script>
Decía que podían crearse múltiples instancias así que podríamos tener varios funcionando en la misma página. Para eso, simplemente debemos usar IDs diferentes y crear funciones diferentes:
<div id="otro_DEMO">
.......
</div>
.......
<script type="text/javascript">
var otroejemplo = new Glider('otro_DEMO', {duration:0.5});
</script>
Hay otra variantes, podemos generar un slideshow automático, estableciendo la velocida de este modo:
<script type="text/javascript">
var ejemploauto = new Glider('nombre_ID', {autoGlide: true, frequency: 4});
</script>

51 comentarios:

Graciela  

Un encanto Jmiur, bellísimo el segundo! la fotografía 1 del primero ;) :)

Una lástima cuando me dicen lo del zip, parece que no voy a entenderlo nunca!

Que tengas un buen día!

Responder
Santi Folch  

Genial J!! Yo ya he usado el anterior slideshow en uno de mis sitios, ha quedado genial :) Tomo nota de este también.

Por cierto, una pregunta: ¿pueden cargarse las librerías también desde archivos? Lo intenté con el slideshow anterior y no lo logré, pero supongo que debe poder hacerse, pues el zip incluye los archivos js...

Un saludo!!

Responder
JMiur  

Graciela:
¿Cómo es eso de los ZIPs? ¿Qué problemas tienes?

Santi Folch:
Efectivamente, las librerías pueden cargarse desde archivos externos; de hecho, es lo que hago en estos demos de ejemplo. Es indiferente, ambas cosas funcionan igual.

Responder
Nostromus  

Muy bueno el carrusel JMiur, lo he añadido en mi blog para videos trozeados de YouTube, y me ha quedado genial. El otro slideshow que publicaste anteriormente si que lo estoy utlizando para imágenes.

Tanto uno, como otro, excelentes.

saludos!

Responder
Graciela  

El problema es que jamás he entendido cómo bajarlo o cómo se diga :S

Quiero pedirte por favor, ya me lo has dicho antes, no sé donde lo he guardado: cuando hago una entrada fija poniendo fecha 2020, no recuerdo el html que se colocaba en la misma, gracias!

Responder
JMiur  

Saludos, Nostromus; me alegro que te gustaran.

Graciela:
Lo de los ZIPs es sencillo pero, cualquier cosa, me mandas un mail y te envio los archivos.

¿Cómo es eso de la fecha? Hoy ando sin entender nada :-D

Responder
Graciela  

Hice un post con fecha 2020, que quedará ahí hasta fin de año, necesito sacarle la fecha, recuerdo me habías dicho cómo hacerlo dentro de la misma entrada...he perdido la indicación. Es que no me sé explicar, es un problema de la vida diaria ;)

Responder
La hormiguita  

Muy bonito..... !!!! gracias

Responder
JMiur  

Graciela:
Es lo que supuse pero no estaba seguro. Debes agregarle esto a la entrada:

<style>#fecha-1064660976094538919 {display:none;}</style>

Responder
Graciela  

@JMiur Muchísimas gracias amigo, era facilito, pero las pilas se descargan desde la mañana temprano!

Responder
JMiur  

Perfecto :D

Responder
Imagina  

HOLA JMIUR ESTOY TRATANDO DE LOGRAR PONER ESTE SLIDE EN MI BLOG, LO QUE NO ENTIENDO ES SI TODO LO QUE ESTA EN AMARILLO TENDRIA YO QUE REEMPLAZAR, PORQUE DE SER ASI NO SE QUE ES LO QUE TENGO QUE PONER EN GIMG, O EN GLDER_DEMO O EN MIEJEMPLO.
POR FAVOR PODRIAS AYUDARME? MI BLOG ES IMAGINASAILING.BLOGSPOT.COM
SE PUEDE HACER EN TAMAÑO MAS GRANDE??
GRACIASSSS
MARIANA

Responder
JMiur  

En el ejemplo, sólo debes colcoar las direcciones de las imagenes y puedes usar los mismos nombres de los IDs que están allí en amarillo. Son eso, nombres, puedes llamarlos como quieras siempre que los cambies correctamente.

Responder
Imagina  

jmiur puse la clave pero no funciona crep que tendre q crear todo de nuevo.... luego de tanto trabajo...
pero para estar mas segura quisiera preguntarte:
la primer parte hasta el codigo del arichivo glide... inclusive, irira encima de no? y luego el codeigo css iria antes de ]]> , y por ultimo el codigo html en la entrada o pagina donde quiero poner el slide.
esta bien asi?
disculpa pero estoy tratando de aprender y algunas cosas no las se
graciasssss!!!
mariana

Responder
Imagina  

JMIUR muchas gracias por todo pero desisti de la idea del slide porque tengo muchos scrip en mi plantilla... quisiera hacerte una pregunta en mi blog tengo todo muy tirado para abajo, eleimine la barra de navegacion pero sige todo muy abajo como puedo subor el blog y ocupar ese espacio?????????
mi blog era www.imaginasailing.blogspot.com
disculpa que te ametrallo a preguntas pero me voy a un viaje en velero en dos semanas y quiero terminarlo antes porque alla solo podre actualizarlo cdo pueda....
marian

Responder
JMiur  

Lo que vi en el código fuente parece correcto. El CSS va antes o después, es indistinto. Es verdad que había muchos scripts y ahí, el resultado puede ser aleatorio.

La avbar se jha ocultado pero, en esas plantillas neuvas, tiene una altira definida y ese es el espcaio que ves; prueba agregar algo así:

body .navbar { height:0px !important; }

Responder
Imagina  

perfecto!!!! funcionoooooo!
muchas gracias JMiur!

Responder
JMiur  

Perfecto :D

Responder
Dreamare  

hola disculpa esto deberia ser trivial pero he fracasado rotundamnete al afregar el slide, lo que sucede es que no se agregar el archivo scrptaculos es decir donde puedo montar los archivos o donde encuentro el codigo para agregarlo directamente, me gustaria agregarlo pro archivos peor no tengo ni idea, tampoco se en que lugar agregar el css, disculpa la inexperiencia, agradezco tu ayuda

Responder
JMiur  

Pués no hay mucho que agregar. Debes colcoar las librerías tal como dice el post; descargar el ZIP, copair y pegar el archivo; luego copair y pegar el CSS.

Responder
luthier  

buenas y santas amigo jmiur

por mas que inento e intento no puedo con este slide
he hecho todo tal cual lo has explicado en este blog de prueba pero nada
http://copito2009.blogspot.com/2011/01/hola-pianola.html

no me aparecen las partes de los comandos del slide.

Si puedes ayudarme estaría agradecido

Responder
JMiur  

En el post, debes escribir el script en una sola línea:

<script type="text/javascript">var miejemplo = new Glider('glider_DEMO', {duration:0.5});</script>

Responder
luthier  

Gracias por la ayuda sr jmiur, pero por mas que lo intento no puedo ponerlo en una sola línea, me lo divide automáticamente en 2
Alguna solución?

gracias

Responder
JMiur  

Primero que nada, colcoa todo en una sola línea, no importa si el nuevo editor luego las separa porque de ese modo, n ose agregarán saltos de línea (etiquetas BR). Eso que has hecho, ya resolvió el error de ayer pero conviene que lo hagas con todo el script, la lista, etc.

Ahora lo de las flechas. Eso no está definido porqu el script no provee nada de eso; para agregarlas, colócale un ID a los enlaces:

<a href=#" id="flecha1" onclick="miejemplo.previous();return false;"></a>
<a href=#" id="flecha2" onclick="miejemplo.next();return false"></a>

Y en el CSS, define los fondos que serán las imagenes de esas flechas que quieres utilizar:

a#flecha1 {background-image: url(UNAIMAGEN); float: left;}
a#flecha2 {background-image: url(OTRAIMAGEN); float: right;}

Responder
luthier  

epepepepe!!!!!
gracias amigo jmiur, después de pelearme toda la tarde con el java, lo he conseguido.
Ya en el último recurso fuí directamente al codigo fuente de tu pagina, copie los códigos, y después de quedar bastante mareado, salió.

http://pruebasjava214.blogspot.com/2011/01/plop.html

lo que no entiendo es el porque me salen las fotos en un pequeño recuadro blanco, pero bueno, es un detalle menor.

muchas gracias!

Responder
JMiur  

Lo del recuadro ocurre porque todas las imágenes de tu plantilla tienen definido un borde:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #EEEEEE;
padding: 2px;
}

Puedes quitarlo de este modo:

li.gimg img {
height: 300px;
width: 400px;
-moz-box-shadow: none;
border: none;
padding: 0;
}

Responder
luthier  

hecho maestro!!!!

muchas gracias

Responder
JMiur  

Perfecto :D

Responder
moics30  

Hola JMiur quisiera saber si se puede hacer que la funcion que cambie automaticamente funcione junto a la opcion de cambio por link, es decir que cuando no le haga click para que cambie se vaya cambiando solo.
Gracias

Responder
JMiur  

Para eso, deberías editar el script y entender s funcionamiento. Yo lo desconozco.

Responder
Martín Rocha  

Hola Jmiur =).

Estuve revisando varias galerias y me gusto esta, pero mi duda es, si quiero que aparezcan 3 imágenes a la vez en ves de una por ver es posible? de no serlo una imagen mapeada es posible?

Por otro lado estoy buscando una galeria algo asi sin efectos ni nada solo que las miniaturas sean opacas, busque en su blog pero no encontre una asi, la havia visto en un blog, sabe donde esta alguna asi?
Desde ya muchas gracias JMIur que andes bien.

Responder
EmmaX  

hola, una pregunta.. exactamente que modificaciones tendria que hacerle para dejarlo automatico como el ejemplo que esta al fondo del post, necesito que quede igual a ese ejemplo

Responder
JMiur  

Martín Rocha:
No sé hasta que punto es posible modificar ciertos scripts sin morir en el intento. Seguramente se podria pero requiere hacer muchas pruebas.

EmmaX:
Sólo requiere indicarlo como muestra el código del post:
var ejemploauto = new Glider('nombre_ID', {autoGlide: true, frequency: 4});

Responder
Martín Rocha  

Ok gracias JMiur, si sustituyo la imagen por otra mapeada anda = no?
Y sobre esa galeria bien sencilla sabes donce hay laguna asi?
Saludos

Responder
JMiur  

Hay miles de galerias, la verad, no tengo presente alguna en especial.

Responder
Paula  

Hola, Jorge
Si me permites, le contesto a Martín Rocha (comentario 31): en el sitio de Stu Nicholls puede encontrar una galería similar, con las miniaturas en negativo en vez de opacas. Yo he utilizado la galería en vertical y me gustó mucho cómo quedó.
La galería horizontal como la que sugiere en su imagen está en http://www.cssplay.co.uk/menu/filmstrip.html.
Espero que esta información sea útil :)

Responder
JMiur  

Perfecto, Paula; queda debidamente registrado :D

Responder
Alicia (Ἄρτεμις)  

Hola JMiur, me preguntaba si en la segunda opción es posible que al posar el cursor sobre las imagenes se para el movimiento.

JMiur  

No sabría decirte, tendrías que fijarte en la página del desarrollador y ver si existe esa opción.

Alicia (Ἄρτεμις)  

Gracias, echaré un vistazo :)

Responder
Hector  

Hola JMiur, estoy buscando para poner en mi blog un carrusel de imagenes como el que presentan en http://www.flshow.net/carousel/fullpage.html pero no logro implementarlo bien y quisiera saber si tu puedes postear algo al respecto, gracias mil.

Responder
Hector  

Yo de nuevo, vi tb en una pagina de juegos, un carrusel muy bueno, es en www.juegatu.com , es mas o menos la idea de lo que quiero pero no consigo :)

JMiur  

Ambos ejemplos son archivos SWF, creados con Flash, son animaciones así que no hay mucho que decir al respecto salvo que sean galerías de algún tipo que alguien ofrezca para su descarga.

Hector  

En http://www.flshow.net ofrecen la descarga para instalar el carrusel y si creo que contiene un archivo SWF, pero se podra implementar para blog?

JMiur  

Pues no se como funciona porque no lo he probado. Seguramente, usar archivos SWF y XML para listar las imágenes y eso, tiene el inconveniente de tener que alojar todo en el mismo servidor y luego, verificar que pueda ser insertado en otra página.

Hector  

Bueno Jmiur, luego de tanto rodar logre lo que queria y lo estoy probando en http://tubanner.blogspot.com es menos complicado de lo que parece, llegue a cloud-carusel donde esta todo lo necesario, espero que postees algo al respecto ya que entre tus seguidores pueden haber interesados para aplicarlos. Un saludo

Responder
Pablo Silvestri  

Hola..
Mil gracias por este recurso...
mi pregunta es si se puede hacer en lugar de un scroll, un Fade.. es decir: que una imagen se funda en otra.
Mil gracias otra vez por tu tiempo, paciencia y conocimientos.
Saludos desde Argentina!!

JMiur  

Supongo que si pero no sabría decirte cómo porque habría que editar el script.

Responder
Lisandro Pr  

Hola buena tarde JMiur, espero estes muy bien, una consulta o ayuda mejor dicho!!!

como puedo hacer para que el primer ejemplo tenga transicion automatica como el ejemplo de abajo? no logro hacerlo :(

gracias de antemano :)

JMiur  

Estableciendo las avriables que indica el desarrollador; por ejemplo:
new Glider('nombre_ID', {autoGlide: true, frequency: 4});
lo que no recuerdo es si ambas posibilidades se pueden combinar o si se debe elegir una u otra.

Lisandro Pr  

vale muchas gracias muy amable!!!
ya lo pondre en practica :)
saludos

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