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

Aumentar imágenes al pasar el cursor con efecto deslizante

15 de abril de 2012 | Número de comentarios207 comentarios
Hay muchos métodos para expandir imágenes al pasar el cursor, uno de ellos es Expando, un script que permite que la imagen aumente a su tamaño real con un efecto deslizante, y al quitar el cursor la imagen regresa al tamaño pequeño, también con el mismo efecto.

Puedes ver el demo aquí mismo pasando el cursor sobre esta imagen en miniatura:


Para lograr este efecto en tus imágenes ingresa a la Edición HTML y agrega antes de </head> el script:
<script type='text/javascript'>
//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

<style>
img.expando{
margin:10px;
vertical-align: top;
}
</style>
Y luego en tus entradas o donde lo quieras poner, usa este código para tus imágenes:
<img border="0" src="URL de la imagen" class="expando" width="100" />

Agrega la URL de la imagen donde se indica y listo, así de fácil y sencillo.
La imagen que pongas deberá ser la que tiene el tamaño normal, y en donde se indica en color azul deberás poner el tamaño que tendrá la miniatura.

Nada complicado ¿verdad? ;)


207 comentarios :

  1. la verdad no potro gracias y que raro sea el más visitado y ningun comentario o_0?

    ResponderEliminar
    Respuestas
    1. lo publico hace segundos... XD gracias potro muy bueno

      Eliminar
    2. Me has agarrado dándole click en Publicar :)

      Eliminar
    3. AMIGO COMO PUEDO PONER UN ENLACE ENCIMA DE ESTA IMAGEN CANDO SEAGRANDA

      Eliminar
    4. Amigo como puedo poner un enlace encima de esa imagen agrandada

      Eliminar
    5. Usa el código así Fernando:
      <a href="URL del enlace"><img border="0" src="URL de la imagen" class="expando" width="100" /></a>

      Pero la imagen siempre tendrá el enlace sin importar si está agrandada o no.

      Eliminar
    6. Hola es que es la primera vez que edito el html.... y no sé qué estoy haciendo mal porque no me funciona -_-

      Eliminar
  2. huy un error muy decuidado de mi parte no se en que andaba pensando jejeje e_e bueno recomendado a redes sociales :D

    ResponderEliminar
    Respuestas
    1. Compañero hay que citar las fuentes.

      Eliminar
    2. En el código están los créditos del autor del script si es a lo que te refieres, no me he atribuido nada que no me pertenece.

      Eliminar
    3. nada a como de lugar si tendras que darte tu tambien el credito por que si tu no hablas de esta cosas nadie aprendiera companero el que piense que hay que citar fuentes que las cite el la sabiduria y el aprendizaje no se ocultan y se hace mas sabio todo aquel que las comparte

      Eliminar
  3. Respuestas
    1. Gracias pero no supe hacerlo pegue todo muy bien, pero despues no se como ponerlo en las fotos, yo subo las fotos desde mi pc ....me enrede talvez sea muy bruta, pero gracias, tienes una pagina muy buena.

      Eliminar
    2. Tienes que subir las imágenes a Internet:
      http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

      Eliminar
  4. ¡BESTIAL! ¡BESTIAL! ¡BESTIAL! ¡El Potro, El potro, El Potro es cojonudo, como el potro no hay ninguno! Jajajaja. De los mejores efectos que has publicado, en mi opinión. Lo voy a agregar al post donde explico el funcionamiento de la nueva interfaz, para que sea más fácil de entender. Gracias, amigo :)

    ResponderEliminar
    Respuestas
    1. Jaja, eso ha parecido una porra deportiva, habrá que ensayarla con animadoras :D

      Eliminar
    2. Jajaja, por ahora el presupuesto no me llega, pero cuando mi blog se haga famoso y Google me lo quiera comprar, hablaremos de las animadoras, jajajaja. ¡Saludos!

      Eliminar
  5. Muy bueno. Seguro le voy a dar un muy buen uso. Gracias.

    ResponderEliminar
  6. Bonito, simple y con poco código (lo mejor es su facilidad a la hora de integrarlo), pero no me gustan muchos los zoom en las imágenes por si se salen de las noticias o yo qué se (tonterías mías).
    No sé de dónde sacas tantas ideas para todas las millones de entradas que tienes ya :D

    ResponderEliminar
    Respuestas
    1. No son tonterías tuyas, es que no a todos les sirve igual, a mí por ejemplo no me sería útil ponerlo en todas las entradas, pero de vez en cuando me vendría bien para ciertas imágenes :D

      Eliminar
  7. ¡¡¡¡Es precioso!!!!... es una joya, una maravilla.
    Muchísimas gracias por darnos facilitarnos tanta hermosura, Potro.
    ¡Un beso enorme!

    (lo he probado y me ha funcionado de maravilla, y vuelto a quitar de la entrada para hacerlo en condiciones :D)

    ResponderEliminar
    Respuestas
    1. Y con esas fotos tan lindas que tienes se verá muy bien :)
      Besos.

      Eliminar
    2. Gracias por el halago, :)), sonrojos aparte.
      Por cierto, ¿sabes?, yo es que tengo la suerte de haberme decidido a exponerlas en su día, sí, una suerte, aunque a veces parezca una condena, :)), PERO, sé de personas que hacen fotografía que merecerían una página expositiva y no se deciden a planteársela...cuánto me gustaría poder influir en ellas, pero no soy nadie para esa pretensión. Pienso que con un recurso tan bonito como éste, que tú has acercado, a lo mejor se deciden.
      Gracias otra vez, ésta, por todo tu trabajo, Potro.
      Besos

      Eliminar
    3. Pues sino éste quizá con algunas galerías de las tantas que hay se animarían a exponerlas, yo hace poco le hice una plantilla a un fotógrafo y sus imágenes lucen muy bien con la galería que le puse (modestia aparte :P)

      Eliminar
    4. Yo pensaba en un fotógrafo menos "conocido"...;), vamos, que ni él mismo se lo cree...:p
      Aparte, algún día tendre que decidirme a ponerle una plantilla en condiciones al de fotografía, pero es que no se tiene tiempo para too!...:), pero luego cuando las veo (pocas he visto, la verdad), me dan envidia, nada de la sana, jejejeje.
      (menudos pecadores estamos hechos, ;), tú con tu inmodestia y yo con mi envidia, jajajaja)
      Un beso

      Eliminar
  8. Como siempre Potro, Excelente. Solo queria preguntarte si funciona al hacer una galeria de fotos y como quedaria el codigo, igual o hay que ir agregando una por una hasta formar la galeria de fotos.

    Gracias

    Gilberto

    ResponderEliminar
    Respuestas
    1. Puedes poner las miniaturas dentro de una tabla, así estarían ordenadas. El problema con estos métodos es que al aumentar desplazan todo lo que hay alrededor, así que quizá el resultado no sea el que esperas.

      Eliminar
  9. Esta genial Potro :D

    Pero lo que más me ha llamado la atención es ya hasta porras oficiales tienes, ja ja.. estaría genial que blogger te permitiera dar like sobre los comentarios (se que no se puede, lo dijiste alguna vez)

    Un abrazo viejo.

    ResponderEliminar
    Respuestas
    1. Creo que estamos sincronizados, porque cuando vi ese comentario también pensé lo mismo respecto al like :)

      Eliminar
  10. Estupendo efecto, potro, no conzco javascript pero seguiré aprendiendo para saber programar algún día.

    ResponderEliminar
  11. Muchas gracias portro!!!
    yo cnozco uno igual que lo hago
    con
    Moz transition me es mas facil jeje

    ResponderEliminar
    Respuestas
    1. Es fácil y con muchas ventajas el método que usas, el único inconveniente es que no todos los navegadores reconocen las transiciones.

      Eliminar
  12. te pasaste como 100pre Potro. gracias por el dato amigo.. mas bien una pegunta extra te queria hacer... existiran plantillas gratis en flash para blog de blogger??..

    ResponderEliminar
    Respuestas
    1. Exactamente para Blogger no, hay servicios con los que puedes hacer plantillas, luego esas plantillas las insertas en el blog (como un archivo SWF). El problema con el flash es que los robots no indexan ese contenido, así que en cuestión de posicionamiento no es recomendable.

      Eliminar
  13. Gracias, Potro. Por ahora lo he puesto y probado junto con el intro del blog. Seguro será de gran utilidad más adelante en algunas entradas. Saludos.

    ResponderEliminar
  14. Muy bueno potro, el único problema es que ahora no me aparece el "title" al poner encima el ratón ¿Alguna solución? Gracias por tu trabajo.

    ResponderEliminar
    Respuestas
    1. Si el el código de tu imagen tienes un enlace para mostrar la imagen en su tamaño normal (el código común que nos da Blogger al subir la imagen) entonces agrega el title dentro de ese enlace.
      Por ejemplo:
      <a title="Este es un título" href="http://2.bp.blogspot.com/-GNw9g8XVGtQ/ToYqD56WSZI/AAAAAAAABsw/WTR8CrWb4r4/s1600/400_1312863593_755046-1024x768-teton-morningwyoming597778528217c0ac494eb.jpeg" style="margin-left: 1em; margin-right: 1em;"><img src="http://2.bp.blogspot.com/-GNw9g8XVGtQ/ToYqD56WSZI/AAAAAAAABsw/WTR8CrWb4r4/s400/400_1312863593_755046-1024x768-teton-morningwyoming597778528217c0ac494eb.jpeg" class="expando" width="100" /></a>

      Eliminar
  15. Wow! Está buenísimo! ^^ Lo uso!
    Gracias por la info :)
    Potro, cómo le haces para que tus reespuestas a lo comentarios no se cuenten? Y Cómo podría hacer para poner la opción: me gusta en el sistema de comentarios y que se ordenen por más populares?
    Bueno, se oye difícil. Gracias por contestarnos a todos :D!
    Besitos!
    Rizel

    ResponderEliminar
    Respuestas
    1. No se puede Rizel, al menos no que yo sepa. Mis comentarios sí se cuentan, el número total de comentarios es el que está arribita de donde comienzan los comentarios, ese es el real, lo que sucede es que como son anidados pues hay comentarios que son parte de un mismo comentario, por ejemplo, este mismo que estoy haciendo será el 16.1 y el siguiente es el 17, entre el tuyo, el mío, y el siguiente son 3 comentarios, pero si miras sólo el el 16 y 17 entonces se pensaría que sólo hay dos, pero no es así ;)

      Eliminar
  16. esta rebuenisimo y no es tan dificil es muy facil gracias potro ;) tratare de implementarlo en mi blog estoy trabajando en un nuevo diseño denme su opinion :D http://misshabbouniverse2010.blogspot.com/ ese es mi blog de prueba y oye potro aun estoy esperando que pongas las imagenes que te envie por facebook a la pagina de CiudadBlogger en facebook quedara padrisima con ese diseño te lo recomiendo ;) por que mira el mio https://www.facebook.com/que.bombazo.r ese diseño te lo hice en forma de agradecimiento mira el resultado final si pones las imagenes https://www.facebook.com/pages/Traficante-de-OREOS-e__e/233925143330511 ;) espero que lo hagas potro y sigue asi tus post son buenisimos :D

    ResponderEliminar
    Respuestas
    1. Gracias, de momento dejaré las que tengo, ya después consideraré ponerlas ;)
      Gracias nuevamente :)

      Eliminar
  17. pero como le ago si tengo un monton de imagenes=??

    ResponderEliminar
    Respuestas
    1. Entonces quizá este método no te convenga porque es necesario que cada imagen tenga el atributo class="expando", así que tendrías que ponérselo a todas.

      Eliminar
  18. Vaya, se ve bastante vistosa esta forma de ampliar las imágenes. Me gusta mucho.

    ResponderEliminar
  19. El efecto es excelente, el código es muy largo :)

    ResponderEliminar
    Respuestas
    1. No lo es tanto, hay otros códigos mucho más extensos ;)

      Eliminar
  20. Hola Potro...muy bueno lo tuyo . Ahora me salgo del tema: quiero usar una tabla que se expanda y encontre algo en http://blogandweb.com/css/tablas-expandibles-con-css/ pero no se que hago mal no me funciona bien. A ver si posteas algo sobre este tema, le tengo fe a tus explicaciones,gracias

    ResponderEliminar
    Respuestas
    1. Gracias por tu confianza Hector, más adelante publicaré sobre ello.
      Saludos.

      Eliminar
  21. Hola mi nombre es Elena y quisiera saber como hacerlo,te explico:quiero hacer un sorteo en mi blog ,pero no se ni como coger una imagen chula de logo,ni como personalizarla,con el nombre de mi blog y la fecha del sorteo??Me podrías ayudar,por favor??
    Gracias.
    Mi correo:elenapepo@hotmail.es
    Mil Gracias

    ResponderEliminar
    Respuestas
    1. Hola Al Son Del Mortero, supongo que lo que necesitas es un programa de edición de imágenes para que ahí hagas la cabecera del blog que deseas. Programas hay muchos, desde los más simples hasta los más avanzados, ya dependerá de qué necesites, en la red puedes hacer una búsqueda para encontrar algún programa que se adecue a tus necesidades.

      Saludos.

      Eliminar
  22. Oye Potro, una pregunta, y no se puede aconseguir el mismo efecto pero en vez de pasar el raton encima, tenga que dar un clic para que se amplie ? Como se podría hacer esto ?
    P.D: Muy bueno el truco.

    ResponderEliminar
    Respuestas
    1. Sí NicolayDV, sí se puede. Cambia en el script esta línea:
      document.addEventListener('mouseover', expConIm, false);

      Por esta:
      document.addEventListener('click', expConIm, false);

      Eliminar
    2. muchísimas grácias Potro !!! :)

      Eliminar
  23. Pues debo ser muy torpe pero no lo he conseguido. No entiendo la segunda parte, ¿como, donde se pone el código en las imágenes? Te importa explicarlo para "negados"
    Gracias, Potro

    ResponderEliminar
    Respuestas
    1. Como dice la entrada, ese código va en las entradas, donde quieras que se muestre la imagen. En realidad podría ponerse casi en cualquier parte, pero en las entradas es lo más usual.
      Saludos.

      Eliminar
  24. Perdona Potro que abuse de tu confianza y conocimientos pero he buscado por ahi como hacer un carousel de imagenes diferente y encuentro un tutorial en: http://douggreenall.co.uk/Default.aspx?p=232
    pero no logro realizarlo, podras ojearlo y de pronto postear algo al respecto de como implementarlo?

    ResponderEliminar
    Respuestas
    1. Qué manera tan complicada de publicar una entrada, no le he entendido nada, jajaja. A ver si después que me despierte bien lo reviso de nuevo y le logro entender :)

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

      Eliminar
    3. Ja ja, sos ave nocturna....yo insisti y en el comentario anterior habia puesto que lo logreeeee, desde la pagina del autor, puedes verlo funcionando en Blog de Pruebas
      http://tubanner.blogspot.com/ :)

      Eliminar
  25. muy bueno e ingenioso... me gustó... comenzaré a preocuparme por mi blog nuevamente y obvio asesorandome por el mejor o no.. Potrito? Besos amigo!

    ResponderEliminar
    Respuestas
    1. No soy el mejor pero siempre será un gusto tenerte por aquí :)

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

    ResponderEliminar
  27. con el cambio de blogger.. no tengo idea donde va todo. ayudame potro. no me resulta encontrar la edicion de HTML uff todo cambiado :/ grxs!!

    ResponderEliminar
    Respuestas
    1. En la nueva interfaz está en Plantilla > Edición de HTML.

      Eliminar
    2. realicé todos los pasos a seguir, y no me resulta.. en qué podré estar fallando?? digo la expancion de la imagen ahí no sucede nada

      Eliminar
  28. realicé todo bien, y al colocar la imagen queda montada no se vé mal, pero no es como tu la indicas. revisa porfas cuando tengas tiempo y ayudame. gracias
    por si no te acuerdas http://fotos-amigos-forever.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Tienes todo este código en la entrada:
      <div dir="ltr" style="text-align: left;" trbidi="on">
      <br />
      <br />
      <a href="http://1.bp.blogspot.com/-eOPswTORuSs/T5cM-PFHbcI/AAAAAAAAB6Q/gySPNhQxSmc/s1600/P1000971.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="240" imageanchor="1" src="http://1.bp.blogspot.com/-eOPswTORuSs/T5cM-PFHbcI/AAAAAAAAB6Q/gySPNhQxSmc/s320/P1000971.JPG" width="320" /></a><img border="0" class="expando" height="240" src="http://1.bp.blogspot.com/-eOPswTORuSs/T5cM-PFHbcI/AAAAAAAAB6Q/gySPNhQxSmc/s320/P1000971.JPG" width="100" /></div>


      Y debe ser así:
      <img border="0" class="expando" src="http://1.bp.blogspot.com/-eOPswTORuSs/T5cM-PFHbcI/AAAAAAAAB6Q/gySPNhQxSmc/s320/P1000971.JPG" width="100" />

      Eliminar
  29. aaaaaaaaaah te amoooooo, me resultó.. gracias mi potro querido... lo dejaré grabado para no olvidar... chaus, besos, sabía que me ayudarias!!!!!!

    ResponderEliminar
  30. Hola Potro, perdón por la molestia.
    El efecto me ha encantado y lo estoy aplicando en mi blog.
    Solo tengo una duda, ¿ no se puede poner el tamaño de la imagen el que tu quieras y no el tamaño original de la foto al expandirse ?
    Nose si me explico, lo que quiero es que al expandirse la foto, se muestre un tamaño en concreto y no el tamaño original de la imagen.
    Espero que me entiendas lo que quiero decir.
    Solo tengo este problema y espero que sepas como hacerlo. Desde ya, gracias adelantadas.

    P.D.: Eres el mejor !! :)

    ResponderEliminar
    Respuestas
    1. Me parece que no NicolayDV, al menos en el script no encuentro algún dato que se pueda modificar para hacer tal cambio.

      Eliminar
  31. Está genial, aunque no me gusta ponerle tantas cosas como estas al blog porque lo puede alentar mucho en conexiones lentas, igual está buenísimo!

    :)

    ResponderEliminar
    Respuestas
    1. Pues por suerte no es un script que pese mucho, pero claro, si el blog ya tiene varios elementos lo mejor es prescindir de estos efectos ;)

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

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

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario María José. El ancho de tu cabecera debe ser del mismo ancho de tu blog, en este caso de 958px de ancho.

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

    ResponderEliminar
  35. Hola potro, echa una ojeada a esta entrada,http://farmadict.blogspot.com/2012/05/estas-son-las-primeras-imagenes-que-se.html, ¿se puede arreglar para que al ampliar la imagen se vea por encima de todo lo demas? Gracias por todo.

    ResponderEliminar
  36. Hermano, y utilizando el último código, ¿cómo puedo hacer para que la imagen quede centrada? Es que me aparece en el lado izquierdo por defecto. Gracias! :D

    ResponderEliminar
  37. Otra cosa, cuando pongo la imagen todo me pasa al revés D: Cuando paso el cursor sobre la imagen, esta disminuye. Espero puedas ayudarme, gracias! :)

    ResponderEliminar
    Respuestas
    1. Hola Christian, ignoro porqué se reduzca, pero para centrarla encierra el código de la imagen entre <center> y </center>

      Eliminar
  38. Gracias Potro. Me ha servido de mucho. Casi sin querer, si repites el efecto, con diferentes imágenes en un mismo documento html, creas un álbum de fotos de lo mas dinámico, sencillo y aparente. salu2, crack! y gracias!

    ResponderEliminar
    Respuestas
    1. Es cierto Luis, fácilmente se podría hacer una galería sencilla pero atractiva :)

      Eliminar
    2. Potro estoy tratando de poner un mensaje para ver quien me ayuda pero no aparece publicado, en fin he colocado el Script "expando" en mi blog pero me funciona al reves, es decir, cuando paso el raton por encima de la imagen esta se hace pequeña y no al reves como deberia ser. ¿ Tienes alguna idea de lo que ocurre?
      Gracias por tu ayuda

      Eliminar
    3. Hola F.Martin Alejo, los comentarios están siendo moderados, es por eso que no aparecen de inmediato, pero ya te he respondido abajo. Saludos.

      Eliminar
  39. Creo haber seguido las instrucciones para colocar el script y la URL de la imagen, pero cuando coloco el cursor funciona al reves, es decir, la imagen aparece en tamaño normal y luego se reduce a un tamaño, desde luego superior a 100px. ¿ Alguien puede ayudarme?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola F.Martin Alejo, ¿en cuál blog lo has puesto?

      Eliminar
    2. Gracias por la contestacion y ayuda el blog es www.acuarelasmartinalejo.blogspot.com. Nota que termina en alejo no alej como te comunique anteriormente por eror.
      Saludos.

      Eliminar
    3. Lo que sucede es que en el código de tu imagen tienes dos anchos, uno con 400px y otro con 100px, debes tener sólo uno, el más pequeño. Es decir que tienes esto:
      <img border="0" height="600" width="400" kba="true" src="http://3.bp.blogspot.com/-V1_ujJjcBFo/T7o5OCsXbeI/AAAAAAAACwg/DkS7Dyk8g8c/s400/Foto2279.jpg" class="expando" width="100" />

      Si te fijas ahí ya tienes especificado el ancho y alto, si eliminas eso que está en negrita entonces el código queda así:
      <img border="0" kba="true" src="http://3.bp.blogspot.com/-V1_ujJjcBFo/T7o5OCsXbeI/AAAAAAAACwg/DkS7Dyk8g8c/s400/Foto2279.jpg" class="expando" width="100" />
      De esa forma ya solo queda el ancho de 100px y deberá funcionar bien.

      Eliminar
    4. LO he probado y de acuerdo a tu consejo funciona perfectamente. Pero tengo una pregunta mas: ¿Se puede partir de una imagen inicial un poco mayor ?
      Gracias.

      Eliminar
    5. ¿Más de 100px? Sí, pero la imagen nunca deberá ser mayor al tamaño original, sino no podría expandirse y sucedería lo mismo que antes.
      Saludos.

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

    ResponderEliminar
  41. no puedo, no puedo entrar al bloger "normal" para editar html :(

    ResponderEliminar
    Respuestas
    1. ¿Por qué Cesar? ¿te aparece algún error o qué sucede?

      Eliminar
  42. Lo he aplicado a mi foro (sí, foro) y es genial. MUCHAS GRACIAS!!!

    ResponderEliminar
  43. parce es una chimba funciona al 100%, muchas gracias. esta excelente

    ResponderEliminar
  44. Muchas gracias Potro, genial como siempre

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

    ResponderEliminar
  46. (por si el mensaje anterior no se envió) muchas gracias, lo he aplicado pero... me puedes explicar detalladamente las limitaciones en cuanto a navegador? esque planeo usar esto mucho y quiero saber exactamente si funciona en todos los navegadores o no, si funciona en navegadores antiguos... no me gustaría que algunos usuarios de mi foro, por usar ciertos navegadores entraran y no les funcionara el código (en mi caso, Chrome, y en Opera funciona genial, pero debo asegurarme).

    ResponderEliminar
    Respuestas
    1. Hola DarkK, te puedo decir que en Chrome, Firefox, Opera, Safari, e IE, todos en sus últimas versiones funciona bien. Pero aclaro, en sus últimas versiones que es donde yo lo he probado, en versiones antiguas no lo sé.
      Saludos.

      Eliminar
  47. Gracias por sus comentarios, saludos a todos y todas!

    ResponderEliminar
  48. Gracias, pues bueno, supongo que se puede avisar por un rincón o donde sea que hay que tener la última versión para que funcione :) al menos funciona en todos y claro, con "última versión" es relativo, quizás esto funcionaba desde hacía varias versiones conque mejor aún

    ResponderEliminar
    Respuestas
    1. Es que eso de las versiones es una "responsabilidad" de los usuarios de Internet, la tecnología no se puede detener por quienes no actualizan su navegador, y como aquí tampoco damos soporte para versiones antiguas pues está de más poner esas notas al final ;)

      Eliminar
  49. Buenas, siento volver a preguntar pero... sabes, cuando, por ejemplo, pongo dos imágenes grandes reducidas en la misma fila, si agrandas la primera no pasa nada, pero si agrandas la segunda y se sale de la pantalla (teniendo una pantalla pequeña), la segunda se pone enseguida debajo de la primera, y según qué PC, al moverse la imagen y no estar el ratón encima se vuelve a hacer pequeña, vuelve arriba, y ahí vuelve a hacerse grande, pero no cabe en la pantalla y se pone abajo, etc. Un bucle infinito que puede hacer en algunos PCs que la imagen se vuelva loca si es...

    incluso imágenes pequeñas, si pongo muchas imágenes pequeñas en la misma fila, al agrandar la de más a la derecha y salir de la pantalla se transporta abajo, al salir del ratón vuelve a hacerse pequeña (en algunos PCs no, pero en otros sí), al hacerse pequeña vuelve arriba, toca el ratón, se hace grande, se sale de la pantalla, se va abajo, sale del ratón, se hace pequeña... entiendes? es un jaleo. En algunos PCs, si no mueves el ratón se va abajo pero se queda al máximo de grande, pero en otros creo que al irse abajo cuenta como que el ratón se fue, se hace pequeña y ocurre el jaleo.

    Qué me aconsejas? No se puede hacer que la imagen no salga de la fila, sino que siga agrandándose hasta salirse de la pantalla y abajo salga una barra horizontal para desplazar la pantalla con las flechas de dirección o algo así? Que eso es lo que ocurre si agrandas la primera, que se sale fuera y aparecen barras para desplazarte con las flechas y verla entera, pero eso no pasa con la segunda de la fila y se lía la cosa...

    muchas gracias :)

    ResponderEliminar
    Respuestas
    1. Quizá lo que necesitas es una galería, o un siste de ventanas modales como Shadowbox, porque con este método siempre ocurrirá lo que describes ya que las imágenes no tienen una posición absoluta.
      Shadowbox me parece que podría irte muy bien, aunque en cuestión de ventanas modales hay muchas opciones de dónde escoger.

      Eliminar
  50. Tss, lo de las ventanas modales podría estar bien, pero no consigo implementarlo. En todo caso, mi idea no es una galería, sino que cada imagen es independiente, o sea, ver la imagen al clicarle o pasar por encima, sólo esa, no todas como una galería. En todo caso, en cuanto ponía en mi foro el rel="shadow..." comosea en la imagen se transformaba en rel="nofollow" automáticamente, lo mismo al tratar con lightbox. No pude >_> pero bueno, si no consigo esto, creo que me interesaría más estas imágenes deslizantes, pero hacer eso, que cuando salga del borde de donde esté no se transporte abajo sino que siga abriéndose y saliendo de la pantalla o de donde esté, porque si se transporta abajo se vuelve loco...

    ResponderEliminar
  51. Complementando mi mensaje anterior, he probado navegadores e Internet explorer hace JUSTO lo que quiero, cuando la imagen se agranda y sale del borde sigue en su posición saliendo fuera, y aparecen barras de desplazamiento. Pero en IE las imágenes se colocan mal xD Pero funciona esto. En cambio, en Firefox se vuelve loca y en Chrome va bien si no lo mueves mucho... debe de haber una manera de lograr que en todos los navegadores pase lo que pasa en IE @_@

    ResponderEliminar
  52. Bue, al final esto lo usaré para un juego de mi foro, conque simplemente aviso que, si tienen pantallas pequeñas, descarguen Google Chrome, en el cual no hay errores (si la imagen se agranda y sale de la pantalla se pasa a la fila de abajo pero ahí se agranda entera si no mueves el ratón), y si tienen pantallas grandes cualquiera. A parte de eso no usaré este código para cosas oficiales del foro, sólo para el juego que tengo planeado y para éste avisaré lo de que si tienen pantallas pequeñas bajen Chrome, conque, si no hay solución al problema éste que dije en mi anterior mensaje no pasa nada, ya funcionará bien =) gracias

    ResponderEliminar
    Respuestas
    1. Me parece muy acertada la opción que propones :)

      Eliminar
  53. Buenas Potro, soy nuevo por aquí y no tengo experiencia en esto, he hecho lo que tu dices y solo me funciona cuando pongo una imagen aislada, como la que tu tienes de ejemplo.
    El caso es que yo querría hacer eso mismo pero con varias imágenes dentro de una tabla, y no me funciona, ¿por que puede ser?
    Gracias y un saludo.

    ResponderEliminar
  54. Hola Potro, soy nuevo por aquí y no tengo experiencia en esto, he hecho lo que tu explicas y solo me funciona si lo utilizo para una imagen aislada, como la de tu ejemplo.
    El caso es que quiero hacer eso mismo pero con varias imágenes dentro de una tabla, y no me funciona, ¿por que?
    Gracias y un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Alex, ¿me puedes mostrar la entrada donde lo has hecho y no te funciona?

      Eliminar
  55. Hola, me parece super chulo el efecto, pero no me sale... :(

    ResponderEliminar
  56. Hola, me parece super chulo el efecto, pero no me sale... :(

    ResponderEliminar
  57. Hola, me parece super chulo el efecto, pero no me sale... :(

    ResponderEliminar
  58. Potro Me Podrías Ayudar Las Imágenes Se Expande Por Dentro de La Columna Central y Pues Deberían Hacerlo Por Encima .... Me Podrías Decir Que Debo Hacer ¿? Te Dejo El Blog Para Que Mires Es El De Pruebas Están Debajo de El Símbolo de La Cruz Roja http://edcreativo.enteratecali.net/

    ResponderEliminar
    Respuestas
    1. De hecho lo normal es que se vea así, porque las sidebar siempre tienen la indicación de que los elementos que "sobren" se oculten.
      Puedes cambiarlo si quieres, sería cambiar esto:
      #lsidebar-wrapper{width:160px;float:left;margin:0px 15px 0px 0px;padding:0px;word-wrap:break-word;overflow:hidden;text-shadow:0px 1px 0px #000;}

      Por esto:
      #lsidebar-wrapper{width:160px;float:left;margin:0px 15px 0px 0px;padding:0px;word-wrap:break-word;z-index: 9;position: relative;text-shadow:0px 1px 0px #000;}

      Eliminar
  59. ola esta muy bueno tu post, pero al pasar el puntero por encima la imagen se expande demaciado y solo quiero que se vea normal, y como le hago para que quede en el centro por que me queda en la izquierda.
    te agradesco

    ResponderEliminar
    Respuestas
    1. De hecho se expande al tamaño normal, es decir, al original que tengas en la imagen.
      Para lo otro tendría que ver en cuál blog lo has puesto, ya que se debería expandir hacia el centro.

      Eliminar
  60. potro gracias por tus aportes, como puedo hacere ste efecto para que abra mas rapido?
    gracias

    ResponderEliminar
    Respuestas
    1. Prueba cambiando los valores de 20 : 40, speed = a? 40 : 20;

      Eliminar
  61. Hola Potro, estoy iniciando en el facinante mundo blogger y necesito de tu ayuda por fa'...!!!! puse el primer codigo que das (el largo)pero no entiendo lo ultimo que dices que toca hacer:

    "Y luego en tus entradas o donde lo quieras poner, usa este código para tus imágenes" ????????????????'


    Que quieres decir con esto: pongo el segundo código en editar codigo HTML o donde...???? realmente no te entiendo. Dices que en cualquier parte pero donde es en cualquier parte...!!! Como te dije arriba puse el codigo largo pero necesito de lo segundo que dices para poder ver el efecto....Por fa' ayudame...!!!

    ResponderEliminar
    Respuestas
    1. Hola Pepe, en cualquier parte puede ser en un gadget HTML/Javascript o en alguna entrada.
      ¡Saludos!

      Eliminar
  62. Hola! disculpa,quería saber si aquí hay alguna entrada de efecto para imagenes en blogger, pero un efecto que una imagen está oscura y luego si le pones el cursor encima se pone con mas luz?
    Si sabes me pasas el dato!! porfavor.

    ResponderEliminar
    Respuestas
    1. Mira estas entradas:
      http://ciudadblogger.com/2009/08/efecto-de-opacidad-en-las-imagenes.html
      http://ciudadblogger.com/2009/10/efecto-de-opacidad-en-una-imagen-al.html
      http://ciudadblogger.com/2010/01/efecto-de-opacidad-con-desvanecimiento.html

      Eliminar
  63. Problema resuelto...!!! Amigo de verdad muchas gracias por tomarte tu tiempo para escribir estos post y sobre todo por responder nuestras inquietudes. Saludos.

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

    ResponderEliminar
    Respuestas
    1. El código de la imagen está mal, mira de nuevo cómo debe quedar, de ser preciso copia el código de la imagen de esta entrada y ponlo en tu blog, ya sólo sustituye la URL de la imagen.

      Eliminar
  65. HOLA POTRO QUERIA PREGUNTARTE DONDE SEPEGA ESTE CODIGO?

    luego en tus entradas o donde lo quieras poner, usa este código para tus imágenes:
    img border="0" src="URL de la imagen" class="expando" width="100"

    ResponderEliminar
    Respuestas
    1. Pues ahí donde dice, en las entradas de tu blog, donde quieras que aparezcan las imágenes :)

      Eliminar
  66. Gracias esta chido tu ejemplo lo necesitaba ´para un banner :)

    ResponderEliminar
  67. HOLA POTRO SOY NUEVA HE ESTADO EN TU PAGUINA Y ME FACINA, PUEDO USAR ALGUN MATERIAL TUYO PARA CREAR UN BLOG O COMO LE HAGO GRACIAS POR COMPARTIR TU TRABAJO UN ABRAZO-

    ResponderEliminar
  68. HOLA POTRO TE FELICITO POR TU TRABAJO COMO QUISIERA HACER UN BLOG,COMO LO HAGO GRACIAS POR TU AYUDA

    ResponderEliminar
    Respuestas
    1. Gracias TIRZA perlaza ortiz, si ya tienes una cuenta en Blogger, sólo crea un blog, desde el escritorio verás un botón que dice "Nuevo blog".
      Saludos.

      Eliminar
  69. Hola Potro, intente poner esta aplicacion, pero no me resulta, lo que pasa es que las fotos que subo todas la he tomado yo, salvo 1, por tanto eso de la URL me complica, como lo hago, yo sube las fotos desde mi PC, en mis documentos.

    Agradeceria la ayuda.

    Saludos,
    http://losverdugofuenzalida.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola, las imágenes para que puedan verse en Internet deben primero estar subidas a la red, puedes subirlas desde el mismo editor de entradas de Blogger, o desde Picasweb:
      http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

      Saludos.

      Eliminar
  70. Bien, este efecto me cae como anillo al dedo. El blog q estoy creando es para una tienda, así q este efecto se lo pondré a las muestras de lo q se vende para q se aprecien mejor... Gracias x el tuto...

    ResponderEliminar
  71. Potro tu sitio web ha sido una escuela para mi me ha servido de mucha ayuda para la consolidacion de mi proyecto web todo lo que he aplicado en mi blog lo he aprendido aqui tus tutoriales son muy buenos espero que continues con tu labor ya que nos haras falta por muchos años mas por que para nadie es un secreto que todos los dias sale una novedad en este mundillo del los bloggeros te mi invito a visitar mi blog y si es posible me des algunos cosejos para mejoralo esta es la direccion clicgamers punto com lo pongo haci por que se que no permites que dejemos el lick o enlace...

    ResponderEliminar
    Respuestas
    1. Para los consejos soy muy malo yondry pero ye agradezco mucho tu amable comentario, de verdad gracias!

      Eliminar
  72. hola potro.... yo hice el trabajo en la plantilla pero el último codigo no se donde ponerlo.... lo puse en mis estradas y cambie el url de la imagen pero no me funcionar,,,, que hice mal? donde tengo que pegar el último codigo?... gracias

    ResponderEliminar
  73. listo lo probe en un HTML/JavaScript y funciona pero en la entrada no pude ,,,,, espero sus instrucciones!! gracias por el trabajo que hacen.

    ResponderEliminar
  74. Hola Potro!
    Te descubrí ayer pero ya estoy enganchada a tus entradas.
    Una pregunta: hay alguna manera de poder poner este efecto en las imágenes y que, al clikar encima se abra igualmente el modo pantalla completa?

    Muchas gracias.

    .Mireia.

    ResponderEliminar
    Respuestas
    1. Bienvenida a Ciudad Blogger Mireia :)
      ¿A pantalla completa te refieres a que se abra con el Lightbox que trae Blogger? Si es así entonces en vez de usar este código:
      <img border="0" src="URL de la imagen" class="expando" width="100" />

      Usarías este:
      <a href="URL de la imagen"><img border="0" src="URL de la imagen" class="expando" width="100" /></a>

      Ahí deberás poner la URL de la imagen dos veces donde se indica.
      Saludos.

      Eliminar
    2. Uau!
      Sí, me refería a Lightbox, exacto.
      Muchísimas gracias!

      Eliminar
  75. Si quiero ponerle ese efecto nada mas a mi imagen de portada como haria?

    ResponderEliminar
  76. hola potro buenas noches compa. mire y como se haria un efecto lupa. es que estoy creando un blog de tienda virtual y no se como colocar efecto lupa

    ResponderEliminar
    Respuestas
    1. Tal vez esto te sirva:
      http://ciudadblogger.com/2010/09/aumentar-imagenes-con-zoom-it.html
      http://ciudadblogger.com/2010/10/efecto-de-zoom-en-las-imagenes-con.html

      Eliminar
  77. Hola! he combinado dos de tus post; el de agrandar con el de las esquinas redondeadas y me ha salido esto:

    http://enunmundodondelashojaslloran.blogspot.com/

    - como ves tengo un problema con el código porque las imágenes se hacen demasiado grandes.

    - las que están a la derecha se amplian hacia la derecha y acaban por no verse.

    ¿hay solución?

    gracias

    ResponderEliminar
    Respuestas
    1. La imagen se expande a su tamaño original, quizá sería mejor si pones imágenes más pequeñas en dimensiones.

      Eliminar
  78. excelente ..gracias...ya le puse a mi blog ..grcias.

    ResponderEliminar
  79. Excelente efecto Potro, ahora me pregunto si al aplicar este efecto las imagenes ya no estarian tan optimizadas desde el punto de vista SEO.
    Por el tema de los atributos TITLE y ALT etc

    ResponderEliminar
    Respuestas
    1. Al código de la imagen siempre puedes añadirle el TITLE y el ALT sin ningún problema ;)

      Eliminar
    2. Muchas gracias Potro. Ahora tengo una dudilla en relación a poner música en un blog. Yo no queria un reproductor en el blog, sino un sistema muy sencillo para que se reproduzca una canción determinada automáticamente al entrar.
      Pensaba en utilizar este código:



      Pero no me funciona en IE ni en Firefox, solo en Chrome. ¿Que opinas?¿Puede modificarse este código para que funcione en otros exploradores? ¿Que me recomiendas?

      Eliminar
    3. No he podido ver el código pero si quieres que tenga autoplay tendrás que usar un reproductor. Este es uno muy sencillo que puede servirte:
      http://ciudadblogger.com/2009/01/reproductor-dewplayer.html

      Eliminar
  80. Gracias Potro, pero no me sale. ¿Podrías, por favor, mirarme este blog de pruebas para ver qué hago mal?, es el primer gadchet de la sidebar.

    http://bloggerdepruebas1.blogspot.com.es/

    Creo que el problema se encuentra en el archivo mp3 subido a Dropbox, sitio que recomiendas en otras entradas. El archivo es este:

    https://www.dropbox.com/s/t503ettalm155no/5I-%20Alicia%20Keys%20-%20Girl%20On%20Fire.mp3?m

    ResponderEliminar
    Respuestas
    1. No comprendo, ¿qué tiene que ver lo de aumentar imágenes con un archivo mp3? o.O

      Eliminar
    2. jeje. No tiene nada que ver con imágenes, estábamos hablando de música. Te estoy contestando a lo que tú me dijiste:

      ""No he podido ver el código pero si quieres que tenga autoplay tendrás que usar un reproductor. Este es uno muy sencillo que puede servirte:
      http://ciudadblogger.com/2009/01/reproductor-dewplayer.html""

      Cuando digo que no me sale, me refiero al funcionamiento del reproductor que dices.

      ¿Podrías, por favor, mirarme este blog de pruebas para ver qué hago mal?, es el primer gadchet de la sidebar.

      http://bloggerdepruebas1.blogspot.com.es/

      Creo que el problema se encuentra en el archivo mp3 subido a Dropbox, sitio que recomiendas en otras entradas. El archivo es este:

      https://www.dropbox.com/s/t503ettalm155no/5I-%20Alicia%20Keys%20-%20Girl%20On%20Fire.mp3?m

      Eliminar
    3. Ahhhh, tienes razón, como no le diste "Responder" no me fijé que era una continuación del comentario de arriba.
      Sí, el problema es con el archivo subido, o más bien, con la URL. Cambia el www. por dl.
      Además de eso te sugiero que le cambies el nombre al archivo y lo subas de nuevo, de preferencia que el archivo no tenga espacios ni caracteres especiales.

      Eliminar
    4. Muchas gracias Potro, en Dropbox, como no me aparece la opción de “Copy public link” tenía que entrar en dropbox y copiaba la dirección http de la barra de direcciones, pero suponía que no estaba bien. ¿Debo cambiar siempre el www. por dl.?, curioso. Bueno, quiero agradecerte tu ayuda y enorme generosidad al ayudarnos tanto a tanta gente. Gracias!!!

      Eliminar
    5. Sí, desde que Dropbox cambió (ignoro porqué lo hizo) desapareció lo de "Public link", ahora hay que hacer siempre ese cambio :/

      Eliminar
  81. Hola muy bueno tienes heramientas muy necesarias para un blog.
    pero de algun manera me gustaria que visiten y mi blog y me den ideas por favor se los agradeceria
    saludos desde new york

    http://exitoglobalsigloxxi.blogspot.com/

    ResponderEliminar
  82. hola que buen blog apenas de con el ayer pero le eh sacado el máximo provecho, quería preguntarte si este código que das para ampliar la imagen se puede utilizar en wordpress?

    gracias, felicitaciones por tu blog.

    ResponderEliminar
    Respuestas
    1. Gracias juan felipe y bienvenido a Ciudad Blogger :)
      Supongo que sí puede utilizarse, pero todo lo que hay aquí es probado únicamente en Blogger, así que no podría asegurarte que funcione en otras plataformas.

      Saludos!

      Eliminar
  83. Hola Potro, me gustó mucho la idea de agrandar las imágenes con el cursor, pero quiero saber en que parte de la entrada debo pegar el ultimo codigo que va en la entrada y si debo ponerlo en la pestaña redactar o en html??

    Ayuda y gracias, visita mi blog y sugiereme algo
    tecno-jham.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola, en la parte de la entrada donde quieras mostrar la imagen, siempre estando en la pestaña HTML.
      Saludos.

      Eliminar
  84. hola potro, por favor dime donde pongo el codigo con la url de la imagen en mi entrada

    ResponderEliminar
    Respuestas
    1. Pues ahí, en tu entrada, justo donde la escribes ;)

      Eliminar
  85. quiero aser esto mismo de agrandar la imagen pero dentro de este codigo de mi pagina http://www.magnacelular.com.mx/principal.php

    ResponderEliminar
    Respuestas
    1. Sólo lo he probado en Blogger, no sé si se pueda hacer en otras plataformas.

      Eliminar
  86. espero me puedas ayudar potro se ven heniales tus codigos

    ResponderEliminar
  87. Hola Potro,

    ¿hay alguna forma de modificar el espacio entre imagen e imagen en el post? ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Hola, sí, sí se puede, busca en los estilos de tu plantilla la parte que diga .post img, ahí debe haber un padding, ese padding es el espacio, si no lo tiene agrégalo:
      .post img {
      padding:20px;
      }

      Eliminar
  88. De mucha ayuda, pero necesito otros efectos me podes ayudar por favor?

    ResponderEliminar
  89. DE mucha ayuda, pero necesito otros efectos, me podes ayudar por favor. ?

    ResponderEliminar
  90. Súper lindo, me encantó, la verdad pensé que no me iba a salir pero quedó perfecto!!! Si quieren lo peden mirar!! http://lasmilvidasdeunlector.blogspot.com

    ResponderEliminar
  91. potro pude colocar el codigo pero como puedo hacer para que la imagen no sea por URL si no que esta foto seria familiar para mi pagina personal como puedo hacerle para que sea con el archivo, no puedo subir mi foto a internet por eso no quiero ocupar URL

    ResponderEliminar
  92. Con este código se puede ampliar la imagen sin que afecte el resto.

    .zoomIt{
    display:block!important;
    -webkit-transition:-webkit-transform 1s ease-out;
    -moz-transition:-moz-transform 1s ease-out;
    -o-transition:-o-transform 1s ease-out;
    -ms-transition:-ms-transform 1s ease-out;
    transition:transform 1s ease-out;
    }
    .zoomIt:hover{
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
    }

    Por tanto asi quedaria el codigo

    ResponderEliminar
  93. q tal potro, he intentado el truco pero no me sale la imagen,todo lo he puesto como tu dices pero... que va.
    creo un post, le pongo titulo y debajo la imagen y su sinopsis, salen todas la letras pero no la imagen y el titulo de mas arriba de la imagen tampoco...

    ResponderEliminar
  94. una duda, quiero ponerlo en mi blog www.onlypunx.blogspot.com , en una columna, como se agrandria la imagen? solo el tamaño que tenga la columna o el total de la imagen original?

    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?