Este bonito efecto me lo he encontrado en Theme Forest, y sirve para obtener una vista previa de imagenes cuando pasamos el cursor del mouse sobre una imagen. Mira estos ejemplos:
Si quieres agregar este efecto en tu blog solo sigue los siguientes pasos:
Ve a edición de HTML, busca </head> y justo antes pega el siguiente codigo:
<style type='text/css'>
#lightbox {
background-color:#EAEAEA;
border:1px solid #BABABA;
padding:5px;
width:590px;
min-height:300px;
}
</style>
<script src='http://www.fileden.com/files/2009/4/24/2416448/lightbox_preview.txt' type='text/javascript'/>
<script src='http://www.fileden.com/files/2009/4/24/2416448/lightview.txt' type='text/javascript'/>
y eso es todo, el efecto ha sido agregado a tu plantilla. Al momento de poner una imagen con vista previa solo debes pegar las imagenes dentro de una capa con el id(nombre unico) "doc_body" con la siguiente estructura:
<div id="doc_body">
<img alt="texto alternativo al pasar el cursor" onmousemove="showlightbox(this, 'url-imagen-en-tamaño-mayor');" src="url-imagen-en-tamaño-menor" />
</div>
Y si quieres añadir un enlace seria:
<div id="doc_body">
<a href="url-de-destino">
<img alt="texto alternativo al pasar el cursor" onmousemove="showlightbox(this, 'url-imagen-en-tamaño-mayor');" src="url-imagen-en-tamaño-menor" />
</a>
</div>
Uno de los ejemplos que estoy usando es:
<div id="doc_body">
<img alt="title" border="0" height="80" onmousemove="showlightbox(this, 'http://s3.envato.com/files/141692/01_presentation.__large_preview.jpg');" src="http://s3.envato.com/files/141691.jpg" width="80" />
</div>
11 comentarios
es padre todo, pero lo mas padre es ya voy a ser millonario. y si de plano te voy a comprar una novia, jajaja no es cierto, saludos por cierto gracias por el tipo de #footer hasta la vista
y tienes un blog genialisisisisismo, oye por cierto saludos a la dueña de Gem@blog
Posted on 7/18/2009 10:30 p. m.
esta espectacularr
Posted on 7/19/2009 12:45 a. m.
como hiciste este efecto para los emoticones?..me encatoooooooooooooooooo
es fabulosoooooooooooooo
=)
Posted on 7/19/2009 12:47 a. m.
Gracias In-Side :O, espero volvcerme millonario tambien jaja (de felicidad)...!! y por lo de gema, puedes decirselo tu mismo en su espacio.
Es muy util Elizabetha y resulta llamativo tambien, lo de los emoticones puedes verlo en esta entrada.
Posted on 7/19/2009 8:36 a. m.
Miguel salen dos cajitas de comentarios, quizás te lo han dicho ya???...genial el efecto, lo he visto en las páginas de diseño, fotografías como vista previa quizás???
PD: si te haces millonario tira unos euros por aquí :)
Posted on 7/20/2009 3:21 a. m.
Asi es Graciela por ahora salen dos cajitas (es un error en firefox), pero se me ha ocurrido como arreglarlo vamos a ver como me va.
Ese efecto me parece bueno, puedes utilizarlo en muchas partes :)
PD: El que se haga rico primero comparte :O
Posted on 7/20/2009 7:41 a. m.
Hola amigo te tengo dos consultas, la primera cono hago para que el efecto solo se vea en las entradas individuales y no en la principal y la otra es que la imagen grande salga en el centro, por que si te daz cuenta sale a un lado del puntero. Gracias esta muy bueno el efecto. :O
Posted on 7/25/2009 4:59 p. m.
Hola Cargohe:
1- hace poco hablaba de los codigos condicionales para hacer un aviso flotante, resulta que eso no solo se aplica en el body sino tambien en el header; puedes meter codigos css o javascript. Quedaria asi(reemplaza esto por el codigo que habias puesto):
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#lightbox {
background-color:#EAEAEA;
border:1px solid #BABABA;
padding:5px;
width:590px;
min-height:300px;
}
</style>
<script src='http://www.fileden.com/files/2009/4/24/2416448/lightbox_preview.txt' type='text/javascript'/>
<script src='http://www.fileden.com/files/2009/4/24/2416448/lightview.txt' type='text/javascript'/>
</b:if>
2- No conozco una manera de hacerlo porque el script es muy grande y no lo manejo bien...además parece ser que esta inclinado a seguir al cursor asi que creo que no es posible.
Posted on 7/25/2009 7:31 p. m.
me encanta seguro que lo pongo un abrazo
Posted on 7/28/2009 10:20 a. m.
Es un bonito efecto, lo mejor es lo fácil que se agrega a la plantilla y que no produce ningun problema con librerias como jQuery ni scriptaculous.
saludos :)
Posted on 7/28/2009 5:39 p. m.
esta muy bien
Posted on 10/19/2009 9:21 a. m.
Publicar un comentario en la entrada al viejo estilo