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:
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'>Y luego en tus entradas o donde lo quieras poner, usa este código para tus imágenes:
//<![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>
<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.
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? ;)
la verdad no potro gracias y que raro sea el más visitado y ningun comentario o_0?
ResponderEliminarlo publico hace segundos... XD gracias potro muy bueno
EliminarMe has agarrado dándole click en Publicar :)
EliminarAMIGO COMO PUEDO PONER UN ENLACE ENCIMA DE ESTA IMAGEN CANDO SEAGRANDA
EliminarAmigo como puedo poner un enlace encima de esa imagen agrandada
EliminarUsa el código así Fernando:
Eliminar<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.
Hola es que es la primera vez que edito el html.... y no sé qué estoy haciendo mal porque no me funciona -_-
Eliminarhuy un error muy decuidado de mi parte no se en que andaba pensando jejeje e_e bueno recomendado a redes sociales :D
ResponderEliminarCompañero hay que citar las fuentes.
EliminarEn 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.
Eliminarnada 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¡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 :)
ResponderEliminarJaja, eso ha parecido una porra deportiva, habrá que ensayarla con animadoras :D
EliminarJajaja, 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!
EliminarMuy bueno. Seguro le voy a dar un muy buen uso. Gracias.
ResponderEliminarTambién estoy seguro que sí :)
EliminarMuy bueno Potro, gracias por el dato.
ResponderEliminarPor nada Myrna :)
EliminarBonito, 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).
ResponderEliminarNo sé de dónde sacas tantas ideas para todas las millones de entradas que tienes ya :D
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¡¡¡¡Es precioso!!!!... es una joya, una maravilla.
ResponderEliminarMuchí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)
Y con esas fotos tan lindas que tienes se verá muy bien :)
EliminarBesos.
Gracias por el halago, :)), sonrojos aparte.
EliminarPor 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
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)
EliminarYo pensaba en un fotógrafo menos "conocido"...;), vamos, que ni él mismo se lo cree...:p
EliminarAparte, 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
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.
ResponderEliminarGracias
Gilberto
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.
EliminarEsta genial Potro :D
ResponderEliminarPero 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.
Creo que estamos sincronizados, porque cuando vi ese comentario también pensé lo mismo respecto al like :)
EliminarEstupendo efecto, potro, no conzco javascript pero seguiré aprendiendo para saber programar algún día.
ResponderEliminarNos compartes lo que aprendas :)
EliminarMuchas gracias portro!!!
ResponderEliminaryo cnozco uno igual que lo hago
con
Moz transition me es mas facil jeje
Es fácil y con muchas ventajas el método que usas, el único inconveniente es que no todos los navegadores reconocen las transiciones.
EliminarA ti por tu visita ;)
ResponderEliminarte 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??..
ResponderEliminarExactamente 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.
EliminarGracias, 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.
ResponderEliminarEspero que así sea :)
EliminarSaludos.
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.
ResponderEliminarSi 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.
EliminarPor 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>
Wow! Está buenísimo! ^^ Lo uso!
ResponderEliminarGracias 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
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í ;)
Eliminaresta 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
ResponderEliminarGracias, de momento dejaré las que tengo, ya después consideraré ponerlas ;)
EliminarGracias nuevamente :)
ok :D
Eliminarbuen aporte ^^
ResponderEliminarpero como le ago si tengo un monton de imagenes=??
ResponderEliminarEntonces 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.
EliminarVaya, se ve bastante vistosa esta forma de ampliar las imágenes. Me gusta mucho.
ResponderEliminarEl efecto es excelente, el código es muy largo :)
ResponderEliminarNo lo es tanto, hay otros códigos mucho más extensos ;)
EliminarHola 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
ResponderEliminarGracias por tu confianza Hector, más adelante publicaré sobre ello.
EliminarSaludos.
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??
ResponderEliminarGracias.
Mi correo:elenapepo@hotmail.es
Mil Gracias
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.
EliminarSaludos.
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 ?
ResponderEliminarP.D: Muy bueno el truco.
Sí NicolayDV, sí se puede. Cambia en el script esta línea:
Eliminardocument.addEventListener('mouseover', expConIm, false);
Por esta:
document.addEventListener('click', expConIm, false);
muchísimas grácias Potro !!! :)
EliminarPues 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"
ResponderEliminarGracias, Potro
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.
EliminarSaludos.
Conseguido...mil gracias!
EliminarPerdona 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
ResponderEliminarpero no logro realizarlo, podras ojearlo y de pronto postear algo al respecto de como implementarlo?
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 :)
EliminarEste comentario ha sido eliminado por el autor.
EliminarJa 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
Eliminarhttp://tubanner.blogspot.com/ :)
muy bueno e ingenioso... me gustó... comenzaré a preocuparme por mi blog nuevamente y obvio asesorandome por el mejor o no.. Potrito? Besos amigo!
ResponderEliminarNo soy el mejor pero siempre será un gusto tenerte por aquí :)
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarcon el cambio de blogger.. no tengo idea donde va todo. ayudame potro. no me resulta encontrar la edicion de HTML uff todo cambiado :/ grxs!!
ResponderEliminarEn la nueva interfaz está en Plantilla > Edición de HTML.
Eliminarrealicé todos los pasos a seguir, y no me resulta.. en qué podré estar fallando?? digo la expancion de la imagen ahí no sucede nada
Eliminarrealicé 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
ResponderEliminarpor si no te acuerdas http://fotos-amigos-forever.blogspot.com/
Tienes todo este código en la entrada:
Eliminar<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" />
aaaaaaaaaah te amoooooo, me resultó.. gracias mi potro querido... lo dejaré grabado para no olvidar... chaus, besos, sabía que me ayudarias!!!!!!
ResponderEliminarHola Potro, perdón por la molestia.
ResponderEliminarEl 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 !! :)
Me parece que no NicolayDV, al menos en el script no encuentro algún dato que se pueda modificar para hacer tal cambio.
EliminarEstá 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:)
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 ;)
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarGracias 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.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola 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.
ResponderEliminarNo FarmAdict, no tiene esa opción.
EliminarHermano, 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
ResponderEliminarOtra 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! :)
ResponderEliminarHola Christian, ignoro porqué se reduzca, pero para centrarla encierra el código de la imagen entre <center> y </center>
Eliminares simplemente HERMOSO el efecto.
ResponderEliminar¿Verdad que sí? :)
EliminarGracias 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!
ResponderEliminarEs cierto Luis, fácilmente se podría hacer una galería sencilla pero atractiva :)
EliminarPotro 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?
EliminarGracias por tu ayuda
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.
EliminarCreo 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?
ResponderEliminarGracias.
Hola F.Martin Alejo, ¿en cuál blog lo has puesto?
EliminarGracias 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.
EliminarSaludos.
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:
Eliminar<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.
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 ?
EliminarGracias.
¿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.
EliminarSaludos.
Este comentario ha sido eliminado por el autor.
ResponderEliminarno puedo, no puedo entrar al bloger "normal" para editar html :(
ResponderEliminar¿Por qué Cesar? ¿te aparece algún error o qué sucede?
EliminarLo he aplicado a mi foro (sí, foro) y es genial. MUCHAS GRACIAS!!!
ResponderEliminarparce es una chimba funciona al 100%, muchas gracias. esta excelente
ResponderEliminarMuchas gracias Potro, genial como siempre
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar(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).
ResponderEliminarHola 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é.
EliminarSaludos.
Gracias por sus comentarios, saludos a todos y todas!
ResponderEliminarGracias, 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
ResponderEliminarEs 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 ;)
EliminarBuenas, 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...
ResponderEliminarincluso 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 :)
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.
EliminarShadowbox me parece que podría irte muy bien, aunque en cuestión de ventanas modales hay muchas opciones de dónde escoger.
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...
ResponderEliminarComplementando 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 @_@
ResponderEliminarBue, 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
ResponderEliminarMe parece muy acertada la opción que propones :)
EliminarGracias por compartir!
ResponderEliminarBuenas 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.
ResponderEliminarEl 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.
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.
ResponderEliminarEl 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.
Hola Alex, ¿me puedes mostrar la entrada donde lo has hecho y no te funciona?
EliminarHola, me parece super chulo el efecto, pero no me sale... :(
ResponderEliminarHola, me parece super chulo el efecto, pero no me sale... :(
ResponderEliminarHola, me parece super chulo el efecto, pero no me sale... :(
ResponderEliminar¿En cuál blog lo has puesto, EvaLayna?
EliminarPotro 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/
ResponderEliminarDe hecho lo normal es que se vea así, porque las sidebar siempre tienen la indicación de que los elementos que "sobren" se oculten.
EliminarPuedes 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;}
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.
ResponderEliminarte agradesco
De hecho se expande al tamaño normal, es decir, al original que tengas en la imagen.
EliminarPara lo otro tendría que ver en cuál blog lo has puesto, ya que se debería expandir hacia el centro.
potro gracias por tus aportes, como puedo hacere ste efecto para que abra mas rapido?
ResponderEliminargracias
Prueba cambiando los valores de 20 : 40, speed = a? 40 : 20;
EliminarHola 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:
ResponderEliminar"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...!!!
Hola Pepe, en cualquier parte puede ser en un gadget HTML/Javascript o en alguna entrada.
Eliminar¡Saludos!
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?
ResponderEliminarSi sabes me pasas el dato!! porfavor.
Mira estas entradas:
Eliminarhttp://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
Problema resuelto...!!! Amigo de verdad muchas gracias por tomarte tu tiempo para escribir estos post y sobre todo por responder nuestras inquietudes. Saludos.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEl 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.
EliminarHOLA POTRO QUERIA PREGUNTARTE DONDE SEPEGA ESTE CODIGO?
ResponderEliminarluego 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"
Pues ahí donde dice, en las entradas de tu blog, donde quieras que aparezcan las imágenes :)
EliminarGracias esta chido tu ejemplo lo necesitaba ´para un banner :)
ResponderEliminarHOLA 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-
ResponderEliminarHOLA POTRO TE FELICITO POR TU TRABAJO COMO QUISIERA HACER UN BLOG,COMO LO HAGO GRACIAS POR TU AYUDA
ResponderEliminarGracias 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".
EliminarSaludos.
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.
ResponderEliminarAgradeceria la ayuda.
Saludos,
http://losverdugofuenzalida.blogspot.com/
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:
Eliminarhttp://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html
Saludos.
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...
ResponderEliminarGracias a ti por tu visita!
EliminarPotro 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...
ResponderEliminarPara los consejos soy muy malo yondry pero ye agradezco mucho tu amable comentario, de verdad gracias!
Eliminarhola 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
ResponderEliminarlisto lo probe en un HTML/JavaScript y funciona pero en la entrada no pude ,,,,, espero sus instrucciones!! gracias por el trabajo que hacen.
ResponderEliminarEn la entrada es lo mismo David. Saludos!
EliminarHola Potro!
ResponderEliminarTe 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.
Bienvenida a Ciudad Blogger Mireia :)
Eliminar¿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.
Uau!
EliminarSí, me refería a Lightbox, exacto.
Muchísimas gracias!
Si quiero ponerle ese efecto nada mas a mi imagen de portada como haria?
ResponderEliminar¿A cuál imagen de portada?
Eliminarhola 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
ResponderEliminarTal vez esto te sirva:
Eliminarhttp://ciudadblogger.com/2010/09/aumentar-imagenes-con-zoom-it.html
http://ciudadblogger.com/2010/10/efecto-de-zoom-en-las-imagenes-con.html
Hola! he combinado dos de tus post; el de agrandar con el de las esquinas redondeadas y me ha salido esto:
ResponderEliminarhttp://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
La imagen se expande a su tamaño original, quizá sería mejor si pones imágenes más pequeñas en dimensiones.
EliminarExcelente efecto Potro, ahora me pregunto si al aplicar este efecto las imagenes ya no estarian tan optimizadas desde el punto de vista SEO.
ResponderEliminarPor el tema de los atributos TITLE y ALT etc
Al código de la imagen siempre puedes añadirle el TITLE y el ALT sin ningún problema ;)
EliminarMuchas 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.
EliminarPensaba 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?
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:
Eliminarhttp://ciudadblogger.com/2009/01/reproductor-dewplayer.html
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.
ResponderEliminarhttp://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
No comprendo, ¿qué tiene que ver lo de aumentar imágenes con un archivo mp3? o.O
Eliminarjeje. No tiene nada que ver con imágenes, estábamos hablando de música. Te estoy contestando a lo que tú me dijiste:
Eliminar""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
Ahhhh, tienes razón, como no le diste "Responder" no me fijé que era una continuación del comentario de arriba.
EliminarSí, 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.
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!!!
EliminarSí, desde que Dropbox cambió (ignoro porqué lo hizo) desapareció lo de "Public link", ahora hay que hacer siempre ese cambio :/
EliminarHola muy bueno tienes heramientas muy necesarias para un blog.
ResponderEliminarpero 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/
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?
ResponderEliminargracias, felicitaciones por tu blog.
Gracias juan felipe y bienvenido a Ciudad Blogger :)
EliminarSupongo 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!
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??
ResponderEliminarAyuda y gracias, visita mi blog y sugiereme algo
tecno-jham.blogspot.com
Hola, en la parte de la entrada donde quieras mostrar la imagen, siempre estando en la pestaña HTML.
EliminarSaludos.
hola potro, por favor dime donde pongo el codigo con la url de la imagen en mi entrada
ResponderEliminarPues ahí, en tu entrada, justo donde la escribes ;)
Eliminarquiero aser esto mismo de agrandar la imagen pero dentro de este codigo de mi pagina http://www.magnacelular.com.mx/principal.php
ResponderEliminarSólo lo he probado en Blogger, no sé si se pueda hacer en otras plataformas.
Eliminarespero me puedas ayudar potro se ven heniales tus codigos
ResponderEliminarHola Potro,
ResponderEliminar¿hay alguna forma de modificar el espacio entre imagen e imagen en el post? ¡Gracias!
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:
Eliminar.post img {
padding:20px;
}
No se como se hace ='(
ResponderEliminarGracias 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.
ResponderEliminarDe mucha ayuda, pero necesito otros efectos me podes ayudar por favor?
ResponderEliminarDE mucha ayuda, pero necesito otros efectos, me podes ayudar por favor. ?
ResponderEliminarNo sé qué otros efectos quieras :/
EliminarSú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
ResponderEliminarTienes que subir las imágenes a Internet:
ResponderEliminarhttp://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html
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
ResponderEliminarNo hay manera miguel, el blog funciona a través del Internet, sin estar en línea el blog o sus elementos no pueden visualizarse.
EliminarCon este código se puede ampliar la imagen sin que afecte el resto.
ResponderEliminar.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
No me sirve
ResponderEliminargrandioso!
ResponderEliminaruna 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?
ResponderEliminarLa mejor forma de saberlo es poniéndolo ;)
EliminarQuería poner la imagen en pequeño y que se agrande y no hacierto a ponerla. El texto de HTML es muy largo, no sé si hay que copiarlo entero y al subir las imágenes doy a subir y la busco en el ordenador no en URL entonces no sé dónde poner el texto de html
ResponderEliminarQuizá el problema esté en la URL de la imagen, habría que ver la entrada donde tienes el problema.
ResponderEliminar