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('#mycarousel').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
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
71 comentarios:
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...
Que way, esto me servirá para un blog que estoy creando donde pondré puro fotografías, gracias potro.
Uns saludo!
Ufff Gracias MEN!
MUY COOL EL TRUCOTE!
Mmm...
Interesante!
Pero quiero saber lo mismo que Ascesino96
¿Si se puede hacer automáticamente?.
Saludos.
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.
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?
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.
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.
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.
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...
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.
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!
En internet explorer tampoco, voy a provar en el pc de mi hermana haber si funciona... ojalá!!!
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.
Ya se pudo lo de la plantilla.
Pero como agrego la busqueda personalizada.
como esta en tu blog.
Luego de cambiarlo, probé de nuevo en blogger in draft y funcionó :)
Nos vemos ;)
Genial, se puede personalizar el tamaño y color de fondo? y cómo lo sitúo debajo del head.
GRACIAS!
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í.
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?
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!
Espera, parece que ya se soluciono
gracias igual de todos modos!
saludos
El Venado, va debajo de <div class='headerright'>
fabian, qué bueno que ya lo has solucionado ;)
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.
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.
grande!
ya esta puesto! le quedo de lujo y subi los archivos en mi cuenta. Gracias por este recurso.
http://joel-design.blogspot.com
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 ;)
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
Busca donde dice:
.post-body {
margin: 2 2 .75em;
Y cambialo por:
.post-body {
margin: 30px 2 .75em;
Saludos.
Gracias, probaré a ver que pasa, me gusta el carrusel ..
Saludos, desde Roquetas de Mar, España
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!!!
Hola potro! muy buen truco, pero mi pregunta era si se podia poner dentro de los post.
Saludos!
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.
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
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?
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 :(
Gracias!
ESO ESTA BIEN POTRO SOLO KIERO SABER ALGO COMO HACES PARA PONER OTRA BARRA DE MENUS EN LA IZQUIERDA EN TU BLOG
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.
Hola amigazo potro se puede usar como una especie de carrucel de post, que te lleve a los post mas importantes?
Gracias
En la próxima entrada explicaré cómo hacerlo.
Saludos!
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/
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.
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
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.
Potro eres un genio!!!!!! gracias! ya esta arreglado! gracias!!!!!!
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?
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.
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.
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
Muchas gracias por el comentario, un día de estos te tomaré la palabra del diseño ;)
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
Me gustó bastante la cabecera incluso por un momento dudé que fuera un blog de Blogger :P
Potro habra otra forma de carrusel hacia arriba y abajo de forma vertical?
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
});
});
gracias Potro!!
INTENTE PONER 2 CARRUSELES DE IMAGENES EN MI BLOG Y EL SEGUNDO NO SALE ¿QUE PUEDO HACER?
Me temo que sólo se puede usar uno en el blog.
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.
Mira esta entrada
Saludos.
=) 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
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.
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
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.
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
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.
Hola buen dia oye este carrusel se puede implementar en una pagina web?? gracias esta muy chido saludoss!!
Claro, aunque de páginas web comunes no podría orientarte pero sí, sí se puede.
Saludos.
Hola otra vz yo como podria colocarlo en mi pagina web??
Como te dije antes, no puedo orientarte pues la única plataforma que conozco es Blogger.
Ok gracias potro saludos :)
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.