0

Desearía que sobre una imagen aparecía la opción de hacer click y con una lupa aumentar el tamaño con la función "zoomy()". El problema viene que si hago click se me abre la imagen en modo Presentación para visualizarla a tamaño de imagen completa.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Index.html</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
        <script type="text/javascript" src="zoomy.min.js"></script>
        <script type="text/javascript" src="zoomy.js"></script>
        <script type="text/javascript">
        $(function () {
            $('.zoom').zoomy();
        });
        </script>
    </head>

    <body>
        <center>
            <a href="http://www.losminions-lapelicula.es/images/shareimage.jpg" class="zoom"><img src="http://www.losminions-lapelicula.es/images/shareimage.jpg" width="320px" height="240px" /></a>
        </center>
    </body>
</html>

Así es cómo tendría que salir: https://www.jose-aguilar.com/scripts/jquery/zoomy/

introducir la descripción de la imagen aquí

Esta imagen muestra como NO reconoce la función $(...).zoomy debido a que no está cargando los ficheros del plugin.

Los archivos del plugins "zoomy.min.js" y "zoomy.js" los tengo descargados y al mismo nivel de ficheros que el index.html

2
  • 1) prueba con las 2 imagenes locales - 2) has descargado o creado los .js y .css del ejemplo ? - 3) pone el script al final del documento
    – vancloud
    Commented el 20 nov. 2017 a las 9:55
  • He probado imágenes locales, he probado a incluir el código .JS externo (con enlace al fichero en el head) e interno con las etiquetas <script>.
    – omaza1990
    Commented el 20 nov. 2017 a las 9:58

1 respuesta 1

1

Estás tratando de cargar el plugin dos veces. Incluye la versión normal (zoomy.js) o la minimizada (zoomy.min.js) pero no las dos.

Desde las herramientas de desarrollo de tu navegador comprueba que se carga el fichero js correctamente.

Ten en cuenta también que para que te funcione como el ejemplo que apuntas deberías incluir también el archivo .css correspondiente.

Aquí lo tienes funcionando:

$(function () {
    $('.zoom').zoomy();
});
<link href="https://www.jose-aguilar.com/scripts/jquery/zoomy/zoomy.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://www.jose-aguilar.com/scripts/jquery/zoomy/zoomy.min.js"></script>

<center>
    <a href="https://cdn.pixabay.com/photo/2024/01/02/12/28/boat-8483163_1280.jpg" class="zoom"><img src="https://cdn.pixabay.com/photo/2024/01/02/12/28/boat-8483163_1280.jpg" width="320px" height="240px" /></a>
</center>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.