Acabo de publicar Regala Google Chrome por navidad |

lightview

By Miguel Ángel Jiménez Achinte On 21:53

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

  1. 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.

     
  2. como hiciste este efecto para los emoticones?..me encatoooooooooooooooooo

    es fabulosoooooooooooooo

    =)

    Posted on 7/19/2009 12:47 a. m.

     
  3. 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.

     
  4. 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.

     
  5. 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.

     
  6. 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.

     
  7. 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 == &quot;item&quot;'>
    <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.

     
  8. 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.

     

Publicar un comentario en la entrada al viejo estilo