Código de JQuery - Efecto lupa al pasar el ratón por encima de una imagen

Imágen de perfil

Efecto lupa al pasar el ratón por encima de una imagengráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 26 de Mayo del 2016 por Xavi (Creado el 31 de Octubre del 2013)
8.764 visualizaciones desde el 31 de Octubre del 2013. Una media de 56 por semana
Simple código que muestra como mediante jquery se puede visualizar el zoom de una imagen al ir pasando el ratón por encima.
Funciona con IE 8 y superiores, Chrome, Firefox, Safari y Opera.

Versión 1
estrellaestrellaestrellaestrellaestrella(2)

Actualizado el 15 de Junio del 2016 (Creado el 31 de Octubre del 2013)gráfica de visualizaciones de la versión: Versión 1
8.765 visualizaciones desde el 31 de Octubre del 2013. Una media de 56 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo <a href="/codigo/archivos3/jquery_lupa.php" class="link2" target="_blank">aquí</a>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>Ampliar la parte de la imagen por donde pasa el ratón</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 
    <style>
    #img            {cursor:crosshair;border:1px solid #ccc;}
    #square         {position:absolute;width:100px;height:100px;border:1px solid;cursor:crosshair;}
    #imgSmall       {width:200px;height:200px;overflow:hidden;border:1px solid #000;}
    #imgSmall img   {position:relative;}
    </style>
 
    <script>
    // iniciamos un a vez se ha cargado el DOM de la pagina
    $(document).ready(function(){
        imagen="http://www.lawebdelprogramador.com/usr/147000/147685/5256d200ef2c2-biblioteca-del-programador.png";
 
        // iniciamos una vez se ha cargado la imagen
        $('#img').attr("src", imagen).load(function(){
            $("#imgSmall img").attr("src",imagen);
            // obtenemos informacion sobre la imagen como:
            // - la posicion en la pantalla (top,left)
            // - la anchura y altura
            var imgPosition=$("#img").position();
            imgTop=imgPosition.top;
            imgLeft=imgPosition.left;
            imgHeight=$("#img").height()+imgTop;
            imgWidth=$("#img").width()+imgLeft;
 
            // Aumentamos el tamaño de la imagen ampliada al doble de su tamaño
            $("#imgSmall img").height(parseInt($("#img").height()*2));
            $("#imgSmall img").width(parseInt($("#img").width()*2));
 
            // evento que se ejecuta al mover el raton por encima de la imagen
            $("#img").mousemove(function(event){
                // posicionamos el recuadro selector en el centro del raton
                mostrarImagen(event);
            });
 
            // evento que se ejecuta cuando nos movemos por dentro del recuadro
            // selector
            $("#square").mousemove(function(event){
                // revisamos que estemos dentro de la imagen que deseamos aumentar
                if(event.pageY>imgTop && event.pageY<imgHeight && event.pageX>imgLeft && event.pageX<imgWidth)
                {
                    mostrarImagen(event);
                }
            });
 
            //
            function mostrarImagen(event)
            {
                // Posicionamos el recuadro en la posicion del raton
                $("#square").css({"top":event.pageY-50, "left":event.pageX-50});
 
                // Preparamos la posición de la imagen a aumentar
                y=-((event.pageY-imgTop)-50)*2;
                x=-((event.pageX-imgLeft)-50)*2;
                $("#imgSmall img").css({"top":y, "left":x});
            }
        });
    });
    </script>
</head>
 
<body>
    <h1>Ampliar la parte de la imagen por donde pasa el ratón</h1>
 
    <!-- imagen a tamaño normal -->
    <div>
        <img src="" id="img">
        <div id="square"></div>
    </div>
 
    <!-- miniatura donde se visualizar la imagen ampliada -->
    <div id="imgSmall">
        <img src="">
    </div>
 
    <p><a href="http://www.lawebdelprogramador.com/">http://www.lawebdelprogramador.com/</a></p>
</body>
</html>



Comentarios sobre la versión: Versión 1 (2)

Jose maria
03 de Noviembre del 2013
estrellaestrellaestrellaestrellaestrella
Hola Xavi:
Al ver tu código Efecto lupa al pasar el ratón por encima de una imagen me acordaba del código que compartía con un usuario en vuestro mismo foro (LWP).
Viene a ser lo mismo que el que publicas pero puro javascript (sin jQuery).
Por si es de tu interés, lo tienes en http://www.digitaleando.com/taller/lupa-imagen.html

Es archivo único. que te será fácil comentarlo.

Por cualquier duda, no dudes en contactar conmigo.

Saludos
Responder
adrian
18 de Marzo del 2016
estrellaestrellaestrellaestrellaestrella
Se podrá lograr ese efecto en lugar de una imagen una película flash?
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2524