TRUCOS y
TUTORIALES
para tu blog
No, no vendemos
camisetas... aun
Camiseta Ciudad Blogger

Carrusel de imágenes con JQuery y ThickBox

23 de febrero de 2010 | Número de comentarios259 comentarios
Quizá este el es carrusel de imágenes más popular hecho con JQuery, aunque en la mayoría de sus versiones las imágenes del carrusel no se abren, sólo se usan como un muestrario de thumbnails.
Pero eso no significa que no se pueda arreglar, pues se puede añadir una ventana modal con ThickBox para poder visualizar las imágenes.
Puedes ver un ejemplo en este blog de pruebas.

Ponerlo en tu blog no requiere muchos pasos pero sí son varios scripts y hojas de estilos que podrían alentar la carga de la página, es por eso que se recomienda que se alojen todos los archivos en tu propio servidor para evitar problemas.

Primero entramos en Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/jquery.jcarousel.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/thickbox.js' type='text/javascript'/>
<script type='text/javascript'>

jQuery(document).ready(function() {
jQuery(&#39;#mycarousel&#39;).jcarousel();
});

</script>


<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/jquery.jcarousel.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/Tango.css' rel='stylesheet' type='text/css'/>
<link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/thickbox.css' rel='stylesheet' type='text/css'/>


Ahora en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript pegamos este código:
<center><ul id="mycarousel" class="jcarousel-skin-tango">

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

</ul></center>

Cambia la URL de la imagen donde se indica, va dos veces en cada pedazo de código, pues una es la miniatura y otra es la imagen en tamaño grande cuando se abre.

Si quisieras agregar más imágenes sólo pega antes de </ul></center> un pedazo de código como este:
<li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>


Lo que está marcado en verde son los scripts y hojas de estilos que recomiendo que subas a tu hosting.
Descargar archivos

259 comentarios :

  1. Era justo lo que yo estaba buscando, lástima que no se pasan automáticamente... se podrá hacer eso?? pero con el mismo efecto... que se pasen como se pasan en el efecto...

    ResponderEliminar
  2. Que way, esto me servirá para un blog que estoy creando donde pondré puro fotografías, gracias potro.

    Uns saludo!

    ResponderEliminar
  3. Mmm...
    Interesante!
    Pero quiero saber lo mismo que Ascesino96
    ¿Si se puede hacer automáticamente?.

    Saludos.

    ResponderEliminar
  4. Que se recorran solas las fotos como una marquesina no se puede, en sí lo de la ventana modal es un extra que se ha añadido, el carrusel original sólo recorre las miniaturas.

    Saludos a todos.

    ResponderEliminar
  5. potro como es que se llama en lo que pasamos el raton por encima de una imagen por ejemplo
    y aparece un texto
    lo podemos cambiar de color?
    y como se llama?

    ResponderEliminar
  6. Hola.

    Tengo (otro) un problema.
    es sobre la plantilla.

    la voy a cambiar por una como esta, no se si sea la misma(espero que eso no te moleste) se llama Revolution pero tiene un error en el codigo, ¿tu sabes cual es?

    Saludos.

    ResponderEliminar
  7. Blogstrello/Blogio, se llaman tooltips y hay varios métodos para ello.

    El Venado, trata de descargarla en otro lado (que no sea el mismo servidor), si sigue marcando error entonces dime qué error te marca.

    ResponderEliminar
  8. Muy bueno pero nos podrias mostrar como hacer un carrusel de imagenes con descripcion, me refiero a un carrusel con los ultimops post o los mas comentados.

    Saludos.

    ResponderEliminar
  9. Yo vi una entrada que le serviría a Blogstrello, en La trucoteca está :)
    Que mal que no se pueda hacer...mejor me quedo con esto... :) Pero voy a esperar un tiempo, por las dudas lo guardo en marcadores. Y lo que dice Anti-Haker me parece interesante, también tengo la curiosidad...
    Por sierto Potro, por alguna extraña razón, cuando voy a crear un post, me aparece como que se está cargando el escritor, pero no se termina de cargar nunca, esperé como media hora y no pasó nada... Yo uso mozilla, voy a provar si borrando los temporales funciona, pero quería saber si te pasó lo mismo...

    ResponderEliminar
  10. Anti-Haker, eso es un poco más complejo, más adelante haré un post sobre ello.

    Ascesino96, Blogger está dando infinidad de problemas últimamente, borrar las cookies y testear la velocidad de tu Internet no estarían mal, aunque no siempre eso lo arregla.

    ResponderEliminar
  11. No lo arregló, supongo que voy a provar si en Internet Explorer puedo... :)
    Ya veo de que sirve tener dos navegadores ;)
    En fin, gracias por todo, y cuando hagas el post que le dijiste a Anti-Haker, voy a estar ;)
    nos vemos!

    ResponderEliminar
  12. En internet explorer tampoco, voy a provar en el pc de mi hermana haber si funciona... ojalá!!!

    ResponderEliminar
  13. Efectivamente se trata de Blogger, ya me lo han comentado otros usuarios que tienen el mismo problema.
    Por lo pronto y mientras lo solucionan cambia del editor actualizado al editor anterior, con ese no tendrás problemas.

    Saludos.

    ResponderEliminar
  14. Ya se pudo lo de la plantilla.

    Pero como agrego la busqueda personalizada.
    como esta en tu blog.

    ResponderEliminar
  15. Luego de cambiarlo, probé de nuevo en blogger in draft y funcionó :)
    Nos vemos ;)

    ResponderEliminar
  16. Genial, se puede personalizar el tamaño y color de fondo? y cómo lo sitúo debajo del head.

    GRACIAS!

    ResponderEliminar
  17. El Venado, el que uso es este.

    Ascesino96, qué bueno que ya está funcionando.

    dajaroma, sí se puede personalizar, necesitas descargar los archivos y editar el archivo Tango.css ahí puedes cambiar el color de fondo donde dice background, el ancho lo cambias en todas las veces que diga height: 245px; y para ponerlo debajo de la cabecera puedes verlo aquí.

    ResponderEliminar
  18. No me referia a eso, perdon.

    Yo decia como lo abias colocado arriba del menu.
    Se que solo se arrastra pero mi plantilla plantilla no funciona.
    Fijate, justo al lado de el logo de ciudad blogger esta el buscador.
    ¿tiene que ser en la edicion de HTML?

    ResponderEliminar
  19. Muy bueno potro, tenia una consulta para ti espero que me puedas ayudar, hoy le agregue un dominio .org a mi blog y cuando comenzo a funcionar dejaron de funcionar los scripts que tenia en google sites como el de leer más y uno de un contador de visitas, no se si tenga algo que ver pero sucedio apenas le agregue el dominio
    saludos y gracias!

    ResponderEliminar
  20. Espera, parece que ya se soluciono
    gracias igual de todos modos!
    saludos

    ResponderEliminar
  21. El Venado, va debajo de <div class='headerright'>

    fabian, qué bueno que ya lo has solucionado ;)

    ResponderEliminar
  22. http://oloblogger.blogspot.com/2010/02/entradas-que-te-pueden-interesar.html

    :)
    Solo paso para avisar que apareciste alli xD.
    Y para decir que esta linda la galeria.

    ResponderEliminar
  23. Otro probema, o problemas.

    Bueno, lo que pasa es que en mi blog aparece "Categorias" junto a el post.
    quisiera que se alejat¿ra un poco.
    Checalo para que veas.

    y otra cosa, agregue otra sidebar pero esta no tiene el color negro que tienen las demas, trate de modificarla en edicion de HTML pero no funciono.

    ResponderEliminar
  24. grande!

    ya esta puesto! le quedo de lujo y subi los archivos en mi cuenta. Gracias por este recurso.

    http://joel-design.blogspot.com

    ResponderEliminar
  25. PepeX, gracias por el aviso :)

    El Venado, ¿que se aleje de dónde?
    La clase (class) de la sidebar debe ser la misma que el de las otras, o sea, class="sidebar"

    Joel, qué bueno que te ha gustado, ojalá le saques provecho ;)

    ResponderEliminar
  26. Quisiera que sea le:je del post.
    como tedecia, donde dice "Categorias"
    Parece que es partedel post

    Dice:

    Categorias: Adelantos, Miley Cyrus
    Ya abiamos visto el primer corto Express Yourself de Disney Channel...

    Per yo quiero que quede asi:

    Categorias: Adelantos, Miley Cyrus

    Ya abiamos visto el primer corto Express Yourself de Disney Channel...

    saludos

    ResponderEliminar
  27. Busca donde dice:

    .post-body {
    margin: 2 2 .75em;

    Y cambialo por:

    .post-body {
    margin: 30px 2 .75em;

    Saludos.

    ResponderEliminar
  28. Gracias, probaré a ver que pasa, me gusta el carrusel ..

    Saludos, desde Roquetas de Mar, España

    ResponderEliminar
  29. Wow! que buena combinación eso de la ventana modal y el carrusel, queda fantástico!. Ademas de por si, el carrusel es muy estético.

    Un abrazo!!!

    ResponderEliminar
  30. Hola potro! muy buen truco, pero mi pregunta era si se podia poner dentro de los post.

    Saludos!

    ResponderEliminar
  31. Rafa, saludos hasta España!

    brother, es verdad, sin la ventana modal se ve bien pero es poco funcional, un abrazo!

    Escuela del Cambio, sí se puede pero es posible que en algunas plantillas no se ve como debería verse debido a los estilos de cada plantilla.

    ResponderEliminar
  32. hola potro esto sta super...
    am tambien sería rexvr si te hicieras un tuto de como colocar slideshow como hay en las páginas deportivas, aunque tambien lo vi e algunas plantillas de blogger he tratado de colocarlo en mi blog pero no funciona correctamente
    e buscado algun tutorial sobre esto pero no encuentro uno q te lo explique
    ojala lo puedas hacer...
    saludos

    ResponderEliminar
  33. Si pinchas la imagen para verla al tamaño original, en el Mozilla las ves centradas en el monitor igual que en el Chrome pero en el explorer se ve descentrada, solo ves la parte superior de la foto, porque ocurrirá esto?

    ResponderEliminar
  34. carlos, ya está programado ;)

    Rafa, Internet Explorer siempre mostrará distintos problemas según la plantilla y la versión del navegador, es difícil saber con exactitud cuál es el problema y cómo solucionarlo :(

    ResponderEliminar
  35. ESO ESTA BIEN POTRO SOLO KIERO SABER ALGO COMO HACES PARA PONER OTRA BARRA DE MENUS EN LA IZQUIERDA EN TU BLOG

    ResponderEliminar
  36. Hola Ex Manga,

    Supongo que te refieres a agregar otra sidebar. Te dejo un enlace donde se explica cómo hacerlo:
    http://blogandweb.com/blogger/como-agregar-una-sidebar-en-una-plantilla-blogger/

    Saludos.

    ResponderEliminar
  37. Hola amigazo potro se puede usar como una especie de carrucel de post, que te lleve a los post mas importantes?
    Gracias

    ResponderEliminar
  38. En la próxima entrada explicaré cómo hacerlo.
    Saludos!

    ResponderEliminar
  39. hola Potro! nose que pasa pero mejor míralo tú! osea cuando quiero ver las fotos se abren pero nunca las puedo cerrar y no avanzan!

    este es el blog donde aun estoy probando!

    http://extremoseventos.blogspot.com/

    ResponderEliminar
  40. Podría ser porque tienes tres veces el script de JQuery en distintas versiones.
    Revisa tu plantilla y verás que lo has usado para dos trucos más además de este.
    Ahí podría estar el problema.

    Saludos.

    ResponderEliminar
  41. Potro gracias! por el dato! bueno estado revizando pero ahi muchos scripts JQuery que ya han venido supongo en la plantilla, noc que hacer! te envio la plantilla a ver que lo chequees! si se puede arreglar! te enviaré un mensaje!


    Gracias

    ResponderEliminar
  42. Elimina el que tienes repetido, es decir estos:
    http://dl.dropbox.com/u/4288269/Magnolia/jquery.js

    A ver si con eso funciona, sino entonces prueba el truco en otro blog con la misma plantilla pero limpia, sin haberle incluido ningún otro script.

    ResponderEliminar
  43. Potro eres un genio!!!!!! gracias! ya esta arreglado! gracias!!!!!!

    ResponderEliminar
  44. Hola, tengo un problema, pues me han pedido que en vez de hacer click en las flechas, al colocar el mouse sobre ellas empiece a andar el carrusel, dónde cambio esa opción?

    ResponderEliminar
  45. Sorry, otra consulta, lo estuve viendo en los diferentes navegadores y en safari la verdad es que se ve una raya de la primera foto y nada más, a qué se puede deber eso?, saludos.

    ResponderEliminar
  46. Hola Ricardo,

    El script no tiene la opción de que gire de forma automática.
    Respecto a lo otro puede ser que Safari tiene una pequeña incompatibilidad con el script.

    Saludos.

    ResponderEliminar
  47. debo agradecerte por todo lo que has aportado a mi blog, la verdad no entiendo mucho de edicion html, (estudio arq)
    pero vos lo hiciste super facil, si necesital algo en 3D (logo x ej) te lo hago gratis, xq vos me ayudaste mucho a mi

    http://mr3drendering.blogspot.com/

    (no me acuerdo como ponerlo como hipervinculo :P

    saludos

    ResponderEliminar
  48. Muchas gracias por el comentario, un día de estos te tomaré la palabra del diseño ;)

    ResponderEliminar
  49. sin ingun problema :)

    por cierto podrias aclarar en la parte de arriba, que este carrusel esta ideado para imagenes de relacion 1,0

    es decir 1000x1000 px, o 500x500px

    si pones una de 2000x1000 o similiar, se superponen. viste la pagina? q te parecio?

    un saludos otra vez portro y gracias

    ResponderEliminar
  50. Me gustó bastante la cabecera incluso por un momento dudé que fuera un blog de Blogger :P

    ResponderEliminar
  51. Potro habra otra forma de carrusel hacia arriba y abajo de forma vertical?

    ResponderEliminar
  52. Para ponerlo de forma vertical busca el primer código que pegaste y localiza esta parte:

    jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
    });

    Elimínala y en su lugar pon esto:

    jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
    vertical: true,
    scroll: 2
    });
    });

    ResponderEliminar
  53. INTENTE PONER 2 CARRUSELES DE IMAGENES EN MI BLOG Y EL SEGUNDO NO SALE ¿QUE PUEDO HACER?

    ResponderEliminar
  54. Me temo que sólo se puede usar uno en el blog.

    ResponderEliminar
  55. Genial potro
    ya lo inclui en mi blog, pero me pregunto
    hay alguna manera de que pueda alojar el codigo de las imagenes, me refiero al que ba dentro de gadget
    y asi poder aligerar la carga del blog??
    si es que se puede, me podrias explicar como.

    te lo agradeceria mucho

    www.musikeros-free.blogspot.com

    saludos.

    ResponderEliminar
  56. =) interezante post
    pero, no es lo que ocupo =s
    jejejejeje creo que no me explike bien

    lo que quiero saber es como alojar este codigo

    li><a href="URL de la imagen" title...

    en un servidor como el de google code o algun otro
    y colocarlo en el blog,
    ammm si creo q es asi como lo kiero hacer.

    espero y se entienda mi idea =P jejeje
    bueno pues te agradesco mucho tu ayuda potro
    eres increible.
    saludos

    ResponderEliminar
  57. Creo que a lo que te refieres es dónde alojar las imágenes. En Google Code sólo es para desarrolladores, pero podrías subirlas a Google Sites, o bien, directo desde Blogger como si fueras a subir una foto en una entrada.

    Saludos.

    ResponderEliminar
  58. Justo lo que busco pero no la puedo hacer sera pi plantilla? o que estare haciendo mal me podrias ayudar paso a paso puse todas las css debajo del body las habri cada css y las copie despupes el jquery lo puse antes de /head y nada ayudame mi correo faznet@hotmail.com

    ResponderEliminar
  59. Hola Faznet,

    Nada va debajo de body, en la entrada se explica en dónde va cada código.
    En caso de que pongas todo en su lugar y siga sin funcionar entonces podría ser posible que tengas algún otro script que no deje funcionar a estos.

    Saludos.

    ResponderEliminar
  60. GRACIAS POR TODO POTRO EL CARRUSEL ES GENIAL

    PERO UNA PREGUNTA, COMO HAGO PARA QUE EL CARRUSEL OCUPE TODO EL ANCHO DEL BLOG Y QUE SEA DE IMAGENES DE
    155 DE LARGO Y 115 DE ANCHO

    ResponderEliminar
  61. Tendrías que editar el archivo http://sites.google.com/site/ciudadbloggerscripts/archivos/Tango.css ahí se encuentran las medidas y las imágenes de fondo del carrusel.

    ResponderEliminar
  62. Hola buen dia oye este carrusel se puede implementar en una pagina web?? gracias esta muy chido saludoss!!

    ResponderEliminar
  63. Claro, aunque de páginas web comunes no podría orientarte pero sí, sí se puede.

    Saludos.

    ResponderEliminar
  64. Hola otra vz yo como podria colocarlo en mi pagina web??

    ResponderEliminar
  65. Como te dije antes, no puedo orientarte pues la única plataforma que conozco es Blogger.

    ResponderEliminar
  66. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  67. hola tengo un Problema

    Agregue este carrusel y funciono bien
    pero al agregar este al inicio:
    S3Slider: Mostrar contenido destacado "http://ciudadblogger9.blogspot.com/"
    se daño y ahora aparece verticalmente y sin las flechas
    ¿como puedo hacer funcionar los Dos?

    Gracias

    ResponderEliminar
  68. Quizá como ambos usan jQuery provoca problema que se repita el script, así que prueba eliminar esta línea:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

    Debes tenerla dos veces, sólo elimina una y mira si funciona.

    ResponderEliminar
  69. OK Potro muchas gracias..ya funciona bien

    ResponderEliminar
  70. Oye Amigo "Potro" de nuevo a molestarte mira busco la forma de crear una galeria de imagenes como este tipo ya que el blog en el k estoy cuenta con mucha fotografia entonces kisiera crear una por ejemplo: "Autos Viejos" que asi se llame mi entrada y abajo una galeria de imagenes... me podrias ayudar o decir cual es la mejor para este caso.. Muchas gracias de antemano... desde Mexico un Saludo.

    ResponderEliminar
  71. Pues podrías usar Shadowbox, de ese modo escribes tu entrada normal y debajo pones las miniaturas de las imágenes que se abrirán en la galería.

    Saludos desde el norte de México.

    ResponderEliminar
  72. Potro realmente eres un genio del blogger.
    Potro, como poner un texto debajo de cada imagen.

    ResponderEliminar
  73. La verdad nunca lo he intentado, no sé si loes estilos del gadget lo permitan pero puedes probar a ver qué tal queda.
    Sólo agrega debajo de cada parte como esta:
    <li><a href="URL de la imagen" title="Título de la imagen" class="thickbox"><img src="URL de la imagen" width="75" height="75" /></a></li>

    El texto que deseas, de esta forma:
    <span>texto</span>

    Espero que con eso baste.

    Saludos.

    ResponderEliminar
  74. Gracias por la respuesta rapida Potro.
    Y como seria para alejar mas el sidebar superior de,+
    el sidebar y las entradas que estan debajo, es que esta muy juntos.

    ResponderEliminar
  75. tengo un inconveniente espero que me pueda colaborar, es en carousel y Thickbox, que se desplega las imagenes, pero realmente el problema es realizar el siguente o atras, ya sea desde el teclado o el link next, por favor colaborarme... muchas gracias

    ResponderEliminar
  76. Carrusel de imágenes con JQuery y ThickBox

    ResponderEliminar
  77. Sí, en cuál blog lo has puesto para poder ver el problema.

    ResponderEliminar
  78. en proyectos de de www.alexisvegaingenieros.com... pero lo que quiero es que las imagenes se puedan visualizar dandole siguiente desde el teclado o un link y no desplegar uno por uno porq son muchas imagenes, gracias por su colaboracion

    ResponderEliminar
  79. Hola ADRIANA,

    Estuve verificando la configuración del script para ver si existía la posibilidad de implementar el uso del teclado pero no fue posible. Preguntando un poco me dijeron que usualmente esta opción del uso del teclado sólo es posible con elementos hechos en Flash, por lo que difícilmente podrá hacerse con un script común.

    Saludos.

    ResponderEliminar
  80. Potro se podra colocar una de estas galerias en una entrada?

    ResponderEliminar
  81. Usualmente no quedan muy bien en las entradas, todo depende de la plantilla, así que no pierdes nada con probar y ver si tu plantilla lo acepta dentro de una entrada o no.

    ResponderEliminar
  82. vaya si que esta bacano, se puede reemplazar la url de la imagen grande para colocar un video en vez de una imagen? :D

    ResponderEliminar
  83. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  84. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  85. vi esto y me parecio muy bueno pero no lo entiendo ya que esta en ingles http://www.ndoherty.biz/demos/coda-slider/2.0/#1

    ResponderEliminar
  86. Si Thickbox soportara videos si podria hacerse pero no es el caso :(
    Esta interesante ese plugin que mencionas, a ver si ahora que tenga computadora y tiempo le echo un vistazo para ver si se puede echar a andar en Blogger.

    ResponderEliminar
  87. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  88. ya hize lo del carrusel de videos, combinando dos tecnicas aplicadas de ciudad blogger, una fue la del shadowbox y otra la del carrusel, ahora lo que hize fue reemplazar el codigo del shadowbox por todo lo que esta dentro de "li" aca el codigo del shadowbox "/li"

    ResponderEliminar
  89. mira lo aplique en este blog que e creado

    http://arobig.blogspot.com/

    ResponderEliminar
  90. No pude ver el blog que mencionas, parece que ya lo has eliminado, pero seguro te ha quedado estupendo :)

    ResponderEliminar
  91. sorry le cambie el nombre este es el blog, http://arovideos.blogspot.com

    ResponderEliminar
  92. Hola Potro! Tengo un problema
    Lo quise poner en mi blog para poner las últimas peliculas pero no me aparecen las flechas para correr.
    El blog es www.solodvdrip.net
    Saludos
    Espero respuesta.

    ResponderEliminar
  93. Lo que sucede es que los archivos, tanto los scripts como las hojas de estilos (Las URLs que están en color verde) están alojadas en Google Sites, y cuando se usa un dominio propio los archivos alojasdos en Google Sites dejan de funcionar, por lo que necesitas descargar el pack de los archivos, alojarlos en otro servidor y cambiar las URLs de dichos archivos para que pueda funcionar.

    Saludos.

    ResponderEliminar
  94. Dropbox es una buena opción pues acepta cualquier tipo de archivo, y es gratuito.

    ResponderEliminar
  95. Puede ser porque dentro del mismo blog usas 3 versiones diferentes de jQuery, tienes estas tres:

    http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
    http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js
    http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js

    En la mayoría de los casos basta con dejar sólo una versión pero tendrías que considerar que es posible que alguno de los trucos que aplicaste que requerían ese script quizá no sean compatibles con las demás versiones.

    ResponderEliminar
  96. Hola potro Quisiera hacerte un par de preguntar. La primera, quisiera saber como agrandar las imgenes para cubrir todo el recuadro del carrusel, y que porsupuesto se agrande el recuadro para que sea mucho mas visible...
    Segundo, quisiera cambiar el fondo, cambiarlo a color negro, porque el fndo de mi blog es negro y bueno, convinaria.
    Y tercero y ultimo cambiar las flechas, por otras un poco mas de mi estilo del blog.

    Solo eso ! :D

    ResponderEliminar
  97. Y por ultimito quisiera saber como hacer que entren mas imagenes, para asi cubrir todo el ancho del blog, para que queden como tiras de pelicula, para que vallan pasando varias fotos a medida que presionas las flecha, pero que cubra todo el ancho del blog. Eso nada mas es lo ultimo que queria preguntar!. Espero tu respuesta muy atentamente, se que me vas a poder ayudar, y aunque no lo hagas igual te lo agradezco,porque siempre estas para ayudarnos en todo lo que puedes.

    ResponderEliminar
  98. Para cambiar el tamaño cambia en el código de la imagen donde dice width y height, pero de igual forma tendrías que editar este archivo:
    http://sites.google.com/site/ciudadbloggerscripts/archivos/jquery.jcarousel.css

    Ahí también debes editar el ancho y alto de esta área:
    .jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px; height: 75px;
    }

    De igual forma tienes que editar este archivo:
    http://sites.google.com/site/ciudadbloggerscripts/archivos/Tango.css

    Ahí debes modificar todo esto:
    .jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 245px;
    padding: 20px 40px;
    }

    .jcarousel-skin-tango .jcarousel-clip-horizontal {
    width: 245px;
    height: 75px;
    }


    .jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
    }

    Los width: 245px; son el ancho del gadget, si quieres que cubra el ancho cambialo por un ancho más grande.
    Y los width: 75px; y height: 75px; que encuentres son nuevamente el tamaño de tus imágenes.

    Para el color de fondo edita esta parte de ese mismo archivo:
    .jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background:#FDFEE9;
    border: 1px solid #346F97;
    }

    El background:#FDFEE9; es el color de fondo.

    También en ese archivo encontrarás unas URLs, esas son las URLs de las flechas que puedes cambiar por las que gustes.

    Saludos.

    ResponderEliminar
  99. Muy bien! Aver vamos a ver como lo solucionamos ...

    Muchisimas gracias potro!

    ResponderEliminar
  100. Oye Potro, porque cuando agrego widgets debajo de la cabezera del blog salen como una flanja desbaneciendose de color blanca?, osea sale el widget que yo puse, pero sale como si fuera una franja blanca, que se desvanece. Queda bastante feo.. :\

    ResponderEliminar
  101. Debe ser algún estilo de la plantilla que usas, no sabría decirte con exactitud qué es pues de esas plantillas poco sé.

    ResponderEliminar
  102. Potro, intento poner en otro lugar el widget,pero sale verticalmente, y salen pequeños circulos al lado de los recuadros. No entiendo porque :\

    ResponderEliminar
  103. Si es en otro gadget pero en la sidebar entonces no encontrará el ancho y por eso se distorsiona.
    Si no te gusta debajo de la cabecera puedes probar ponerlo justo arriba de las entradas. Sólo arrastra el gadget hasta ahí.

    ResponderEliminar
  104. Por esa razon, cuando intento ponerlo arriba de las entradas, sale esa franja blanca que te mencione en la respuesta numero 112. Sobre la franja blanca. Bueno ya vere como lo soluciono. GRACIAS POTRO DE TODOS MODOS!

    ResponderEliminar
  105. y que hosting usaste para subir el archivo Tango.css??
    cual usaste tu ??

    ResponderEliminar
  106. Hola Potro,

    De nuevo Giancarlo por aqui, hermano existe la posibilidad de que haciendo click sobre la imagen las persona vaya directo a la entrada donde esta cada chica (hablando de mi blog, con el que hemos vendo trabajando). Y otra cosa, si yo alojo las imagenes de las chicas en otro blog o en otro lugar que no sea mi blog, eso aumentaria la velocidad de carga del blog???

    Gracias hermano!

    ResponderEliminar
  107. Hola Giancarlo,

    Sí es posible que la imagen enlace a una entrada, pero habría que quitar el efecto Thickbox.
    Para ello elimina esta línea del primer código:
    <script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/thickbox.js' type='text/javascript'/>

    Así como esta línea:
    <link href='http://sites.google.com/site/ciudadbloggerscripts/archivos/thickbox.css' rel='stylesheet' type='text/css'/>

    Y luego el código para cada imagen iría así:
    <li><a href="URL de la entrada"><img src="URL de la imagen" width="75" height="75" /></a></li>

    Respecto a lo que mencionas, no. Sin importar si las imágenes están alojadas en otro blog de cualquier manera la página las tiene que leer esas imágenes para cargarlas así que sigue usando el tiempo que necesita para leer y cargar las imágenes.

    ResponderEliminar
  108. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  109. Mira potro estaria bien que explicaras como implementar este slide en blogger, lo bueno que es multimedia.Asi te serviria para hacer una entrada y de paso yo lo usaria en mi blog :)

    http://www.openstudio.fr/jQuery-Multimedia-Portfolio-2.html?lang=en

    ResponderEliminar
  110. Alguna vez probé con uno muy parecido pero que era estilo Mac y no funcionó. Deja probar este que dices y si funciona bien con gusto lo publico en cuanto saque las entradas pendientes.

    Saludos.

    ResponderEliminar
  111. hOLA PORTRO ESTA MUY BUENO TODO... PERO COMO HAGO PARA CAMBIAR EL FONDO BLANDO DEL CARRUSEL A COLOR NEGRO.
    EXCELENTE TUTORIAL ESPERO RESPUESTA GUSTO EN VISTARTE!!

    ResponderEliminar
  112. Hola ,

    Agrega antes de ]]></b:skin> esto:
    .jcarousel-skin-tango .jcarousel-container {
    background:#000 !important;
    }

    Con eso deberá funcionar.
    Saludos y gracias por tu visita!

    ResponderEliminar
  113. Potro una preguntilla!... No habra un carrousel que no sea con Jquery?, ya que en mi blog no se pueden poner estos lujos, y talvez a otro Bloggero lo nesecite. Quisiera para que quede mas completito digamos con el carrousel debajo de la cabecera quedaria genial por eso.

    ResponderEliminar
  114. Por ahora no conozco uno que funcione con Scriptaculous, pero prueba esto:
    Usa este carrusel y arma todos los pasos que se indican pero antes de:
    jQuery(document).ready(function() {

    Agrega esto:
    jQuery.noConflict();

    Fíjate si con eso funciona el carrusel y sigue funcionando los trucos que tengas con Scriptaculous.

    ResponderEliminar
  115. Buenisimo Potro !!!!!!!!!!!!!!! ... Funciona ! Sos un genio ! Funciona todooooo ! Solo que ... ahora me falta editarlo como tu me dijiste, editar los codigos y eso... pero FUNCIONA ! jajaja. De verdad nose como agradecertelo, ah ya se una forma muy pequeña pero lo hare! Te patrocinare en mi BLOG !. Por cierto, te estoy siguiendo en la web y me hice Fan en el Facebook de CiudadBlogger ! :)

    ResponderEliminar
  116. Qué bueno que funcionó todo bien :)
    Esta semana publicaré una entrada que habla justamente de cómo hacer para poder usar tanto jQuery como Scriptaculous al mismo tiempo para que así puedas usar algún otro truco que tenga jQuery.

    ResponderEliminar
  117. Potro, tengo un pequeño problemilla jaja :) ... Configure los codigos, le puse el fondo tal y cual queria, pero ... Al poner Guardar Cambios, el carrusel aparecer muy del lado derecho, SIN las flechas (puse las URL en los 4 casos que pide -Derecha,Izquierda,Arriba y Abajo. Probe poniendo solo Derecha e Izquierda pero nada, entonces opte por poner en las 4 direccion que estan puestas las URL de las flechas en los codigos y tampoco funciono.) y entre las imagenes del recuadro sale un fondo blanco que las divide. Puedes ayudarme potro? Se que lo vas a poder solucionar! por cierto, ya hice tu Banner en mi BLOG! Miralo despues :).

    ResponderEliminar
  118. Estare esperando esa entrada muy anciosamente! GRACIAS POTRO !

    ResponderEliminar
  119. Pues supongo que ya lo habrás arreglado porque veo el carrusel sin fondos blancos, lo veo centrado y con las flechas a los lados.
    Gracias por el enlace aunque no he podido ver el banner, parece que la URL de la imagen está mal.

    Saludos!

    ResponderEliminar
  120. Ya lo solucione, queria decirte eso y que simplemente nesecito saber como hacerlo mas hacia la izquierda. Para que al alargarlo (se va hacia la derecha) no quede tan del lado derecho , osea que.. Desde izquierda se extienda a derecha correctamente. Por cierto, el banner ya lo arreglo haber si lo puedes ver.

    ResponderEliminar
  121. Me di cuenta que no cumple una de las 2 funciones que queria, era de que al hacerle click a la imagen se abra un enlace con la direccion que yo le ponga. Eso tambien si me podrias ayudar Potro porfavor .

    ResponderEliminar
  122. Pues lo sigo viendo centrado pero si más adelante quisieras recorrerlo a la izquierda agrega antes de ]]></b:skin> esto:
    #HTML19 {margin-left:-50px;}

    El banner sigo sin verlo porque al parecer no está dentro de la carpeta Public, recuerda que todo lo que se suba a Dropbox debe estar en la carpeta Public para que pueda ser visto por todos.

    Y por lo del enlace mira el comentario #120

    Saludos.

    ResponderEliminar
  123. Exelentisimo Potro! Muchas Gracias por fin logre lo que tanto queria! GRACIAS GRACIAS GRACIAS , no me voy a cansar de decirtelo GRACIAS! :) ... y ya lo puse en Public.. aver si ahora lo puedes ver?

    ResponderEliminar
  124. Oye, el Potro, no se puede poner abajo de la cabecera?
    Lo malo es que yo tengo una plantilla no de bloggger, sino otra, es Nerds downn, y no se pueden poner gadgets en Elementos de la página

    En fin, que quede debajo de la cabecera...

    ResponderEliminar
  125. Teniendo ya listo mi carrusel gracias a ti potro quisiera preguntarte algo. Como haria para que las flechas queden en centradas y no muy arriba del lado del carrusel?. Y para poder subirlo un poco mas al carrusel, osea ... Eso ya seria el Menu de Paginas estaticas que esta arriba, o el Gadget que ponga siempre deja un gran espacio alli, como haria para poner uno debajo del otro?, asi como en los demas Gadgets que puse para que no deje tanto espacio negro. Espero tu respuesta de las tantas que me diste... ya nose si preguntarte me da miedo que me digas ¡YA BASTA! jaja.

    ResponderEliminar
  126. y una pequeñita mas, como hacer que esten las imagenes un poco mas juntas, que se note un poquitin nada mas el espacio negro (el cual le voy a poner otro color de fondo) nada mas ... (Me fui rapido antes de que me pegues)

    ResponderEliminar
  127. YO-LESS, mira esta entrada que explica cómo poner gadgets debajo de la cabecera.

    ResponderEliminar
  128. - [F]asteN [M]ovieS - ,

    Busca esta parte en el archivo Tango.css:
    .jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;

    Ese 43px cambialo por otro valor más alto, por ejemplo 85px
    Haz lo mismo para esta parte:
    .jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;

    Con eso bajarán las flechas.
    Para subir el gadget es del mismo modo que te expliqué en el comentario #135, sólo hay que agregar un margen superior:
    margin-top: -40px;

    Y para reducir el espacio entre las imágenes cambia el ancho de ellas, esto se hace en esta área:
    .jcarousel-skin-tango .jcarousel-item {
    width: 150px;

    Saludos y gracias por el banner, quedó muy bueno.

    ResponderEliminar
  129. Potro te re pasas MUCHAS GRACIAS DE TODO CORAZON. Esta totalmente completo, bueno .. no totalmente ya que siempre vamos a querer poner algo mas en nuestro blog, siempre queremos rediseñar algo... pero, es lo que queria desde hace mucho tiempo y gracias ati lo logre! Te agradezco potro, el banner es algo muy simple comparado a lo que te debo pero bueno, nose como agradecertelo. En fin, MUCHISIMAS GRACIAS POTRO y esperare mas entradas tuyas que son de lo MEJOR!.

    Si quieres fijate como quedo el Blog :)

    http://fastenmovies.blogspot.com

    ResponderEliminar
  130. Me alegro que tu blog ya esté tomando la forma que querías :)

    ResponderEliminar
  131. Gracias Potro! todo es grasias a ti.

    Ahora una pequeña preguntita, ya que la estoy diseñando a mas no poder al blog jeje :D ... quisiera saber como achicar el recuadro que cubre al carrousel, es un poco grandesito, y quisiera ajustarlo un poco mas, para que no quede tan espaciado todo, porque al ponerle un color de fondo, queda muy vacio, y bueno.. quisiera ajustarlo un poco mas a las imagenes.

    Y quisiera saber, si al pasar el cursor por una imagen, se puedan ver los nombres (de la imagen a la que se señala).

    Eso es lo que te pido Potro! :D
    ESPERO ME AYUDAS, GRACIAS !

    ResponderEliminar
  132. Otra cosita mas Potro...

    Quisiera que la imagen de las flecha que puse yo, (las cambie por las que venian en el codigo, puse otras) quisiera que no desaparescan cada vez que mantengo el mouse alli, osea en la flecha. Cada vez que señalo con el mouse sin hacerle click (y haciendo click tambien) desaparecen, cuando saco el mouse recien vuelven a verse las flechas. Y quisiera que quedaran un poco alejadas de las imagenes, por ejemplo: ENTRE EL CARROUSEL Y EL FONDO DEL BLOG. Justo en la linea del centro. O sino un poco mas alejado de las imagenes ( UNA VEZ QUE HALLA PODIDO ACHICAR EL ESPACIO QUE TE HABIA PREGUNTADO EN EL COMENTARIO ANTERIOR.)

    Espero que me puedas ayudar en esta Potro!.. un saludo, y MUCHISIMAS GRACIAS POR TODO!

    ResponderEliminar
  133. Ese recuadro ya es parte de la plantilla no del carrusel por lo que no se puede cambiar a menos que debajo de #HTML19 { pruebes ponerle las medidas que quieres, por ejemplo:
    width: 600px;
    height:200px;

    Dentro del código de la imagen agrega el atributo title, ese deberá hacer que se muestre el texto que dices:
    title="nombre de la imagen"

    Para que las flechas no desaparezcan hazlas justo de la medida que son las originales. Procura que ambas midan exactamente lo mismo para que no suceda eso. Si las alejas como dices vas a tener igual el problema que desaparecen, es mejor dejarlas a esa distancia.

    Saludos.

    ResponderEliminar
  134. Muchisimas Gracias Potro, ya pude lograrlo. Hize exactamente como me lo dijiste y me salio. Nada mas que no cambie las flechas, les cambie el color y las deje como estaban, y funcionan a la perfeccion. Gracias nuevamente Potro!

    ResponderEliminar
  135. Hola. Me gustaría saber si puedo usar el código que entregas para ponerlo en mi blog. Cuando lo publique en mi web pongo los agradecimientos a Ciudad Blogger. Bueno. Adiós.

    ResponderEliminar
  136. Hola Potro, en que parte de los archivos descargados tengo que editar para cambiar el color amarillo o crema por blanco y hacerlo más largo para que ocupe el tamaño adecuado para colocarlo debajo de la cabecera y menú.

    ResponderEliminar
  137. Potro tengo una pregunta.. en el carrousel que tengo yo.. como hago para que al achicar el carrousel, no se corten las imagenes por debajo... osea, las imagenes en vez de mostrarse completas, tienen como partes transparentes debajo que no dejan verse completas. Y para subirlas o bajarlas, segun como este el carrousel de tamaño. Si es mas chico, subir mas arriba las imagenes, y vicerversa. Y para subir o bajar las flechas.

    ResponderEliminar
  138. Osea me refiero a que el recuadro quede Justo a las imagenes, y no quede toda esa franja vacia de fondo. Que el contorno quede a la medida de las imagenes. Por ejemplo. Quiero mostrar mis imagenes 100 de Ancho y 150 de alto, pero al mostrarse asi, las imagenes salen muy separadas y el contorno del carrousel es demasiado separado. Quiero que quede justo a la medida. Y porsupuesto subir las flechas para que queden en la mitad del carrousel para quedar centradas.

    ResponderEliminar
  139. Intente achicar el recuadro y si pude pero no recuerdo como lo hice.. hice cambios en todo, pero no se exactamente como lo hice...

    ResponderEliminar
  140. En el comentario #110 te explicaba cómo agrandarlo, si ahora lo quieres hacer más chico sigue las mismas indicaciones sólo cambia las medidas que ahora quieres. Por ahí en otro comentario me parece que también ya te había explicado sobre la separación entre las imágenes.

    ResponderEliminar
  141. Pero se ve una franja transparente arriba y abajo que no deja mostrar toda la imagen, al hacer chico el carrusel. Y ahora nose porque cada vez que entro al blog, el carrusel no aparece, en vez de eso aparecen fotos seguidas, todas seguidas sin un marco, y se cortan hasta llegar a la barra en donde movemos la pagina. Nose porque aparece ese error :\ .

    ResponderEliminar
  142. Pues es que ya has agregado más scripts y alguno de ellos debió ser incompatible con el del carrusel y por eso ya no te funciona :/

    ResponderEliminar
  143. Intente entrar a dropbox poner de nuevo el codigo de tango.css y se compone de nuevo el carrusel, pero cuando apago la pc,o reinicio vuelve a salir ese error :\ ... por cierto, lo de los espacios como lo haria para solucionar?

    ResponderEliminar
  144. Me hacia similar a cuando entraba antes y no se ponian los scripts porque no estaban en la carpeta de Public, pero SI ESTAN. Solo que ahora debo entrar a dropbox para que funcionen :\ .. pero si estan dentro de PUBLIC.

    ResponderEliminar
  145. Lo que pasa es esto, que si lo estás haciendo desde la página de Dropbox entonces tienes que seleccionar Copy public link y no el que dice Download file, al parecer estás seleccionando este último y es por eso que la URL no funciona y por lo tanto tampoco el carrusel.

    ResponderEliminar
  146. Ahi estaaaaaaaaaaaa... FUNCIONO BIEN POTROOOOOO .. pero lo unico que me queda por solucionar potro, es el espacio ese que te digo.. que es como transparente osea, no es fondo.. simplemente es algo que AL ACHICAR EL CARRUSEL, la imagen se corta.. no deja que se vea por completo. Yo quiero que mis imagenes dentro del carrusel sea.. de 100 de ancho por 150 de alto. Y que el carrusel sea justo, osea ... que este justo en las imagenes, justo al borde. Pero al ponerlas asi, las imagenes quedan en el mismo lugar, NO SE ACOMODAN HACIA ARRIBA... y aparece esa franja transparente que corta la imagen.

    ESE ES EL PROBLEMA

    ResponderEliminar
  147. Pues si eliminas el padding que está dentro de .jcarousel-skin-tango .jcarousel-container-horizontal { debe eliminarse los espacios alrededor.

    ResponderEliminar
  148. Exelente Potro, ahora solo me faltaria.. que la imagen de las peliculas , que se encuentran dentro del carrusel queden un poco mas arriba. YA DESAPARECIO LA FRANJA TRANSPARENTE DE ABAJO. Me supongo que al desaparecer esa, desaparecio la de arriba, por lo tanto me faltaria ajustar la imagen mas arriba para que queden bien centradas las imagenes, como lo haria a eso Potro?.

    POR CIERTO, ESTA SALIENDO EXACTAMENTE JUSTO COMO LO QUERIA. EXACTAMENTE JUSTO. Solo me falta centrar las imagenes :D

    ResponderEliminar
  149. Eso ya parece ser por los estilos de tu plantilla, quizá eliminan el padding dentro de .tabs-inner .widget li a { lo arregle.

    ResponderEliminar
  150. Potro ya funciono... MIRA COMO QUEDO EL CARRUSEL DE MI BLOG :D ...

    www.FastenMovies.Blogspot.com

    ResponderEliminar
  151. Potro saludos, tengo este problema puedo ver las imagenes de mi blog en mi computadora con el navegador GOOGLE CHROME, PERO NO LA PUEDEN VER OTROS.. Aparece solo el titulo de la foto pero no la foto..

    ResponderEliminar
  152. Hola JUAN,

    He entrado a tu blog y he visto perfectamente el carrusel junto con las imágenes, supongo que ya has resuelto el problema.

    Saludos.

    ResponderEliminar
  153. Excelente, me funciono de maravilla. Gracias.

    ResponderEliminar
  154. Hola Potro!
    En mi blog de pruebas me funciona todo correcto pero en el blog que yo quiero no funciona el estilo. En ambos blogs tengo las mismas cosas de jquery asi que dudo que sean incompatibles unos con otros. También probé lo de poner no conflict y tampoco funciona. Probé poner el estilo tanto arriba de head como de /** Page structure tweaks for layout editor wireframe */ pero nada... no se que más probar...
    Saludos!

    ResponderEliminar
  155. Hola Paco,

    Prueba quitando esta línea pues la tienes dos veces:
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

    Además pon arriba de esto:
    jQuery(document).ready(function() {

    La declaración:
    jQuery.noConflict();

    ResponderEliminar
  156. Potro funcionó!!!! gracias como siempre por resolverme todo tan rápido, que haría sin ti!!!
    Un abrazo!

    ResponderEliminar
  157. Perdona Potro un pequeño asunto más, al ponerlo, arriba justo tengo el menú. Al abrirlo la columna se queda detrás y no se ve. Por si no se entiende entra en mi pagina http://www.todopornadaonline.com/ y donde pone peliculas por genero se abre un menu. Que puedo hacer para que el menu se sobreponga?? Gracias!!!

    ResponderEliminar
  158. Edita el archivo CSS del menú, y debajo de esto:
    .jqueryslidemenu ul li ul li {

    Agrega esto:
    z-index:100;

    ResponderEliminar
  159. Eres un artista!!! no te puedes imaginar todo lo que aprendo gracias a ti! Una cosa, sabes si en este carrusel la primera foto la puedes dejar fija, es decir, que cuando le des a la flecha y las fotos vayan pasando la primera siempre aparezca. No me corre prisa, gracias por toda tu atención!

    ResponderEliminar
  160. Bueno no pasa nada! muchas gracias!!!
    Saludos

    ResponderEliminar
  161. hola maestrisimo, de antemano te agradezco todos los muy buenos datos y enseñanzas que entregas, muchas gracias por ayudarnos a los que no manejamos tanto todas estas herramientas. mira trate de insertar el carrusel como tu lo explicas, pero me ocurre algo extraño. tengo 2 blogs en uno me resulta bien y en el otro no. el primero (es mi blog de prueba para insertar despues en mi pagina oficial) es viajeconciertos1.blogspot.com ahi inserte el menu y ningun problema, mientras que en el otro (mi pagina oficial) www.viajeconciertos.com cuando lo inserto repitiendo los mismos pasos anteriores, solo quedan las imagenes desplegadas y nada. si me pudieras ayudar te lo agradeceria bastante.

    saludos

    ResponderEliminar
  162. Maestro, solucione el problema, ya lo habias explicado, el asunto del hosting... muchisimas gracias.. saludos desde chile

    ResponderEliminar
  163. Qué gusto que ya lo hayas solucionado y muchas gracias por tu amable comentario.
    ¡Buen fin de semana!

    ResponderEliminar
  164. maestro, tengo otro problema con el carrusel a ver si me puedes ayudar. mira en www.viajeconciertos.com inserte el carrusel y funciona pero en vez de mostrar las 3 imagenes solo muestra 2 y la tercera se pierde, luego al pasar las fotos aparece la imagen 4 y 5 y la 6 se pierde y asi sucesivamente. para solucionarlo momentaneamente tuve que insertar cada 2 imagenes y la tercera dejarla en blanco luego la 6 tambien en blanco y asi. igual funciona pero no es lo ideal ni lo optimo si me pudieras ayudar te lo agradeceria bastante.

    saludos

    ResponderEliminar
  165. Hola Viaje Conciertos,

    Es por los estilos de tu plantilla. Para arreglarlo edita el archivo Tango.css, ahí busca esta parte:
    .jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
    }

    Cambia ese width: 45px; por width:38px;

    Eso deberá hacer que las imágenes no tengan tanta separación y se muestren tres imágenes por cada display.
    Saludos.

    ResponderEliminar
  166. Potro, problemas solucionado..muchas gracias por tu ayuda y la molestia..

    saludos

    ResponderEliminar
  167. Un saludo amigo, coloco los codigos en una pag html normal solo codigo y no funciona, por ninguna forma... Podrias ayudarme. Gracias.

    ResponderEliminar
  168. amigo te adjunto el enlace a ver si le puedes hechar un ojo, al codigo.
    http://www.entusruedas.com/eddy.html

    ResponderEliminar
  169. Hola Frank, nunca lo he probado en una página Web, pero podría ser por la falta del DOCTYPE o por el alojamiento de los archivos, prueba agregando un DOCTYPE y subiendo los archivos a otro sitio que no sea Google Sites.

    ResponderEliminar
  170. Hola potro este carrusel como hago para ponerle como hiso - [F]asteN [M]ovieS - en su blog ponerle una imagenes separadores del carrusel ?

    su blog

    http://www.fastenmovies.blogspot.com

    Mi blog xD

    http://pelislatin0.blogspot.com

    ResponderEliminar
  171. Es una imagen de fondo del contenedor. Se la puso en esta parte del archivo CSS:
    .jcarousel-skin-tango .jcarousel-container {

    Ahí debajo hay un background, ahí agregó la imagen que contiene los separadores:
    background: url(URL de la imagen);

    No creas que es un separador que se repite, es una imagen larga que contiene todos los separadores.

    ResponderEliminar
  172. hola potro, me descargue una platilla tuya y acabo de poner el carrusel, tengo un problema y es que no se ven las fotos. (si pinchas en cada una de ellas sí ) pero en el carrusel no ¿cómo puedo arreglarlo? http://arteecca.blogspot.com/

    ResponderEliminar
  173. Hola, ¿en qué parte del blog lo has puesto porque no lo encontré en esa dirección?

    ResponderEliminar
  174. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  175. Potro Potro, podrias hacer una entrada con este carrusel porfavor, mira...

    http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

    Ese era el carrusel que te decia yo, que se deslizaba nuevamente al principio una vez que llegaba al final de las fotos, que te pedi aquella vez anterior. Aver si puedes armar una entrada explicandonos como aplicar ese carrusel porfavor Potro, Gracias de antemano, espero la puedas publicar :D... SERIA GENIAL.

    ResponderEliminar
  176. Claro, deja lo pruebo esta semana que viene y armo la entrada ;)

    ResponderEliminar
  177. Como le puedo hacer para que al dar clic en la imagen me mande a una entrada?

    ResponderEliminar
  178. En lugar de poner la primera URL de la imagen pon la URL de la entrada a la que quieres que enlace.

    ResponderEliminar
  179. Hola "EL POTRO" quizas puedas ayudarme, sabes como agregar albunes de fotos en un blog sin saber html o ccs??
    http://swargento.blogspot.com/
    si ves el blog , me gustaria poder agregar albunes de fotos a la derecha e izquierda de la columna central, de arriba para abajo, albunes con nombre y una caratula visible, luego al entrar fotos con destaque y texto!
    espero puedas ayudarme, desde ya gracias!!
    saludos

    ResponderEliminar
  180. Sin saber de HTML o CSS es imposible, se necesita un poco de conocimiento de esos temas para poder hacerlo.
    La forma "simple" de hacerlo es que crees una página independiente o entrada por cada álbum, en ella pones las fotos que contiene dicho álbum. Luego en la sidebar u otra parte del blog pones la imagen de la portada con el enlace a ese álbum. Eso lo harías por cada álbum que quieras poner en el blog.

    Saludos.

    ResponderEliminar
  181. Potro muy bueno , pero te quería hacer una pregunta , si a la imágenes le podes poner un enlace para que valla a otra pagina

    Desde ya gracias

    ResponderEliminar
  182. Claro Admin, sólo cambia la primera URL de la imagen por la URL del enlace que quieres y elimina el class="thickbox" que aparece. Esto lo harías para cada "pedazo" de código. Saludos.

    ResponderEliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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.

 
Ir Arriba Ir Abajo
¿Te gusta Ciudad Blogger?