Otro Slider de jQuery

Cuando accedemos a una página lo que más llama la atención son los sliders o presentación de imágenes, cuando las transiciones son automáticas pueden llegar a cansar e incluso restar atención al contenido que en realidad es lo importante.

El que veremos hoy es a petición de EcuaLink se trata de un slider que contiene la plantilla Elios adaptada por Web2Feel y que podemos descargar en BTemplates

Para añadir el slider nos situamos justo antes de </head> y pegamos el contenido de este archivo Si ya estamos usando jQuery eliminamos la siguiente línea de lo que añadimos anteriormente.


<div id='slidearea'>
<ul class='kwicks'>
<li class='kwik'>

<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>
</ul>

<div class='clear'/>
</div></div>

En Url-imagen añadimos la url de nuestra imagen de 750 x 256

En Texto-contenido es el espacio para incluir el texto que se muestra con fondo transparente. Igualmente haremos con Título- contenido.

Si deseamos suprimir la sombra del borde nos ubicamos en los estilos "slidearea" y eliminamos lo marcado en negrita, también podemos añadir otros tipos de borde.

#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}

67 opiniones:

MamaNunes: Belisssimo! Lo use en mi plantilha "Animal". Quedo perfecto! :P
besitos; 28.10.10 Reply
Maria Claudia: Muchas gracias por compartir. Seguí todos los pasos pero no logro que funcione. No lo estoy usando para un blog de blogger por si acaso sino para un web sencillo. Aquí te dejo la dirección de prueba para mostrarte como me resulta. Si pudieras orientarme te agradecería mucho.

http://invergas.net/test.asp

Un saludo desde Lima, Perú
María Claudia; 28.10.10 Reply
Gem@: :: Saludos Maria Claudia no tengo respuesta a tu pregunta porque desconozco como funciona ese tipo de web que muestras :S; 28.10.10 Reply
Maria Claudia: pero si es un web simple.. es puro html, no hay nada adicional (la extensión no tiene nada que ver, acabo de pasarla a un formato html)....

el web no tiene nada que ver en realidad, es un dominio simple y un hosting común y corriente

http://invergas.net/test.html

digo, ¿publicas un buen tip y no puedes ofrecer asistencia?.... si fuera así, ¿de dónde lo tomaste para consultar en la fuente?

gracias; 28.10.10 Reply
Nadie: Hola Gema , gracias por compartir y atenderme. Te comenté lo de los emoticonos en los comentarios, los he modificado, pero me sigue saliendo el pop-up. No se ve casi pero sigue saliendo y no sé como quitarlo. Sale en la ventanita donde están los emoticonos. Gracias,me alegro de que te premiaran pues así he podido conocer tu blog.; 28.10.10 Reply
JAIME: Hola Gem@, esta muy interesante, lo probare, pero hoy tengo una consultita: Como saco el texto q sale al clicar en una categoria (o etiqueta)? Me sale algo como esto:
"Mostrando las entradas más recientes con la etiqueta XXXX Mostrar las entradas más antiguas" o talvez modificarlo con otro texto respecto a la etiqueta solicitada, gracias de antemano por tu ayuda ;); 28.10.10 Reply
Gem@: :: MamaNunes he visto la plantilla Animales y es cierto quedó fantástica :)
(Lamento no ver el comentario antes)

:: Maria Claudia la mayoría de publicaciones están destinadas para poder adaptar a plantillas de Blogger, quizás de ahí viene el problema y el script no funciona porque contiene caracteres imprescindibles para su funcionamiento en estas plantillas.
La finalidad de este blog no es proporcionar asistencia, ni es mi profesión ni me dedico a ello simplemente transmito ideas que funcionan en "Blogger" otra cosa es que no funcione para cualquier otra plataforma incluido como en su caso una web con un hosting común.
¿De dónde lo tomé? lo dice bien claro "la plantilla Elios adaptada por Web2Feel y que podemos descargar en BTemplates" esa es la fuente.

:: Nadie esa ventana que comentas es un archivo descargable de los emoticones anteriores, imagino que al hacer el cambio no ha sido eliminado, el archivo se llama "Emoticon Vku" puedes marcar para expandir la plantilla y buscarlo pero antes de eliminarlo haz una copia de respaldo ;)

:: Jaime puedes eliminar ese texto marcando para expandir la plantilla y buscando la siguiente línea:

<b:include data='top' name='status-message'/>

lo eliminamos y listo ;); 29.10.10 Reply
Nadie: :) Gracias, pero he terminado por eliminarlos, ya que parece que ocurren fenomenos extraños en mi blogs y eso sin hacer la copia: a los titulos de entrada le sale doble comillas(sin estar), y tenía un menú despegable ´que se ha mutado, no sé ¿Puede que se meta un virus en la plantilla? Mis problemas vienen desde los dichosos emoticonos jajaja, Pero intentaré arreglar todo esto. Gracias y perdona que sea tan pesada.; 29.10.10 Reply
Gem@: :: De pesada nada Naide :) sin duda todo viene de esos cambios, puede que sea algún conflicto entre scripts, de todas formas si eliminando los emoticones se ha solucionado lo que puedes hacer es intentarlo en un blog de pruebas con la misma plantilla.
No te arriesgues a realizar grandes cambios sin hacer copia ;); 29.10.10 Reply
Nadie: Pues ya la he liado, hice los cambios sin realizar copia, y se me ha variado todo, me he quedado sin el fondo, las entradas mezclan mayúscula y minúsculas, se ha mezclado el texto, en fin un desastre. Se me habrá disfrazado el blog solito para Halloween, jajaja
Intentaré arreglarlo como tú dices bajándome la plantilla a un blog de pruebas, De esta he aprendido. Muchas gracias, virtuales y de las de verdad.; 29.10.10 Reply
JAIME: Gracias Gem@, lo hare asi, eres un sol !! :D; 29.10.10 Reply
Gem@: :: Nadie no toques nada de la imagen de fondo, es el servidor dónde está alojada (dropbox) que está fuera de servicio.
En el mismo sitio, en los estilos de body tienes esto: (body.background); dos veces lo puedes eliminar las dos.
En las letras no veo nada extraño ¿estás segura que no tocaste nada en los estilos de post??

::Suerte JAIME ;); 29.10.10 Reply
Nadie: :) No lo sé, ya no sé lo que he tocado, de todas formas me queda una entrada que arreglar que la he puesto en cuarentena, ers muy amable, no sabía que estaba caido, mire que Picassa aunque sea de blogger tb puede utilizar servidores externos,y eso me decidió para utilizar dropbox. Lo más bueno de esto es que me encanta el trasteo de la plantilla, y que con estos sustos aprendo mogollón, jajaja. Bueno un besico y gracias otra vez.; 29.10.10 Reply
CARLOS: Hola Gema:

Antes de nada felicitarte por tu blog; he estado cacharreando con este slider en mi blog y aunque me funciona bien me sale un sombreado extraño que desconozco si se puede quitar, imagino que si y que con una pequeña ayuda tuya sea capaz de hacerlo.

Si le quieres echar un ojo es éste www.implantando.blogspot.com. Es un blog que nos han mandado en una asignatura del módulo que estoy haciendo.

Muchas gracias anticipadas por tu ayuda.; 29.10.10 Reply
Graciela: Guau qué chulo :P; 29.10.10 Reply
SHIRELL007: :D que buen blog me encanta todo lo que hay en el es de mucha utilidad; 29.10.10 Reply
Gem@: :: Me alegra que te guste SHIRELL007 :D; 31.10.10 Reply
Gem@: :: Es como mejor se aprende Nadie (de los errores) :)

::: No lo veo en el blog Carlos :S

:: Está lindo Graciela verdad? lo que nos gustan estas cosas :); 31.10.10 Reply
ramosmi: Hola Gema@!!
Felicidades por el blog, siempre es útil! He intentado poner esta galería, pero necesito que sea de 750x562. ¿Cómo lo cambio? He cambiado en la edición del gadget el tamaño, pero me salen las imagenes cortadas. ¿Me puedes ayudar?:(; 7.11.10 Reply
Gem@: :: ramosmi las imágenes también deben medir menos si has disminuido el ancho :S; 7.11.10 Reply
Juan Taloneta: Hola

Tiempo sin visitarte. Antes que todo, felicidades por el premio, muy merecido. :)

Ahora si la pregunta inevitable. Dando vueltas por ahí para hacer algo que quería, me encontré con esto: http://www.google.com/uds/solutions/slideshow/. Es la forma en que funcionan las presentaciones de imágenes que usan rss en el respectivo gadget de blogger. Pero me preguntaba, sabiendo que blogger no admite javascript en las entradas, ¿es posible insertar una de esas presentaciones en un post?.

Sospecho que hay formas, pero mi conocimiento no da para más que sospechas.

Bueno, no siendo más, te mando un fuerte abrazo y te felicito nuevamente, como no lo hice en su momento.

Saludos; 8.11.10 Reply
ramosmi: ys medían eso... se me olvidó cambiar el tamaño de la slide...ya lo he conseguido. Gracias!!:D Lo dicho:felicidades por el blog, me ha ayudado muchas a complicarme la vida, de una manera divertida!!; 8.11.10 Reply
Gem@: :: Me alegra oír eso ramosmi :D; 8.11.10 Reply
Gem@: :: Juan Taloneta si que podemos añadir javascript en un post siempre que lo que añadimos no sea mayor al espacio de las entradas.
Si el efecto que deseamos añadir requiere estilos también tendremos que añadirlos en la misma entrada de la siguiente forma:
<style type='text/css'>
aquí los estilos
...............
</style>; 8.11.10 Reply
Ollodepez: Hola Gem@.
Felicidades por tu blog y tu gran trabajo.

Quería hacerte una pregunta con respecto a este slider. Estoy haciendo pruebas y no soy capaz de que el recuadro gris en donde aparece el texto permanezca por delante de la imagen. Se queda escondido detrás de ella.

¿A qué puede ser debido? Creo que seguí todos los pasos tal y como lo explicas (por cierto, muy bien explicado). ¿Qué solución podría tener? Si la tuviese.

Muchísimas gracias.; 9.11.10 Reply
Gem@: :: Ollodepez tendría que er ese ejemplo online :S; 10.11.10 Reply
Gem@: :: Quise decir tendría que ver :$; 10.11.10 Reply
AP I / II: Hola Gem@. Es la primera vez que te escribo pero soy asiduo visitante, tu blog me ha enseñado muchisimo.

Quería preguntarte con respecto a este slider...lo estoy probando para implementarlo en mi blog, funciona perfecto pero me salen los titulos en el recuadro de texto de otro color que el del texto de abajo...ni idea que puede ser. Te paso la direccion del blog de pruebas. Mil gracias, cuando puedas me contestas.
Saludos
Martin

http://appruebas2.blogspot.com/#; 12.11.10 Reply
Gem@: :: AP I / II lo en el archivo que copiamos y pegamos en la plantilla verás que contiene los estilos y una parte que dice color:#888; ese es el color de fuente :); 12.11.10 Reply
caricuaofoto: Excelente articulo, mi duda seria como hacer para que quede centrado,en la prueba que monte se va un poco a la derecha y a la vez si voy a ponerlo un poco mas pequeño cuales son los parametros a modificar. muchas gracias de antemano...; 12.1.11 Reply
DeLuxe: Hola Gema!

Antes de nada darte las gracias por todo lo que nos enseñas, en serio nos eres de gran utilidad!

Lo que te quería preguntar era si sabías si se puede utilizar el slider gratuito de esta página http://www.slidedeck.com/ en Blogger.

Es que estoy haciendo un blog (está en proceso) y me encantaría utilizar al inicio de la página un Slider de jQuery. De todos los que he visto, el que más me apasiona es el Slide Deck, pero casualmente no encuentro por internet ningún tutorial que me ayude a instalarlo en mi blog de Blogger.

¿Es posible instalar este slider en Blogger?

Muchas gracias por todo, de verdad.; 6.2.11 Reply
Gem@: :: DeLuxe para ese Slide es necesario un plugin para WordPress :S
Por si te sirve de ayuda este es con CSS no requiere scripts:
http://vagabundia.blogspot.com/2010/04/acordeones-solo-con-css.html; 6.2.11 Reply
Gem@: :: caricuaofoto lamento ver tan tarde tu comentario, he visto que ya no lo tienes añadido .; 6.2.11 Reply
Baseema: Este comentario ha sido eliminado por el autor.; 8.2.11 Reply
Monica Custodio: Gemaaaaaa! Querida! Vuelvo a estar por aquí!
Me encanta este efecto .....
Lo estoy instalando pero tengo un problema con el ancho.
Se me escapa un poco por la derecha y no se dónde puedo reducir el ancho.
Graciaaaaaaaaaaas!!!!!!!; 8.2.11 Reply
Gem@: :: Hola Mónica ¿dónde está ese slider que vea el problema? estuve mirando en tus blogs pero no lo encuentro :S; 8.2.11 Reply
Monica Custodio: Ay Gema, es que es un blog para un proyecto que mientras no está acabado lo tienen en privado! Ups! A ver si te puedo explicar el problema ...... Ya he conseguido adaptar el slider al blog. El problema es:
el slider tiene 5 pestañas por llamarlas de alguna manera, no? Pues la pestaña 5 cuando se despliega se solapa con la 4. O sea la 4 y la 5 van casi juntitas. Si crees que no me puedes ayudar .... habilito un ratito el blog para que lo puedas ver. Gracias.; 8.2.11 Reply
Monica Custodio: @Monica Custodio Es como si al reducir el ancho total del slider la pestaña 4 y 5 se hubieran puesto juntitas ....; 8.2.11 Reply
Gem@: :: En ese caso es lógico lo que ocurre porque al disminuir el ancho le falta espacio a las pestañas y se superponen.
Si es problema habilitar el blog dime entonces que anchura le diste o que medidas has modificado ;); 9.2.11 Reply
Monica Custodio: Gema, guapa.
Mira ...... sólo he cambiado el ancho a 930 px.

slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:930px;

En cuanto a las fotos me da igual el tamaño que tengan, lo puedo adaptar.

Ahora no he tocado los 750 px que tienen en tu ejemplo!

Gracias por ayudarme.; 9.2.11 Reply
Gem@: :: Mira Mónica, este lo he creado con la medida que dices de 930px:
El tuyo se ve así?
http://blackandcolors.blogspot.com/; 10.2.11 Reply
Monica Custodio: exactamente así! igualito, igualito!; 10.2.11 Reply
Gem@: :: Creo entender qu elas dos últimas pestañas por la derecha se visualizan menos anchas que las otras ¿es eso?
Comprueba lo siguiente y cambias el ancho a width: 190px, mira en vista previa si fuera eso.

.kwicks li {
float: left;
width: 190px;
height: 250px;
position:relative;
}; 10.2.11 Reply
Monica Custodio: Si, es eso. La pestaña 4 y 5 se solapan.
Ahora pruebo lo que me comentas .....; 10.2.11 Reply
Monica Custodio: Genial Gema! Se ve genial! Muchísimas gracias! Graciaaaaaaaaas!!!!!!!!!! En cuanto hagan el blog público te lo enseño!!!!!!; 10.2.11 Reply
Gem@: :: Estupendo!!
Un abrazote :D; 10.2.11 Reply
Monica Custodio: Gema, disculpa que te vuelva a molestar.
Ya lo tengo instalado.
Sólo dos cositas:

- Las fotos de tu ejemplo miden 750 px? por algún motivo alrededor de mis fotos aparece un recuadro azul oscuro. Como si las fotos no ocuparan todo el espacio y hubiera un fondo azul-gris en el slide. Es posible cambiar ese azul por otro color?

- no consigo ver el título de la foto. Sólo el texto explicativo. Pero no lo veo nunca. Quiero decir que antes de hacer las modificaciones y copiar pegar tu ejemplo tal cual ya no lo veía.

Aish ojalá pudiera enseñarte el blog! Buf!

Te prometo que te compensaré!!!!! ;-)); 10.2.11 Reply
Monica Custodio: O sea, es un fondo que cuando no pongo el cursor encima es azul-gris, cuando pongo el cursor encima se pone rojo.; 10.2.11 Reply
Gem@: :: Mónica esos no serán los colores que tienes definidos para los enlaces del blog?
No sabría decirte porque en el ejemplo no se ve nada de eso :S; 11.2.11 Reply
PACHAMAMA SANT ANDREU: Hola Gemma .
Hacía mucho tiempo que no visitaba tu blog y otra vez te digo sinceramente que está genial .
El slider que muestras aqui está muy bonito pero.. ¿es posible hacer un remix de slider y menú?
¿es posible poner en el texto que sale en cada foto un enlace a otro blog?
La verdad es que éste slider no lo he probado porque , en mi caso particular , me interesaria muy mucho poderlo usar de menú .

Muchas gracias por todo; 26.2.11 Reply
Gem@: :: PACHAMAMA SANT ANDREU se puede añadir un enlace para ello donde dice a href='#' sustituimos la almohadilla por la url del enlace :); 2.3.11 Reply
PACHAMAMA SANT ANDREU: Muchas gracias Gemma
Despues lo probare; 4.3.11 Reply
Karla: Que mono está, seguro lo uso y luego te cuento :); 21.4.11 Reply
Karla: ...y tienes razón, me gusta más cuando las transiciones no son automáticas....; 21.4.11 Reply
Gem@: :: Cansa un poco ver pasar imágenes mientras leemos al menos a mí me pasa :); 23.4.11 Reply
Diegolu: Hola Gema.
Me ha encantado tu blog y la cantidad de material que se encuentra en el.
Quería hacerte una consulta desde mi nivel basico de blogger.
Dispongo de un blog:
http://apaleandoaleu.blogspot.com
en el cual estoy muy interesado en incluir el siguiente slider: http://nivo.dev7studios.com/
No llego a entender como y donde situar el contenido ya que viene explicado para wordpress.
Te ruego puedas echarme una mano e indicarme como hacerlo.
Muchisimas gracias por tu ayuda.
Mi email por si lo necesitas es playtres@gmail.com; 1.7.11 Reply
Gem@: :: Bienvenido Diegolu, hay un tutorial en Vagabundia sobre un slider creado con css sino esigual muy parecido a Nivo Slider pero no logro localizarlo.
Pregunta a JMiur seguro que él sabe donde lo guarda :)
http://vagabundia.blogspot.com/; 1.7.11 Reply
Hugo Turrós: Gem@: Bueno, al fin he conseguido buenos resultados. Soy medio duro en esto pero ahora funciona bastante elegantemente. El problema es que coloca un borde que me desplaza las fotos, las separa y no me gusta. Descubrí que era un .png y le cambié el color a amarillo para detectarlo. Cuando paso el mouse me lo cambia a blanco que es otro .png
Como hago para sarlos y recuperar el espacio que me roban.
Mil gracias.
Hugo; 3.7.11 Reply
Hugo Turrós: Gem@:
Me faltó el link, perdón
http://leccionesdelsa.blogspot.com/; 3.7.11 Reply
Gem@: :: Hugo no entiendo eso de recuperar el espacio que te roban las imágenes de fondo, si la eliminas queda la misma distancia entre imágenes y visualmente tendrías ese mismo problema.; 5.7.11 Reply
Cocofansclub: Hola Gem@!
he probado este slider y me encanto,quisiera saber
porque me queda el titulo y el contenido todo centrado,me gustaria que quede como en el ejemplo que das que comienzan los textos a la izquierda.
saludos!; 19.7.11 Reply
Cocofansclub: Gracias Gem@ ya pude solucionarlo quedo perfecto!
saludos; 20.7.11 Reply
fanatico: me podrias ayudar esque me aparece muy grande y no me cabe y solo lo quiero que quepa en cabezera de las entradas y no en la parte de los gadgets (parte derecha) mira http://wtuiytrewetyutew.blogspot.com/ como ves se paza mucho de la parte de las entradas y si lo diminuzco en el codigo la parte de escribir texto no sale me podrias ayudar ?; 31.7.11 Reply
Gem@: :: fanatico no distingo en tu blog entradas estás seguro que es ese enlace que dejas?; 4.8.11 Reply
pepe: hola gema:
Antes que nada felicidadez por tu blog es de mucha ayuda..estoy haciendo pruebas con este slider pero no logro hacer que el texto se quede en su lugar cuando paso el mouse por la imagen desaparece, me podrias ayudar por favor, gracias es que soy muy novato en esto, te dejo el link del blog de prueba

http://pruebazona.blogspot.com/; 12.10.11 Reply
pepe: a si y tambien si podrias decirme como hacer para quitar el efecto de que al pasar el mouse cambie de color como el de este blog http://demo-animal.blogspot.com/# me gusto como quedó, y por lo que lei ella lo hizo biendo esta pagina, bueno muchas gracias por leerlo!; 12.10.11 Reply
Gem@: :: Pepe la plantilla que estás utilizando es una plantilla de las nuevas y esas añaden código muy confuso. Los ejemplos y diseños los hago con una plantilla Minima es la que mejor se presta a ser personalizada.
Mira esta entrada:
http://gemablog-.blogspot.com/2010/07/aclarando-mis-ideas-sobre-las-nuevas.html; 12.10.11 Reply