Carrusel de imágenes con Scriptaculous

11 de octubre de 2011 207 comentarios ,


Este es un carrusel de imágenes de Brian R. Miedlar que muestra las imágenes con un efecto de deslizamiento y regresa al inicio una vez llegado a la última imagen. Está hecho con Scriptaculous así que quienes usen jQuery ya saben que deberán aplicar un hack para que ambos scripts funcionen.
Puedes ver un ejemplo funcionando en este blog de pruebas.

Para poner este carrusel de imágenes en tu blog primero necesitas descargar este archivo, descomprimirlo, y subir los archivos a un hosting.
Luego, entra en la Edición HTML de tu plantilla y agrega antes de </head> esto:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->


<script language='javascript' src='URL del archivo os.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo carousel.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo application.js' type='text/javascript'/>

Si ya tienes Scriptaculous y Prototype no hace falta que agregues el código gris, pero el resto sí. Ahí coloca donde se indica en color rojo las URLs de los archivos que subiste previamente.

Ahora antes de ]]></b:skin> pega los estilos.
.carousel {
position:relative;
clear:both;
left:20px; /* Distancia desde la izquierda */
margin-top:10px;
margin-bottom:20px; /* Margen inferior */
border:2px solid #D8D8D8; /* Borde del carrusel */
background-color:#F2F2F2; /* Color de fondo */
}
.carousel .navButton {cursor:pointer; display:block; text-indent:-9999px; background-repeat:none; z-index:10;}
.carousel .container { position:absolute; overflow:hidden; }
.carousel .items { position:absolute; }

#Carousel2 {
height:88px; /* Alto del contenedor */
width:685px; /* Ancho del contenedor */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* Ancho del contenedor de las imágenes */
height:100px; /* Alto del contenedor de las imágenes */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* Ancho total de todas las minaturas */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu1vL9eBOyQw4jmBXwYM5TUdbCi3rkYcrLM2VJr1VWnlTaJyDkA27_y75MTTOacrs5_jFidyeYBWXF2g8gRjiyrTLyergMN9so7SOdru4YLOt-kyV7klaKw6xNLk3RkkbDGrbKaJ0axto/s87/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm0mJIiVCB8R0JLFl2ttw7JeCW6lhQ6cf8p3HJjR1cEJ0VbAm52TV4b0Bggm5xe3m3ksI1keG-yT66lw25w9RhTtancgRfO5f8IF_LwUBTOhvFB7yj1oqeGzQmePLl65Lipkggi6-s6Pw/s87/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}
Después entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pega la estructura del carrusel:
<div id="Carousel2" class="carousel">
<div class="button navButton previous" style="display:none;">Atrás</div>
<div class="button navButton next" style="display:none;">Adelante</div>
<div class="container">
<div class="items">


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>


<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>



</div>
</div>
</div>

Ahí agrega las URLs de los enlaces y las URLs de las imágenes. La URL del enlace es opcional por si deseas que la imagen enlace a alguna entrada.

En el segundo código he puesto en color verde algunos estilos que puedes personalizar tales como el color del borde y el color de fondo. Las flechas son imágenes así que si quieres cambiarles su color o usar otras, tendrás que cambiar las dos URLs que se encuentran en ese código.

El tamaño.
El ancho del carrusel yo lo he puesto de 685px, así que debajo de la cabecera podría quedar muy bien. Si quieres cambiar la longitud entonces tendrás que cambiar el /* Ancho del contenedor */ (que es el tamaño de todo el carrusel), el /* Ancho del contenedor de las imágenes */ (que es el área donde se muestran las miniaturas), y el /* Ancho total de las miniaturas */ que es el ancho real que ocupan todas las miniaturas juntas.

Si agregas más imágenes o si quitas algunas, también tendrás que modificar el ancho total de las miniaturas, de lo contrario se mostrarán algunas imágenes debajo de otras.

Para añadir más imágenes agrega antes de los </div> en color azul un pedazo de código como este:
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>

Para alinear el gadget sólo cambia la distancia desde la izquierda (en color verde) por otro valor, uno más grande hará que se recorra hacia la derecha.

El carrusel muestra grupos de 5 imágenes en cada avance o retroceso, si deseas modificar este valor deberás editar el archivo application.js y ahí dentro buscar esta parte:
setSize: 5,
Ese 5 es el número de imágenes que se muestran en cada avance, sólo cámbialo por el que quieras.

A modo de consejo: como los scripts son tres pueden ser lentos en cargar así que se recomienda alojar los scripts en la plantilla.

Y ahora sí, es todo.


207 comentarios en:

" Carrusel de imágenes con Scriptaculous "

  1. Buen post potro +10 jjaajaj estilo taringa!


    Potro a proposito no se podra hacer un tipo de puntuacion en Blogger como el de los post de Taringa!

    ResponderEliminar
  2. Al alguna forma de poner el titulo arriba del foto sin tener que mover el mouse sobre la imagen?? Gracias.

    ResponderEliminar
  3. Juvinao, no, pero sigue estando el botón de Facebook que contabiliza los Likes, o el Google+. Ahora que si te sientes muy generoso sigue estando el botón de donaciones, jajaja :)

    Delzon, por ahí hay uno con jQuery, pero ya andaban pidiendo uno con Scriptaculous.

    ResponderEliminar
  4. Excelenteeee!!! por favor no me ponga más faltas de coments que quedo libre :))

    Saludos chao chao

    ResponderEliminar
  5. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  6. Cronos_2012, en esos casos puedes usar la etiqueta MARQUEE, será más sencillo y sin tanto código. El problema es que con IE me parece que ya no funciona muy bien cuando se trata de imágenes.

    ResponderEliminar
  7. Jason Santoro, si eliminas esta parte de los estilos aparecerá arriba el nombre de la imagen:

    #Carousel2 .item .key { display:none;}

    El título de la imagen está en esta área:
    <div class="key caption">Thumb</div>

    Sólo que, como se mostrará también el título de la imagen tendrás que cambiar la altura del carrusel para que no se tapen las imágenes.

    ResponderEliminar
  8. aaaaah esto es lo ke hace un buen rato andaba buscando!!! mil gracias como siempre por tus aportaciones tan útiles =D

    ResponderEliminar
  9. jonathan[i2000], qué todo salga bien!

    Graciela, por supuesto que no, es más una estrellita de asistencia :) ★

    ResponderEliminar
  10. Muy curioso, sólo tengo una duda... ¿Qué tengo que hacer para que se me permita colocar más de un Carrusel en una misma página?

    ResponderEliminar
  11. Las Noticias de Tulum , ¡excelente!, también puedes poner un listón en el blog, aquí hay varios listones de causas y uno de ellos es color rosa:
    http://ciudadblogger.com/2010/11/listones-de-causas-para-el-blog.html

    Seguro es eso, ya sabes que hay algunos scripts de jQuery que se resisten a ser "parchados".

    ResponderEliminar
  12. Chico del Cereal, todavía no me voy a ninguna parte ;)

    Merlina, gracias a ti por tu visita, siempre es grato verte por acá :)

    ResponderEliminar
  13. Daniel Fernández, no he intentado poner más de uno en la misma página, pero si no se pudiera entonces supongo que habrá que editar todo, scripts, estilos y la estructura...

    ResponderEliminar
  14. Listo, ya lo pude adaptar. Así como dijiste, me tocó duplicar un pedazo del script application y añadir al css el nuevo carrusel. Saludos y gracias por el aporte.

    ResponderEliminar
  15. Hola Potro! Qué buena entrada!! algo así estaba buscando para mi blog. Ya lo implementé y quedó muy bien: http://nextpixel.blogspot.com/ Lo que no me gusta mucho y no encontré aun como modificarlo son las imágenes, que al no ser cuadradas quedan un poco distorsionadas. Se podrá ver la imagen sin distorsión dentro del cuadro? no importa si se corta un poco a los costados, pero que se vea bien. Saludos!

    ResponderEliminar
  16. Hola Potro, aún sigo con el diseño de mi plantilla, la original es la Mínima, hice los cambios con cuidado para no estropear nada y me surgen las siguientes preguntas, a ver si me puedes ayudar: 1. ¿Por qué los enlaces de Páginas me quedan marcados y no vuelven a su color original? No sé si me entiendes, pincho en el menú y se queda el color de enlace seleccionado aunque pinche en otro. 2. ¿Cómo puedo cambiar el tamaño de la letra de el gadget de páginas sin que afecte al resto del blog? Cuando cambio esa letra también le afecta a la parte donde pone comentarios, fecha y eso. 3. ¿Por qué si entro por modzilla mi blog es diferente al que veo en internet? ¿tengo que entrar por internet y volver a hacer los mismos cambios que en modzilla para que se queden? Muchas gracias. Te mereces un ingreso. ;)

    ResponderEliminar
  17. Marcos Carballo, si la imagen la subiste directo desde Blogger puedes cambiar una parámetro de la URL, por ejemplo, en la URL de alguna imagen que hayas subido desde Blogger se verá al final de ella más o menos así:

    /s400/imagen.png

    Ahí lo único que hacemos es cambiar el s400 (o el s1600 según el tamaño que hayas elegido al subirla), por s125-c eso hará que la imagen se reduzca a 125px y quede recortada perfectamente sin distorciones, por ejemplo:

    /s125-c/imagen.png

    Pero para este "truco" la imagen debes subirla desde Blogger.

    ResponderEliminar
  18. Hola Andrea,

    En los enlaces hay algunos tipos de estados, uno de ellos es el color del enlace cuando ya fue visitado, como has hecho click en ese enlace entonces cambia al color que está configurado en la plantilla.
    Te dejo un enlace para que personalices esos colores a tu gusto:
    http://ciudadblogger.com/2009/04/personalizar-links.html

    Para cambiar el tamaño de la letra sólo al gadget de páginas pon antes de ]]></b:skin> esto:

    #PageList1 {font-size:20px;}

    Las páginas de cualquier sitio suelen verse distinto según el navegador con que se ve, esto no debería suceder en un mundo ideal, pero la realidad es que como cada navegador tiene sus reglas y forma de interpretar los códigos por eso no siempre se ven igual las páginas en todos los navegadores, especialmente Internet Explorer que es el navegador que más problemas da.
    Mientras todo funcione bien y se vea lo más parecido posible no le hagas mucho caso, de otra manera terminaras con muchos dolores de cabeza, es experiencia propia ;)

    Saludos!

    ResponderEliminar
  19. Perfecto Potro, quedó muy bien. GRACIAS! Saludos

    ResponderEliminar
  20. Excelente!! y a la explicación le doy un 10. Gracias por hacer tan fácil lo que a algunos nos parece difícil.

    ResponderEliminar
  21. Hola El Potro muy buen tutorial.. pero tengo una duda me puedes pasar algún sitio para cargar los archivos que se necesitan subir..

    Muchas Gracias!!

    JUAN

    ResponderEliminar
  22. Ya conseguí este hosting muy bueno http://myfreefilehosting.com

    Saludo!!

    ResponderEliminar
  23. m.p.moreno, gracias a ti por tu visita!

    jonathan[i2000], ¿en cuál blog lo has puesto?

    ResponderEliminar
  24. Administrador, no conozco ese hosting, pero dos muy buenos son Google Sites y Dropbox.

    ResponderEliminar
  25. Pero a un user le dijiste q pensabas en ceerrar el blog u.u note vallas potro u.u T_T

    ResponderEliminar
  26. Te quedo muy bueno Potro... jeje no es que lo fuera a usar justo ahora, pero cuando tenga que usarlos tendre de donde elegir :)

    Saludos ;)

    ResponderEliminar
  27. Chico del Cereal, pero aún no hay nada en concreto, así que todavía estaré dando lata por acá :)

    javi_anubis, exacto, siempre hay que tenerlo todo como una opción para cuando se necesite ;)

    ResponderEliminar
  28. Es... Precioso... Ojala tenga alguna vez la posibilidad de usarlo, pero por ahora el blog no quiero toquetearlo mas :)

    ResponderEliminar
  29. Así como está ahora está bien, es mejor no sobrecargarlo :)

    ResponderEliminar
  30. tambien se se puede hacer un carrusel con tablas

    ResponderEliminar
  31. Hola Potro:
    Las imágenes me aparecen una tras otra en vertical y con la señal de rota con la palabra Thumb. Las imágenes están alojadas en Picassa no se si son validas.
    Estas no esta alojadas ahora por su mala estetica.
    http://franciscoadame.blogspot.com

    Un Saludo

    ResponderEliminar
  32. N_N que bueno Potro no te desanimes tienes mucha audiencia y fans<3

    ResponderEliminar
  33. car805, supongo que sí, aunque no lo he intentado.

    FRANCISCO, es necesario que lo vea puesto para saber dónde está el error, pero lo más probable es que al poner los códigos del segundo paso hayas eliminado una llave de cierre de otro estilo, y las imágenes seguro hay un problema ahí con la URL, pero te digo, sin verlo puesto no puedo saber con exactitud qué es.

    Chico del Cereal, gracias por los ánimos!

    ResponderEliminar
  34. Hola de nuevo Potro:
    Ya lo coloque en la parte mas inferior, probé omitiendo los Scriptaculous y Prototype y pase las imágenes de alojamiento en Dropbox, todo publico. No se lo que ocurre.
    Saludos

    ResponderEliminar
  35. No lo vi todo puesto pero no hizo falta, es como te decía, en los estilos has eliminado una llave de cierre y eso hace que nada de eso funcione:

    .footer-inner .widget {
    border: 1px solid #000;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding:10px;
    margin: 10px 0; <---------- AQUÍ FALTA UNA LLAVE }
    .msgPlusOne {
    background:#0B0B3B;
    color:#A4A4A4;
    padding:10px;
    font-style:italic;
    }

    Aquí hay más información sobre ello:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  36. Hola Potro:

    Gracias por tu ayuda, desearía que las imágenes fuesen mayores es decir que estas se vieran cuatro veces de mayor tamaño pero no encuentro la explicación del alto de las mismas.
    Espero tu ayuda una vez más.
    Saludos.

    ResponderEliminar
  37. Hola de nuevo FRANCISCO,

    Dentro del código de cada imagen están las medidas de cada una de ellas:
    width="65" height="65"

    Ahí tendrías que cambiarle el valor para que cambien de tamaño, claro está que si les cambias el tamaño tendrás que cambiar la altura del gadget tal como se explica en la entrada.

    Saludos.

    ResponderEliminar
  38. Hola Potro:

    Conseguí con tu ayuda lo pretendido. Muchas Gracias Potro.

    Saludos

    ResponderEliminar
  39. Hola Potro de Nuevo:

    Cuando incorporo más imágenes, me ocurre que se ve vienen abajo de las expuestas solo la mitad de ellas. No quedan con en la actualidad. He modificado los px y nada.
    Saludos.

    ResponderEliminar
  40. Hola FRANCISCO, eso sucede porque no has ampliado el /* Ancho total de todas las minaturas */, o al menos no lo suficiente. Eso igual lo menciono en la entrada, que si no se amplía entonces las miniaturas se vendrán abajo.

    ResponderEliminar
  41. ¿No se le podría agregar texto a las miniaturas?

    ResponderEliminar
  42. Sólo un pequeño título; mira el comentario #11

    ResponderEliminar
  43. Quisiera saber como qué debo cambiar para mostrar 4 imagenes en cada avance de un total de 8 imagenes ya intenté cambiando applicatio.js pero no funcione de la manera que quiero, ya que yo he cambiado los tamaños a 230*230 cada miniatura y funciona bien, pero al darle al cursor no muestra las ultimas imágenes.

    Busco un efecto más o menos como el slider de esta página: http://socialitelife.com/

    ResponderEliminar
  44. Tienes que encontrar la medida entre el ancho del slider, el ancho total de las miniaturas, y el grupo de imágenes que pasan por cada avance. Jugando con esos parámetros se podrá, tal como en la página del autor donde muestra en grupos de 3.

    ResponderEliminar
  45. Saludos potro ya tiene rato q me habia alejado del blogger, espero poder retomarlo :)
    esta muy bueno este post muchas graz me servirà mucho!!
    Saludos!!

    ResponderEliminar
  46. Hola potro como hago para que el carrousel se corra mas a la derecha u izquierda. Es decir todo completo. Lo que pasa es que en mi blog hay mucha separacion de la izquieda del panel al lado izquierdo de la plantilla.

    Asi mira.

    >>>>>>>>>>>>>>>> Aca esta el panel >>>>>>

    Lo que yo quiero que quede bien centrado debajo de la cabecera.

    Algo asi.

    >>>>>>>>> Aca estara el panel >>>>>>>>>

    Mi blog esta en beta por lo que estoy modificando poco a poco con tus tutoriales que tienes aca. Mi web es esta. Haber si me ayudas en algo mientras yo tambien puede que lo encuentre

    www.tuxpeliculas.com

    ResponderEliminar
  47. Potro gracias aunque ya me di cuenta porque era el problema era por esta linea

    left:20px; /* Distancia desde la izquierda */

    La deje asi

    left:0px;

    Deberas gracias por tus aportes y disculpas si consideras SPAM mi comentario anterior de todas msneras ya lo mejore. Muchas gracias...

    ResponderEliminar
  48. No hay problema, qué bueno que leíste bien esa parte que es donde se tenía que modificar para que quedara a la distancia que querías ;)

    ResponderEliminar
  49. hola potro quisiera me ayudaras en un problemita q tengo con mi blog. desde hace ya bastante tiempo e querido porner debajo de la imagen de cabecera una lista de imagenes en miniatura imagenes pero sin moverce.
    algo asi como este ejemplo:
    http://www.imagengratis.org/images/dibujooq5zo.jpg
    te agradeceria la ayuda,
    muchas gracias de antemano!

    ResponderEliminar
  50. lo logre hacer potro.. jejeje neciando pero lo hice....

    ResponderEliminar
  51. Me da gusto que lo hayas conseguido peor más aun que lo hayas intentado :)

    ResponderEliminar
  52. Hola mi estimado amigo Potro…

    Me da mucho gusto saludarte.

    Fíjate que googleando por ahí buscando ayuda para lo de una pagina que estoy realizando, te encontré…

    Bueno mas bien intentando realizar por que no se mucho al respecto.

    Quiero ver si me puedes ayudar con este proyecto que traigo en mente, el cual se trata de un sitio para poner publicidad local de la pequeña ciudad en donde vivo.

    Ya llevo parte del sitio pero me gustaría ponerle muchas cosas mas, principalmente quero ponerle dos cuadros donde irán banners de tipo flash .swf los cuales se estén cambiando cada 10 segundos, la cantidad que sea, y en el otro banner solo poner 5 que estén cambiando igual cada 10 segundos.

    Se que tu me puedes ayudar con esto, para que tengas una idea de que es lo que quiero lograr, voy a ponerte un ejemplo de un sitio de donde los vi www.ensenadahoy.com

    Espero tu consejo isaacr_22@hotmail.com

    Muchos saludos

    ResponderEliminar
  53. Hola Adrian,

    Hay una entrada que explica cómo poner banners de imágenes cambiantes, pero casi al final de los comentarios se habla de cómo modificarlo para que funcione igual con banners en flash:
    http://ciudadblogger.com/2009/04/banner-cambiante.html

    Ahí mismo puedes cambiar el tiempo que durará cada banner antes de cambiar al otro.
    Cualquier duda al respecto la vemos en esa entrada ;)

    Saludos y bienvenido a Ciudad Blogger!

    ResponderEliminar
  54. Hola potro aki molestando de nuevo hice un blog de pruebas antes aplicarlo al mio, pero sale errores, ya aloge 10 imagenes pero se ven asi:
    http://pruebatemplario.blogspot.com/

    Y sale un codigo raro, me puedes ayudar?

    Gracias de antemano.

    Saludos.

    ResponderEliminar
  55. Hola Templario,

    Repite de nuevo el tercer paso, elimina ese gadget y ponlo otra vez, los códigos que están ahí tienen errores.
    Prueba de nuevo y me dices cómo te fue.

    Saludos.

    ResponderEliminar
  56. Excelente Potro eso era......muchas gracias por todo............saludos

    ResponderEliminar
  57. hola potro un saludo quiero hacerte una consulta es posible poner el efecto que tiene el carrusel de imagener de esta pagina http://www.animeytv.com/
    me interesa lo del pie de pagina con el nombre y capitulo de la serie y el efecto que van cambiando
    PD: como subo las flechas de mi blog de pruebas http://pruebas.razhiel9004.com/ que queden centradas con la imagen

    ResponderEliminar
  58. Hola razhiel9004,

    En el comentario #11 puedes ver cómo hacer que se muestren títulos en las miniaturas, no es exactamente igual al que mencionas pero igual puedes mostrar un texto ahí.
    Para subir las flechas del carrusel busca esta parte:

    #Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }

    Eso que está en negrita cámbialo por otro valor, por ejemplo:
    bottom:20px;

    ResponderEliminar
  59. Gracias amigo, le hice algunas pequeñas modificaciones al carrusel: imágenes más grandes, le cambié las flechas, dejé fondo invisible y los vinculos que se abran en una nueva pestaña...

    http://anochecioalamitaddeldia.blogspot.com

    Saludos!

    ResponderEliminar
  60. Me ha encantado cómo lo has dejado Barricadxs :)
    Saludos!

    ResponderEliminar
  61. Hola Potro, esta excelente este aporte

    Una duda como hago para k haya un pequeño espacio entre cada Imagen, lo k ocurre es k ya me quebre la cabeza moviendo todos los codigos y no mas No jejejej, lo k ocurre es k me quedaron todas las imagenes Pegadas y se me hace k se ve mejor con un pequeño espacio

    Espero me ayudes mi Buen amigo, como siempre un Gran saludo

    PS: Te dejo mi Blog, para k veas como me quedo:

    http://planetadepeliculaskriec.blogspot.com/

    Gracias

    ResponderEliminar
  62. Hola kriec, qué gusto saludarte.
    Cambia esta línea:
    #Carousel2 .item { height:140px; width:92px; float:left; clear:right; }

    Por esta:
    #Carousel2 .item { margin-right:5px; height:140px; width:92px; float:left; clear:right; }

    Ahí puedes controlar la separación de esas imágenes.
    Saludos.

    ResponderEliminar
  63. Wooooooow, Potro Excelente no cabe duda k eres uno de los Mejores en Esto, de verdad, ademas de la Facilidad en la k Manejas los codigos, yo me quebre la cabeza moviendo todo jejjejeje.

    Gracias Mi Buen Amigo, Saludos y cuidate Mucho!!!

    ResponderEliminar
  64. Hola Potro:
    No me aparece el botón de desplazamiento.
    http://franciscoadame.blogspot.com

    Saludos

    ResponderEliminar
  65. Hola FRANCISCO,

    En ese blog no funcionará porque usas jQuery y es incompatible con Scriptaculous.
    Quizá puedas hacerlo funcionar si aplicas un parche para jQuery:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    Saludos.

    ResponderEliminar
  66. Oye potro me gustaria uno paresido a este mira este blog y mira el carruser que aparese ensima

    es el que dice vip en azul

    www.tedilumusic.net

    ResponderEliminar
  67. No conozco ese slider, ignoro cuál sea o cómo lo hayan hecho :/

    ResponderEliminar
  68. :( o no hay uno paresido men que ofreca info al lado de la inmagen o este mismo pero ponerle la info del tema al lado

    ResponderEliminar
  69. Quizá haya alguno pero yo no lo conozco, sería cuestión de que busques en la red alguno con esa característica.

    ResponderEliminar
  70. Hola... estoy implemtenando tus consejos a mi blog. en esta ocasion en este tutorial las imagenes me salen de forma vertical y no horizontal U_U desconosco por que ... lo borre y lo volvi hacer y sigue igual U_U

    ResponderEliminar
  71. ¿En cuál blog lo has puesto y a qué hosting has subido los archivos?

    ResponderEliminar
  72. ya quedo solucionado use el dropbox y ya esta funcionando correctamente pasara lo mismo con el script Orbit Slider de imágenes con jQuery

    lo que pasa es que ahora se congela la imagen y ya no continua no se a que de debe pues funcionaba bien.. en el tema decias que el codigo en vez de pegarlo a la plantilla lo podemos subir aun servidor..mas pienso que ese cogido lo pego en un txt y luego le pongo extencion .js vdd ? luego lo subo al dropbox mas como se pegaria en la plantilla?? disculpa U_u !!

    ResponderEliminar
  73. Si quieres alojarlo directo en la plantilla entonces no hace falta ningún hosting:
    http://ciudadblogger.com/2010/02/como-alojar-scripts-en-la-plantilla.html

    Pero si dices que se congela entonces puede ser que ya estás sobrecargando el blog, o que tienes otro gadget que está consumiendo muchos recursos.

    ResponderEliminar
  74. Hola amigo, muchas gracias por todas tus recomendaciones que me han sido muy útiles. Dos cosas: en mi blog http://elvisitantemaligno.blogspot.com tengo 3 slideshare que salen alineados a la izquierda y quiero colocarlos al centro (no puedo hacerlo) y aparecen a la izquierda. No se por qué sucede esto, ya que en la sección "The evil visitor" tengo otro que si sale al centro. De otra parte quisiera poder colocar las imágenes en paralelo o hasta en tres columnas (si es posible) en la sección "cuentos" en mi blog te puedes dar cuenta sobre lo que te menciono. Muchas gracias y feliz año...

    ResponderEliminar
  75. Disculpa el abuso, otra pregunta. Cada vez que actualizo mi blog el último post se coloca al inicio de todo y no deseo que esto suceda. Quiero que la página principal quede como está y todos los nuevos post aparezcan en las respectivas páginas (utilizo las etiquetas) pero siempre tengo que estar cambiando la fecha, colocádola anterior a los 5 post que tengo en la página principal de mi blog : elvisitantemaligno.blogspot.com ¿Hay manera de resolver esto? Mil gracias y saludos.

    ResponderEliminar
  76. Hola Fernando,

    Encierra el código del slider entre <center> y </center>
    Con eso debería centrarse.
    Respecto a lo otro, todos los blogs ordenan sus entradas en forma cronológica, del más nuevo al más antiguo sin importar si la entrada tiene etiquetas o no.
    Lo que puedes hacer es seleccionar desde la Configuración del blog, que se muestren 0 (cero) entradas en la portada, así no tendrías ninguna ahí, y sólo serían accesibles desde las pestañas.

    Saludos.

    ResponderEliminar
  77. amigo potro me hace falta una ayuda en mi blog no me salen las flechas para continuar o retroceder y no se porke porfavor estaria muy agradecido por tu ayuda desde ya gracias
    http://jenyal-elpoderdeunamorverdadero.blogspot.com/

    ResponderEliminar
  78. Muchas gracias amigo, lo voy a probar...

    ResponderEliminar
  79. JENYAL, lo que sucede es que donde has subido los archivos no te da una URL para que se ejecute el archivo, sino que abre una página para descargar el archivo.
    Súbelos a otro hosting como Dropbox, ahí no tendrás ese problema:
    http://ciudadblogger.com/2010/04/como-usar-dropbox.html

    ResponderEliminar
  80. gracias potro hermano ya esta. como veras ese detalle kedara perfecto en el post gracias

    ResponderEliminar
  81. potro wow un gran problema ya una vez solucionado lo de las flechas inicie a poner los URL y todo, pero al llegar al recuadrito numero 25 este ya no se ponia horizontal sino ke se ponia debajo de todos como haciendo una nueva fila. kisiera que me ayudes a solucionar ese pequeño problema. desde ya estoy muy agradecido contigo
    http://jenyal-elpoderdeunamorverdadero.blogspot.com

    ResponderEliminar
  82. En la entrada se habla sobre ello y cómo evitarlo. Saludos.

    ResponderEliminar
  83. GRACIAS POTRO NO ME HABÍA FIJADO

    ResponderEliminar
  84. Se puede adaptar de otra manera? es decir, que se muestre de a una las imágenes y que éstas no sean miniatura sino más grandes? y cómo se regula el tamaño de la imagen con el del contenedor? porque como mi blog tiene Scriptaculous entonces no pude utilizar el que realmente me interesaba que te pregunté cómo sacar las descripciones de abajo...espero tu respuesta! saludos.

    ResponderEliminar
    Respuestas
    1. Hola María de las Mercedes, antes de que pruebes este, mira la respuesta que te dejé en la otra entrada, seguro podrás tener el slider que quieres ;)

      Eliminar
  85. Hola Potro, he hecho lo que le dices a Henyal y aun me sigue saliendo el carrusel sin botones, ya los cargue a Dropbox y copie la url pero aun sigue sin los botones de ratacion. www.carlosgabriel.net Gracias por tu ayuda anticipada.

    ResponderEliminar
    Respuestas
    1. Hola Carlos,
      Prueba quitar del código esta parte:
      <div class="button navButton previous" style="display:none;">Atrás</div>
      <div class="button navButton next" style="display:none;">Adelante</div>

      Quitando lo que está en negrita deberán aparecer, aunque no estoy seguro de que funcionen, pues veo que tienes dos veces el script del fanbox deslizante. Quita uno de ellos, verás que lo tienes dos veces.

      Saludos.

      Eliminar
  86. Hola Potro.

    Tengo algunos problemitas con la implementación del carrusel.
    Mi primera duda es si el código html se puede agregar en una entrada, si la respuesta es si, te pido por favor que te pases por mi blog, en la primera entrada de la pagina principal en la cual he tratado de implementar este carrusel pero no he logrado ampliar la altura del contenedor de las imágenes ya que quiero que las imágenes se vean del mismo tamaño de la galería que esta inmediatamente debajo del carrusel carrusel.

    Y mi segunda pregunta es si las imágenes del carrusel se pueden abrir con shadow box al darle click.

    Este es uno de los problemas mas complejos que he tenido.

    De antemano muchas gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. pd: los archivos los he alojado en la misma plantilla y perdon, me olvide de poner mi blog.

      www.arteentorno.com

      Eliminar
    2. Hola victorache,
      Esta parte de aquí es la que determina la medida de las miniaturas:

      #Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}

      Si eliminas esa parte en negrita entonces cada miniatura tendrá el tamaño que tú quieras.
      Lo de Shadowbox no lo he intentado, será cuestión de que pruebes usarlo junto con la galería y ver qué resultados te da.

      Saludos.

      Eliminar
    3. Muchas Gracias Potro!
      Ya he intentado lo del Shadowbox y también me ha resultado.

      Saludos!

      Eliminar
  87. Hola!!!!! :D
    Me encanta tu web, me ha servido un monton!!
    Antes no me iban los botoncitos de atra y adelante pero le kite display:none; y me fue perfectamente!!

    Pásate y miralo .. :)

    http://librosletralatente.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Me da gusto que hayas sabido cómo resolverlo MewaL.L.L. :)

      Eliminar
  88. Buenas Potro.

    Escribo de nuevo por otro problema; me ha quedado muy bien el carrusel pero no me funcionan las flechas. Al comienzo no me aparecían e intente borrando el style="display:none;" y ahora si me salen pero no me funcionan T_T. Estoy realmente decepcionado ya que me había quedado muy bien. Ojala que tengas una solución para ésto Potro.

    Saludos!

    De antemano te agradezco ya que mi blog existe gracias a ciudadblogger.

    ResponderEliminar
    Respuestas
    1. pd: siempre olvido poner mi blog. www.arteentorno.com
      Disculpa.

      Eliminar
    2. Lo que pasa es que usas jQuery, y aun hay partes que no tienen aplicado el hack.
      Con las teclas CTRL + F busca todos los $ que encuentres, aquellos que pertenezcan a un script antes de </head>
      Antes de hacer eso haz un respaldo de tu plantilla, por si algo saliera mal.
      Saludos.

      Eliminar
    3. Hola Potro. Ya hice el hack de las partes que faltaban y aun no funciona. ¿Qué podrá ser?

      Espero atento a tu respuesta.

      Gracias.

      Eliminar
    4. Ahora que estoy viendo, no tienes completo el primer código o.O

      Eliminar
  89. Gracias Potro!
    Eres un genio. No tengo palabras para agradecerte, pero después de hacer lo que me dijiste también alojé los archivos en dropbox y ahora si me funciona a la perfección.

    Pásate por mi blog para que veas como está quedando gracias a todos los tutoriales que haces y me das tu opinion.

    www.arteentorno.com

    Muchas Gracias otra vez.

    ResponderEliminar
    Respuestas
    1. Buenas Potro.

      Escribo de nuevo porque me surgió otro problema, mira como se ven las imágenes del carrusel en este post.

      http://www.arteentorno.com/2012/02/arte-en-torno-mi-bella-genio.html

      ¿Cómo podría solucionarlo?

      Espero no tener mas problemas con esto.

      Muchas gracias de antemano.

      Eliminar
    2. No entendí victorache, ¿qué tienen la fotos del carrusel?

      Eliminar
    3. La última imagen se superpuso sobre la penúltima.

      Eliminar
    4. Te vuelvo a dejar el enlace de la entrada ya que el anterior ya no funciona.

      http://www.arteentorno.com/2012/02/arte-en-torno-mi-bella-genio_10.html

      Eliminar
    5. Busca esta parte y quita lo que está en negrita:

      #Carousel2 .item { height:70px; width:70px; float:left; clear:right; }

      Eliminar
    6. Hola Potro.

      Muchas Gracias por tu respuesta. Ya he solucionado este problema pero desafortunadamente ahora tengo otro cuando le doy click en la flecha el carrusel se desliza pero cuando le vuelvo a dar click ya que queda faltando por mostrar solo una foto se vuelve al principio y no la muestra.

      Te dejo de nuevo el link de la entrada:
      http://www.arteentorno.com/2012/02/arte-en-torno-mi-bella-genio_10.html

      Ojala ya pueda solucionar por completo este tema del carrusel.

      Muchas Gracias por todo!

      Eliminar
    7. Probablemente se solucionaría cambiando el ancho del contenedor que encierra las miniaturas, pero como modificaste la opción de que las miniaturas tengan una medida predeterminada no veo cómo pueda solucionarse.

      Eliminar
    8. OK, Muchas Gracias Potro.
      Ya lo he solucionado modificando los valores del ancho de los contenedores y también modifiqué un poco los anchos de las miniaturas.

      Te dejo el link por si quieres pasarte a verlo.
      http://www.arteentorno.com/2012/02/arte-en-torno-mi-bella-genio_10.html

      Te agradezco mucho Potro, por fin tengo un carrusel en mi blog!

      Eliminar
    9. Qué bien victorache, el resultado ha sido estupendo :)

      Eliminar
  90. por favor ayuda urgente,,,, funciona perfecto en Mozilla firefox, pero no carga las imagenes si lo veo con el navegador Crome... que hagooooo... por favor ayuda....
    Tus explicaciones son perfectas y me han ayudado mucho!!

    este es el blog donde estoy implementando tu manejo de imagenes... gracias

    http://muerteyfestejo2012.blogspot.com/

    gracias!!

    ResponderEliminar
    Respuestas
    1. y tampoco m funcion con internet explorer y es para una tarea de la universidad :(

      Eliminar
    2. Ya encontre el problema... nunca habia usado drpbox y habia colocado todo en una carpeta que no era public!

      FUNCIONA PERFECTO!!! ... MIL GRACIAS POR TU BLOG!!!
      ES G.E.N.I.A.L

      Eliminar
    3. Llegué tarde por causas de fuerza mayor, pero me alegra saber que encontraste el error y supiste cómo resolverlo :)
      Saludos.

      Eliminar
  91. Hola potro esta tarde lo probe y funciona muy bien, loq ue te queria preguntar es que si quiciera poner un texto sobre cada imagen con un medio fondo blanco como este imagen de ejemplo, como podria hacerlo.
    Un saludo!

    ResponderEliminar
    Respuestas
    1. Hola Martin, mira el comentario #11, en el primer código verás que es el estilo que oculta el título, así que a partir de ahí podrías darle la forma que deseas, será cuestión de que uses márgenes y un fondo.

      Eliminar
  92. Gracias potro algo pude lograr, lo podes ver aqui.
    Ahora el problema es que como que todo lo referido al texto se superpone en la primera imagen, como lo puedo solucionar?.
    Crees que borre algo que los submenus del menu no andan ahora?
    Saludos potro.

    ResponderEliminar
    Respuestas
    1. No entendí Martin, veo el título encima de la imagen, ¿no lo querías así?

      Eliminar
    2. Si si Potro pero en todas las imagenes, ahora se superponen todos los textos en la primera img, asi lo note antes de aplicar el fondo.

      Eliminar
    3. Entiendo, no me había fijado de ese detalle. Entonces quizá tengas que quitar el position: absolute; que está dentro de #Carousel2 .item .key {
      Eso hará que los títulos con la franja se pongan arriba de la imagen, pero no encima, así que tendrás que hacer más alto el contenedor del slider para que la imagen se muestre completa.

      Eliminar
  93. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  94. Potro asi era, quite el absolute.
    Despues para superponer el texto sobre la imagen use la propiedad z-index en el texto mismo y al parecer quedo bien.
    Lo que si te queria preguntar, como hacer para que la transparencia del fondo no afecte al texto.
    Y por otro lado, agrego la url pero no me toma el enlace solo en unos 3px por debajo de la img, como lo puedo solucionar potro?
    muchas gracias un saludo

    ResponderEliminar
    Respuestas
    1. Tendrías que usar una imagen semitransparente como fondo, de esa forma no se aplicaría la opacidad que afecta a todos los elementos. Lo del enlace debe ser por la posición del título :/

      Eliminar
  95. si creo que con la imagen no se va a poder, si logre que quedara en el texto, pero para que no parezca un link con el color, como se lo quito?
    Ademas no pude con el ancho total, se corta en la img 6 por ahi, esta algo mal?
    Saludos potro

    ResponderEliminar
    Respuestas
    1. Eso ya e spor tu plantilla, tal vez tengas que ponerle un estilo para los enlaces:
      #Carousel2 .item .key a { color:#fff;}
      #Carousel2 .item .key a:hover { text-decoration:none;}

      El ancho supongo que tendrás que seguir probando con varios valores, tanto de las miniaturas como del contenedor.

      Eliminar
  96. Hola..
    a ver te consulto..
    puedo utilizar esto en una web ?? (html + css )
    o solo en blogger?
    Saludos!

    ResponderEliminar
    Respuestas
    1. Seguramente sí, pero yo sólo lo he probado en Blogger, así que sólo podría asesorarte con esa plataforma.
      Saludos.

      Eliminar
  97. Hola, yo tengo la misma duda que eme D y C. Aunque no exactamente. He introducido los códigos HTML y me sale error de sintaxtis en la línea 18.

    script language='javascript' src='URL del archivo application.js' type='text/javascript'

    El caso es que yo comparo con las otras líneas y no encuentro ningún error. Trabajo con dreamweaver y allí se ven unas imágenes pero luego la página web se ve en blanco y no sé si es por ese error. Gracias

    ResponderEliminar
    Respuestas
    1. No sabría decirte Wendy, todos los trucos los pruebo únicamente en Blogger. Lo que sí puedo decirte, y quizá no tenga que ver pero debas tomar en cuenta, es que en Blogger el cierre de las etiquetas se pueden hacer en la misma línea, por ejemplo:
      <script language='javascript' src='URL del archivo' type='text/javascript'/>

      Pero en otras plataformas debe cerrarse de la forma tradiciona:
      <script language='javascript' src='URL del archivo' type='text/javascript'></script>

      Eliminar
  98. Hola Potro.

    Escribo por un pequeño problema que tengo. El carrusel se sale hasta el sidebar ya que recientemente reduje el ancho de mi blog y no he sido capaz de moverlo a la izquierda

    Ya intente cambiando el left:20px por un valor menor pero no pasa nada.

    Te dejo una imagen del problema:
    http://tinypic.com/r/2mfj5ew/6

    Y mi blog es:
    www.arteentorno.com

    Muchas Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Tienes que reducir más el ancho del carrusel, ahora se sale porque el contendor es más pequeño, así que tendrás que trabajar en los anchos de los contenedores del carrusel.
      Saludos.

      Eliminar
    2. Gracias por tu respuesta Potro.

      Eliminar
  99. Hola Amigo.. [ El Potro ]

    Por fa ayúdame no se por que motivo ya no aparecen los botones del "Carrusel de Imágenes" para avanzar o retroceder...?

    Ahí como centrar todo el cuadro del carrusel?

    Gracias...

    ResponderEliminar
    Respuestas
    1. ¿Has revisado que no tengas jQuery o Mootools, o que tengas aplicado el parche de jQuery para que funcione con Scriptaculous?
      Si nada de lo anterior es tu caso entonces mira el comentario #93.1

      Eliminar
    2. Hola Amigo..

      Ya cambie el código cómo lo indica el comentario #93.1 ahora ya aparecen los botones pero no hacen nada.

      E revisado y cambiado el "jQuery" de los botones arriba y abajo y nada a cambiado. Que más podría hacer.?

      Gracias por tu ayuda...!

      Eliminar
    3. No sé, habría que ver en cuál blog tienes el problema.

      Eliminar
    4. Mi Blog --- MEG@-PC -- ( Http://m-pc-r.blogspot.com )

      Eliminar
    5. Prueba poner estos scripts después de los de jQuery.

      Eliminar
    6. ¿ Cuales "scripts" ? y en que lugar x fa...?

      Eliminar
    7. Los de esta entrada, ponlos después de los de jQuery que tienes en tu plantilla. Usa ls teclas CTRL + F y busca los de jQuery.

      Eliminar
  100. Hola potro! tengo un problema con este querido carrusel jeje, al principio no corria completamente todas las imagenes, probe ahora con cambiarle lo de setSize a una imagen por vez, pero ni siquiera se mueve http://goo.gl/aa4Gy.
    Desde ya te agradesco si me puedas atudar potro.
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Martin, ¿pero sólo sucede cuando le pones 1, es decir, si vuelves a poner otro valor funciona? Sólo para saber si quizá no modificaste algo más que pudo haberse afectado?

      Eliminar
    2. Si utilizo otro valor como el que viene por defecto (4) corre las imagenes pero no respetando el ancho de cada una y no mostrando todas, que son en total ocho.
      Ahora lo deje en valor 4 para que puedas ver potro que sucede.
      Saludos

      Eliminar
    3. Quizá todo el asunto esté en el ancho de las miniaturas, no se me ocurre qué más pueda ser. Por cierto, tanto el archivo applications.js como el carousel.js tienen el setSize así que tal vez también se tenga que modificar en los dos.

      Eliminar
    4. Potro te cuento que probe y probe y lo unico que logre es que se corra de a una usando 4.5, supongo que no toma el ancho de las imagenes si no, el ancho + espacio en blanco, no se.
      De igual manera solo corre una vez mostrandome 5 de las 8 que agregue, como lo podria solucionar potro?

      Eliminar
    5. Quizá tengas que usar imágenes más pequeñas que esas, o bien, reducir el número de imágenes a mostrar para que ninguna se quede oculta.

      Eliminar
    6. Hola Potro no se si quedo el otro comentario.
      Al final quedo =D Te queria consultar como podria agregarle un enlace a la imagen con el titulo o bueno, si no se puede al texto solo.
      Saludos Potro!

      Eliminar
    7. Hola Martin, ahí en el código verás que dice URL del enlace, ahí debes poner la URL que quieras enlazar.
      Saludos.

      Eliminar
    8. en el caso original si Potro pero recuerda que quedo distino al agregarle el titulo, de esta forma.
      Saludos!

      Eliminar
    9. Pero el enlace en la imagen no varía, sólo tienes que ponerle a la imagen el enlace, por ejemplo:
      <a href="URL del enlace"><img src="URL de la imagen" /></a>

      Eliminar
  101. Buenas Potro.

    Te escribo porque quisiera saber si existe la posibilidad de tener dos carruseles con este mismo código pero con apariencia distinta (por ejemplo el alto y el ancho). Me refiero a que como éstas características ya están configuradas en el código de la plantilla, cuando inserto el carrusel en una entrada ya tiene este ancho y alto específicos y lo que quisiera hacer es poder insertar dos carruseles en la misma entrada pero los dos con diferentes medidas.

    De antemano muchas gracias.

    ResponderEliminar
    Respuestas
    1. No lo sé Victor, no lo he intentado, pero supongo que en caso de poderse hacer tendrías que modificar todo, scripts, estilos, HTML, todo :/

      Eliminar
    2. Ok Muchas Gracias Potro.

      Tendré que buscar otra alternativa.

      Saludos!

      Eliminar
  102. Saludos Potro... Tus ayudas me estan sirviendo de mucho a la hora de aprender... te Felicito. Pero tengo un par de problemas con esto:
    1. Tengo el host en mediafire, no sé si es valido. Podrías aconsejarme uno válido si no es el caso?
    2. La aplicación no me funciona; esto es que veo las imágenes sobre una tabla en blanco sin que existan flechas para q se deslicen.

    Mi Blog es de Blogger.

    Muchas Gracias.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Jesús. Mediafire no te servirá para este tipo de cosas, necesitas un alojamiento que te dé un link directo (no para descargar), por ejemplo Google Sites, o Dropbox.

      En cuanto a lo otro, tendría que ver dónde lo has puesto.
      Saludos.

      Eliminar
  103. Bien, conseguí una cuenta en Dropbox y me fubciona a la perfección... Gracias por el consejo. He probado otras aplicaciones en las cuales semejantes a estas, debo de poner en el código de la plantilla el enlace que tengo alojado en dropbox... y me han funcionado.. pero con Carusell me ha sido imposible. Parece como si la aplicación no funcionara. Todo lo tengo colocado exactamente como tu has aconsejado y he mirado cuidadosamente no comerme parte del código... pero no lo consigo.. ¿Que necesitas saber para llegar a saber la causa?

    ResponderEliminar
  104. ¡¡¡¡ SOLUCIONADO !!!! Y lo pongo aqui por si a alguien le pasa lo mismo... En mi blog habia colocado un SlideShow* en Jquery... Ya me preocupé de revisar como bien pones en el enlace en la manera de tocar el código para que pueda funcionar con Prototype y Scriptculous; pero seguía sin funcionar.. Así que al final probé en colocar en /HEAD antes el código de este carrusel antes que el otro... Y bueno, parece q funciona. :)

    * No he colocado el enlace por respeto a no poner enlaces a ningun blog ni página.

    ResponderEliminar
  105. Hola Potro esta vez me preguntaba si puedo colocar otro carrusel como el que tengo.. pero este iría donde iba a ir el banner que me hiciste! osea abajo de los numero de navegación! quisiera ponerlo con las medidas del contenedor de entradas... como puedo hacer?

    ResponderEliminar
    Respuestas
    1. ¿Este mismo dos veces? Que yo sepa no se puede, puedes intentarlo pero dudo que funcione :/

      Eliminar
  106. Hola Potro,

    Una consulta:

    Después de instalar el carrusel en mi blog, los anuncios de Adsense dejaron de mostrarse (unicamente en la página principal).

    Ojala tengas tiempo de darte una vuelta y checar este asunto. De antemano muchas gracias viejo.

    Blog: Wevoluciona.com

    ResponderEliminar
    Respuestas
    1. Es extraño Valentín, nunca había sabido de un caso igual. No encuentro la relación entre un elemento y otro, pero si te da ese problema lo mejor será quitarlo :/

      Eliminar
  107. Cambia el setSize: 5, que está en el archivo que se indica en la entrada, pero igual busca en los otros archivos, porque si mal no recuerdo en uno de esos dos (o en los dos) también aparece esa indicación.

    ResponderEliminar
  108. Habrá que considerar otro carrusel entonces, no ve dónde más pueda estar el "fallo" :/

    ResponderEliminar
  109. Hola! tengo la duda de si se puede hacer algo por el estilo pero dentro de las entradas.

    ResponderEliminar
    Respuestas
    1. Hola Alejandra, para las entradas te convendría más este:
      http://ciudadblogger.com/2009/05/links-y-banners-en-movimiento.html

      Eliminar
  110. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. No lo veo en tu blog, pero sí veo que tienes jQuery, un script que no es compatible con Scriptaculous:
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Pd. Eliminé tu comentario por el aviso que está al final de la página.

      Eliminar
  111. Hola Potro, como va? Espero que muy bien, pues te dejo este pequeño problemilla para que puedas ayudarme. Estoy haciendo pruebas de este carrousel en un blog de pruebas (obviamente) y quisiera que me ayudaras en un par de cositas:

    * 1º: Me gustaria CENTRAR las flechas en la medida del contenedor que yo tengo. Para que quede mas prolijo el carrousel obviamente :) .

    * 2º: Viste que las imagenes son muy pequeñas (pero ten en cuenta el margen superior, osea la distancia entre el borde del contenedor y el de la imagen), pues me gustaria hacerlas mas grandes PERO respetando la misma distancia de margen que el superior, osea dejarlas CENTRADAS a las imagenes, pero en mayor tamaño. Como dije antes, respetando la distancia al igual que la parte superior, pero en la parte inferior. Que queden centradas digamos, con mayor tamaño.

    * 3º: Y por ultimo jeje perdon por ser molesto (jeje), me gustaria cambiar el color del borde de las imagenes. Me gustaria ponerle un color Violeta.

    Bien pues sin mas palabras, te dejo el blog en donde estoy haciendo las pruebas del carrousel:

    http://viciosacityprueba.blogspot.com.ar/

    ESPERO PUEDAS AYUDARME POTRO! TE AGRADECERIA MUCHISIMO, COMO SIEMPRE!

    ResponderEliminar
    Respuestas
    1. Hola FasteN, las flechas usualmente se ven centradas ya que se acomodan automáticamente al inicio y al final de la miniatura, de hecho en tu blog de pruebas así se ve.

      Lo otro bastaría con que cambies el tamaño de las miniaturas, y si eso causara algún desajuste con los márgenes entonces ya sobre eso habría que ver qué modificar, pero de momento debes cambiar el tamaño donde se indica en el código de la imagen:
      width="65" height="65"
      De cualquier forma en las anotaciones en color verde dice dónde modificar las distancias en caso de que no quede como deseas.

      Las miniaturas como tal no tienen un borde, pero puedes ponérselo añadiendo debajo de #Carousel2 .item .icon img { esto:

      border: 1px solid #FF0000;

      Saludos.

      Eliminar
    2. Potro mira como quedo el carrousel. Asi es como me aparece a mi, mira:

      http://dl.dropbox.com/u/101041548/Ejemplo%20Carrousel.png

      Eliminar
    3. Ves que tiene los errores que te digo?. Las imagenes no se ajustan como yo quiero. Ya hice lo que me dijiste de cambiar la parte de "width="65" height="65", ya les puse width:100 y height:150 y nada... no cambia en nada, sigue igual, al igual que las flechas, siguen sin centrarse. Lo unico que funciono fue el borde :( .

      Eliminar
    4. Eso es por el /* Ancho total de todas las minaturas */ como lo redujiste entonces se "caen" las demás miniaturas porque ya no encuentran espacio. Hazlo más ancho para que se arregle.
      Para las flechas cambia el bottom:0px; por un valor más alto.

      Eliminar
  112. Otra cosita mas!. Cuando hago click en la flecha de la derecha, va deslizandose perfectamente si?. Bien pues... Cuando ya paso las imagenes sigue deslizandose, y esta todo vacio y vuelve de nuevo al principio. Como podria hacer para que el limite sea la ultima imagen, y no todo ese vacio que queda. Osea que se deslize hasta la ultima imagen y cuando presione vuelva de nuevo al principio, sin que este todo ese vacio.

    ResponderEliminar
    Respuestas
    1. Cambia el /* Ancho total de todas las minaturas */ quizá está muy ancho y por eso sigue mostrando como si hubiera contenido.

      Eliminar
  113. Gran potro, espero que estes pasando unas merecidas vacaciones, pero no me queda otra que preguntarte en mi blog http://webmastertenerife.blogspot.com no me aparecen los botones de avance y retroceso además de dejar de funcionar.
    Seguramente cerá por conflicto pero no puedo solucionarlo ya que no se donde incluir el jQuery.noConflict();.

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola FRANCISCO, supongo que ya lo has resuelto porque he entrado y veo el carrusel funcionando sin problemas.

      Saludos!

      Eliminar
    2. ok, potro pero el carrucel no llega a la última foto ¡cual puede ser el problema?

      Eliminar
    3. Quizá modificaste el ancho del carrusel y no alcanza a mostrar el último.

      Eliminar
    4. Amigo potro, he modificado para ajustar el
      #Carousel2 {
      height:180px; /* Alto del contenedor */
      width:980px; /* Ancho del contenedor */
      }
      #Carousel2 .container {
      left: 60px;
      top:12px;
      width:835px; /* Ancho del contenedor de las imágenes */
      height:145px; /* Alto del contenedor de las imágenes */
      }
      #Carousel2 .items { top:0; left:2px;
      width: 7800px; /* Ancho total de todas las minaturas */

      Para ajustarlo al carrucel y diseño de mi blog, pero por mucho que amplie el ancho total de todas las miniaturas no coge el total de ellas, al cambiar el alto del contenedor de las imagenes me sale del margen por ello no lo modifico.

      ¿Que puedo hacer?

      Eliminar
    5. Quizá el problema está cuando cambias el tamaño de las miniaturas. ¿Si lo pones en su tamaño original te da el mismo problema? porque si ahí sí funciona bien me parece que la mejor opción será usarlo con las medidas establecidas, o buscar otro carrusel que se pueda adaptar al tamaño que deseas.

      Eliminar
  114. Potro, soy FasteN, el anterior comentario es seguidamente al mismo tema sobre el carrousel, solo que estaba desde el otro Blog.

    ResponderEliminar
  115. Potro el carrousel quedo perfecto, ahora solo falta arreglar tan solo una cosita. Las Imagenes del carrousel nesecito que queden en Width:100 & Height:150 y no quedan! :\ . Ya busque todas las meneras de ponerlas y no puedo, nose como hacer!. Me podrias ayudar Potro? Porfavor es el unico problemita que tengo...

    ResponderEliminar
    Respuestas
    1. ¿A qué te refieres con que no quedan, no se le aplica esa medida cuando la pones?

      Eliminar
    2. Dentro del Gadget (Javascript), en donde dicen los "Width" y "Height" ya me canse de probar y no funciona... No entiendo porque :\

      Eliminar
    3. Veo que en #Carousel2 .item .icon img tienes un width, a ese le pusiste una medida y luego le añadiste la declaración !important, eso significa que pongas la medida que pongas siempre tomará la que tiene el !important, es por eso que no cambia.
      Si has añadido en otras áreas esa declaración podría afectar de igual manera en los tamaños.

      Eliminar
  116. Claro. En donde dicen Width y Height dentro del GADGET (Javacript) no funciona :\ ... No entiendo porque no funciona

    ResponderEliminar
  117. src='URL del archivo os.js' type='text/javascript'/>
    src='URL del archivo carousel.js' type='text/javascript'/>
    src='URL del archivo application.js'

    esta parte no la entiendo que se supone que va en donde dice URL?

    ResponderEliminar
    Respuestas
    1. La URL del archivo que has subido, recuerda que primero debiste descargar un archivo ZIP, luego descomprimirlo y subir los archivos JS a un alojamiento, ya que los hayas subido debes sacar su URL de cada uno de ellos, esa URL es la que va ahí.

      Eliminar
  118. Hola Potro.

    Siguiendo tus recomendaciones, he decidido intalar este carrusel de imágenes. EL problema inicila es que no puedo descargarlas. Sale este mensaje de error.
    Error (509)
    This account's public links are generating too much traffic and have been temporarily disabled!

    Sabes otra menera de descargarlo.

    Una vez lo consiga creo que lo insertaré en la plantilla (como recomiendas al final de este post), mejor que por ejemplo en un hosting tipo dropbox. Crees que será mejor así?

    Un abrazo.

    ResponderEliminar
  119. Potro, al hilo de mi comentario anterior de enlaces, ¿sabes alguna manera de insertar este tipo de slideshow con botones derecho e izquierdo? Lo he encontrado en este enlace: http://www.callejeandoporelplaneta.com/

    Junto con el scroll de imágenes, este slide con enlaces a mis post de destinos de viajes le puede quedar muy bien al blog. Será una manera muy sencillade navegar por el blog.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Exactamente ese no pues no lo conozco, pero en la sección "Slideshows" puedes encontrar algunos similares.

      Eliminar
  120. Hola Potro, gracias por tu respuesta.

    Me gusta especialmente Orbit: Slider de imágenes con jQuery. He seguido todos los pasos tal y como lo dices, pero hay un problema. Imagino que preferirás que lo comente en el post correspondiente para no desviarnos. Paso allí y te lo comento.

    Gracias.

    ResponderEliminar
  121. porq me aparece esto cuando le dot guardar plantilla Error al analizar XML, línea 815, columna 80: Element type "script" must be followed by either attribute specifications, ">" or "/>". porfavor ayudame potro

    ResponderEliminar
    Respuestas
    1. Parece que al poner la URL del archivo estás eliminando algún caracter.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger