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 {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:
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;}
<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.
<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:
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.
Ciudad Blogger
Buen post potro +10 jjaajaj estilo taringa!
ResponderEliminarPotro a proposito no se podra hacer un tipo de puntuacion en Blogger como el de los post de Taringa!
Al alguna forma de poner el titulo arriba del foto sin tener que mover el mouse sobre la imagen?? Gracias.
ResponderEliminarJuvinao, 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 :)
ResponderEliminarDelzon, por ahí hay uno con jQuery, pero ya andaban pidiendo uno con Scriptaculous.
Excelenteeee!!! por favor no me ponga más faltas de coments que quedo libre :))
ResponderEliminarSaludos chao chao
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarPotro no te vallas D:
ResponderEliminarCronos_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.
ResponderEliminarJason Santoro, si eliminas esta parte de los estilos aparecerá arriba el nombre de la imagen:
ResponderEliminar#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.
aaaaah esto es lo ke hace un buen rato andaba buscando!!! mil gracias como siempre por tus aportaciones tan útiles =D
ResponderEliminarjonathan[i2000], qué todo salga bien!
ResponderEliminarGraciela, por supuesto que no, es más una estrellita de asistencia :) ★
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?
ResponderEliminarLas 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:
ResponderEliminarhttp://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".
Chico del Cereal, todavía no me voy a ninguna parte ;)
ResponderEliminarMerlina, gracias a ti por tu visita, siempre es grato verte por acá :)
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...
ResponderEliminarListo, 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.
ResponderEliminarHola 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!
ResponderEliminarHola 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. ;)
ResponderEliminarDaniel Fernández, de lujo!
ResponderEliminarMarcos 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í:
ResponderEliminar/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.
Hola Andrea,
ResponderEliminarEn 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!
Perfecto Potro, quedó muy bien. GRACIAS! Saludos
ResponderEliminarExcelente!! y a la explicación le doy un 10. Gracias por hacer tan fácil lo que a algunos nos parece difícil.
ResponderEliminarHola El Potro muy buen tutorial.. pero tengo una duda me puedes pasar algún sitio para cargar los archivos que se necesitan subir..
ResponderEliminarMuchas Gracias!!
JUAN
Ya conseguí este hosting muy bueno http://myfreefilehosting.com
ResponderEliminarSaludo!!
m.p.moreno, gracias a ti por tu visita!
ResponderEliminarjonathan[i2000], ¿en cuál blog lo has puesto?
Administrador, no conozco ese hosting, pero dos muy buenos son Google Sites y Dropbox.
ResponderEliminarPero a un user le dijiste q pensabas en ceerrar el blog u.u note vallas potro u.u T_T
ResponderEliminarTe quedo muy bueno Potro... jeje no es que lo fuera a usar justo ahora, pero cuando tenga que usarlos tendre de donde elegir :)
ResponderEliminarSaludos ;)
Chico del Cereal, pero aún no hay nada en concreto, así que todavía estaré dando lata por acá :)
ResponderEliminarjavi_anubis, exacto, siempre hay que tenerlo todo como una opción para cuando se necesite ;)
Es... Precioso... Ojala tenga alguna vez la posibilidad de usarlo, pero por ahora el blog no quiero toquetearlo mas :)
ResponderEliminarAsí como está ahora está bien, es mejor no sobrecargarlo :)
ResponderEliminartambien se se puede hacer un carrusel con tablas
ResponderEliminarHola Potro:
ResponderEliminarLas 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
N_N que bueno Potro no te desanimes tienes mucha audiencia y fans<3
ResponderEliminarcar805, supongo que sí, aunque no lo he intentado.
ResponderEliminarFRANCISCO, 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!
Hola de nuevo Potro:
ResponderEliminarYa 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
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:
ResponderEliminar.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
Hola Potro:
ResponderEliminarGracias 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.
Hola de nuevo FRANCISCO,
ResponderEliminarDentro 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.
Hola Potro:
ResponderEliminarConseguí con tu ayuda lo pretendido. Muchas Gracias Potro.
Saludos
Hola Potro de Nuevo:
ResponderEliminarCuando 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.
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¿No se le podría agregar texto a las miniaturas?
ResponderEliminarSólo un pequeño título; mira el comentario #11
ResponderEliminarQuisiera 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.
ResponderEliminarBusco un efecto más o menos como el slider de esta página: http://socialitelife.com/
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.
ResponderEliminarSaludos potro ya tiene rato q me habia alejado del blogger, espero poder retomarlo :)
ResponderEliminaresta muy bueno este post muchas graz me servirà mucho!!
Saludos!!
Bienvenido de vuelta FREDDY :)
ResponderEliminarHola 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.
ResponderEliminarAsi 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
Potro gracias aunque ya me di cuenta porque era el problema era por esta linea
ResponderEliminarleft: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...
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 ;)
ResponderEliminarhola 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.
ResponderEliminaralgo asi como este ejemplo:
http://www.imagengratis.org/images/dibujooq5zo.jpg
te agradeceria la ayuda,
muchas gracias de antemano!
lo logre hacer potro.. jejeje neciando pero lo hice....
ResponderEliminarhttp://dvdrip-charly03.blogspot.com/
ResponderEliminarMe da gusto que lo hayas conseguido peor más aun que lo hayas intentado :)
ResponderEliminarHola mi estimado amigo Potro…
ResponderEliminarMe 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
Hola Adrian,
ResponderEliminarHay 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!
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:
ResponderEliminarhttp://pruebatemplario.blogspot.com/
Y sale un codigo raro, me puedes ayudar?
Gracias de antemano.
Saludos.
Hola Templario,
ResponderEliminarRepite 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.
Excelente Potro eso era......muchas gracias por todo............saludos
ResponderEliminarhola 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/
ResponderEliminarme 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
Hola razhiel9004,
ResponderEliminarEn 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;
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...
ResponderEliminarhttp://anochecioalamitaddeldia.blogspot.com
Saludos!
Me ha encantado cómo lo has dejado Barricadxs :)
ResponderEliminarSaludos!
Hola Potro, esta excelente este aporte
ResponderEliminarUna 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
Hola kriec, qué gusto saludarte.
ResponderEliminarCambia 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.
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.
ResponderEliminarGracias Mi Buen Amigo, Saludos y cuidate Mucho!!!
Hola Potro:
ResponderEliminarNo me aparece el botón de desplazamiento.
http://franciscoadame.blogspot.com
Saludos
Hola FRANCISCO,
ResponderEliminarEn 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.
Oye potro me gustaria uno paresido a este mira este blog y mira el carruser que aparese ensima
ResponderEliminares el que dice vip en azul
www.tedilumusic.net
No conozco ese slider, ignoro cuál sea o cómo lo hayan hecho :/
ResponderEliminar:( 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
ResponderEliminarQuizá haya alguno pero yo no lo conozco, sería cuestión de que busques en la red alguno con esa característica.
ResponderEliminarHola... 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¿En cuál blog lo has puesto y a qué hosting has subido los archivos?
ResponderEliminarya quedo solucionado use el dropbox y ya esta funcionando correctamente pasara lo mismo con el script Orbit Slider de imágenes con jQuery
ResponderEliminarlo 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 !!
Si quieres alojarlo directo en la plantilla entonces no hace falta ningún hosting:
ResponderEliminarhttp://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.
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...
ResponderEliminarDisculpa 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.
ResponderEliminarHola Fernando,
ResponderEliminarEncierra 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.
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
ResponderEliminarhttp://jenyal-elpoderdeunamorverdadero.blogspot.com/
Muchas gracias amigo, lo voy a probar...
ResponderEliminarJENYAL, 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.
ResponderEliminarSúbelos a otro hosting como Dropbox, ahí no tendrás ese problema:
http://ciudadblogger.com/2010/04/como-usar-dropbox.html
gracias potro hermano ya esta. como veras ese detalle kedara perfecto en el post gracias
ResponderEliminarpotro 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
ResponderEliminarhttp://jenyal-elpoderdeunamorverdadero.blogspot.com
En la entrada se habla sobre ello y cómo evitarlo. Saludos.
ResponderEliminarGRACIAS POTRO NO ME HABÍA FIJADO
ResponderEliminarSe 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.
ResponderEliminarHola 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 ;)
EliminarHola 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.
ResponderEliminarHola Carlos,
EliminarPrueba 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.
Hola Potro.
ResponderEliminarTengo 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.
pd: los archivos los he alojado en la misma plantilla y perdon, me olvide de poner mi blog.
Eliminarwww.arteentorno.com
Hola victorache,
EliminarEsta 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.
Muchas Gracias Potro!
EliminarYa he intentado lo del Shadowbox y también me ha resultado.
Saludos!
Hola!!!!! :D
ResponderEliminarMe 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/
Me da gusto que hayas sabido cómo resolverlo MewaL.L.L. :)
EliminarBuenas Potro.
ResponderEliminarEscribo 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.
pd: siempre olvido poner mi blog. www.arteentorno.com
EliminarDisculpa.
Lo que pasa es que usas jQuery, y aun hay partes que no tienen aplicado el hack.
EliminarCon 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.
Hola Potro. Ya hice el hack de las partes que faltaban y aun no funciona. ¿Qué podrá ser?
EliminarEspero atento a tu respuesta.
Gracias.
Ahora que estoy viendo, no tienes completo el primer código o.O
EliminarGracias Potro!
ResponderEliminarEres 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.
Buenas Potro.
EliminarEscribo 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.
No entendí victorache, ¿qué tienen la fotos del carrusel?
EliminarLa última imagen se superpuso sobre la penúltima.
EliminarTe vuelvo a dejar el enlace de la entrada ya que el anterior ya no funciona.
Eliminarhttp://www.arteentorno.com/2012/02/arte-en-torno-mi-bella-genio_10.html
Busca esta parte y quita lo que está en negrita:
Eliminar#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
Hola Potro.
EliminarMuchas 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!
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.
EliminarOK, Muchas Gracias Potro.
EliminarYa 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!
Qué bien victorache, el resultado ha sido estupendo :)
EliminarGracias!
Eliminarpor 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....
ResponderEliminarTus 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!!
y tampoco m funcion con internet explorer y es para una tarea de la universidad :(
EliminarYa encontre el problema... nunca habia usado drpbox y habia colocado todo en una carpeta que no era public!
EliminarFUNCIONA PERFECTO!!! ... MIL GRACIAS POR TU BLOG!!!
ES G.E.N.I.A.L
Llegué tarde por causas de fuerza mayor, pero me alegra saber que encontraste el error y supiste cómo resolverlo :)
EliminarSaludos.
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.
ResponderEliminarUn saludo!
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.
EliminarGracias potro algo pude lograr, lo podes ver aqui.
ResponderEliminarAhora 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.
No entendí Martin, veo el título encima de la imagen, ¿no lo querías así?
EliminarSi 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.
EliminarEntiendo, no me había fijado de ese detalle. Entonces quizá tengas que quitar el position: absolute; que está dentro de #Carousel2 .item .key {
EliminarEso 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.
Este comentario ha sido eliminado por el autor.
ResponderEliminarPotro asi era, quite el absolute.
ResponderEliminarDespues 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
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 :/
Eliminarsi 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?
ResponderEliminarAdemas no pude con el ancho total, se corta en la img 6 por ahi, esta algo mal?
Saludos potro
Eso ya e spor tu plantilla, tal vez tengas que ponerle un estilo para los enlaces:
Eliminar#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.
Hola..
ResponderEliminara ver te consulto..
puedo utilizar esto en una web ?? (html + css )
o solo en blogger?
Saludos!
Seguramente sí, pero yo sólo lo he probado en Blogger, así que sólo podría asesorarte con esa plataforma.
EliminarSaludos.
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.
ResponderEliminarscript 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
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:
Eliminar<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>
Hola Potro.
ResponderEliminarEscribo 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.
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.
EliminarSaludos.
Gracias por tu respuesta Potro.
EliminarHola Amigo.. [ El Potro ]
ResponderEliminarPor 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...
¿Has revisado que no tengas jQuery o Mootools, o que tengas aplicado el parche de jQuery para que funcione con Scriptaculous?
EliminarSi nada de lo anterior es tu caso entonces mira el comentario #93.1
Hola Amigo..
EliminarYa 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...!
No sé, habría que ver en cuál blog tienes el problema.
EliminarMi Blog --- MEG@-PC -- ( Http://m-pc-r.blogspot.com )
EliminarPrueba poner estos scripts después de los de jQuery.
Eliminar¿ Cuales "scripts" ? y en que lugar x fa...?
EliminarLos 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.
EliminarHola 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.
ResponderEliminarDesde ya te agradesco si me puedas atudar potro.
Saludos
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?
EliminarSi 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.
EliminarAhora lo deje en valor 4 para que puedas ver potro que sucede.
Saludos
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.
EliminarPotro 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.
EliminarDe igual manera solo corre una vez mostrandome 5 de las 8 que agregue, como lo podria solucionar potro?
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.
EliminarHola Potro no se si quedo el otro comentario.
EliminarAl 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!
Hola Martin, ahí en el código verás que dice URL del enlace, ahí debes poner la URL que quieras enlazar.
EliminarSaludos.
en el caso original si Potro pero recuerda que quedo distino al agregarle el titulo, de esta forma.
EliminarSaludos!
Pero el enlace en la imagen no varía, sólo tienes que ponerle a la imagen el enlace, por ejemplo:
Eliminar<a href="URL del enlace"><img src="URL de la imagen" /></a>
Buenas Potro.
ResponderEliminarTe 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.
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 :/
EliminarOk Muchas Gracias Potro.
EliminarTendré que buscar otra alternativa.
Saludos!
Saludos Potro... Tus ayudas me estan sirviendo de mucho a la hora de aprender... te Felicito. Pero tengo un par de problemas con esto:
ResponderEliminar1. 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.
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.
EliminarEn cuanto a lo otro, tendría que ver dónde lo has puesto.
Saludos.
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¡¡¡¡ 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. :)
ResponderEliminar* No he colocado el enlace por respeto a no poner enlaces a ningun blog ni página.
Me alegro que lo hayas resuelto Jesús :)
EliminarHola 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¿Este mismo dos veces? Que yo sepa no se puede, puedes intentarlo pero dudo que funcione :/
EliminarHola Potro,
ResponderEliminarUna 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
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 :/
EliminarCambia 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.
ResponderEliminarHabrá que considerar otro carrusel entonces, no ve dónde más pueda estar el "fallo" :/
ResponderEliminarHola! tengo la duda de si se puede hacer algo por el estilo pero dentro de las entradas.
ResponderEliminarHola Alejandra, para las entradas te convendría más este:
Eliminarhttp://ciudadblogger.com/2009/05/links-y-banners-en-movimiento.html
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarNo lo veo en tu blog, pero sí veo que tienes jQuery, un script que no es compatible con Scriptaculous:
Eliminarhttp://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.
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:
ResponderEliminar* 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!
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.
EliminarLo 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.
Potro mira como quedo el carrousel. Asi es como me aparece a mi, mira:
Eliminarhttp://dl.dropbox.com/u/101041548/Ejemplo%20Carrousel.png
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 :( .
EliminarEso 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.
EliminarPara las flechas cambia el bottom:0px; por un valor más alto.
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.
ResponderEliminarCambia el /* Ancho total de todas las minaturas */ quizá está muy ancho y por eso sigue mostrando como si hubiera contenido.
EliminarGran 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.
ResponderEliminarSeguramente cerá por conflicto pero no puedo solucionarlo ya que no se donde incluir el jQuery.noConflict();.
Gracias
Hola FRANCISCO, supongo que ya lo has resuelto porque he entrado y veo el carrusel funcionando sin problemas.
EliminarSaludos!
ok, potro pero el carrucel no llega a la última foto ¡cual puede ser el problema?
EliminarQuizá modificaste el ancho del carrusel y no alcanza a mostrar el último.
EliminarAmigo potro, he modificado para ajustar el
Eliminar#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?
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.
EliminarPotro, soy FasteN, el anterior comentario es seguidamente al mismo tema sobre el carrousel, solo que estaba desde el otro Blog.
ResponderEliminarPotro 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¿A qué te refieres con que no quedan, no se le aplica esa medida cuando la pones?
EliminarDentro del Gadget (Javascript), en donde dicen los "Width" y "Height" ya me canse de probar y no funciona... No entiendo porque :\
EliminarVeo 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.
EliminarSi has añadido en otras áreas esa declaración podría afectar de igual manera en los tamaños.
Claro. En donde dicen Width y Height dentro del GADGET (Javacript) no funciona :\ ... No entiendo porque no funciona
ResponderEliminarsrc='URL del archivo os.js' type='text/javascript'/>
ResponderEliminarsrc='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?
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í.
EliminarHola Potro.
ResponderEliminarSiguiendo 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.
Hola Antonio, ya he resubido los archivos.
EliminarSaludos.
Gracias Potro, ya los he descargado.
EliminarSaludos.
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/
ResponderEliminarJunto 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.
Exactamente ese no pues no lo conozco, pero en la sección "Slideshows" puedes encontrar algunos similares.
EliminarHola Potro, gracias por tu respuesta.
ResponderEliminarMe 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.
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
ResponderEliminarParece que al poner la URL del archivo estás eliminando algún caracter.
Eliminar