Enlarge image with magnifying glass effect

Question

Enlarge image with magnifying glass effect

Navigation

#1 by (1 votes)

0

I would like the option to click on an image and with a magnifying glass increase the size with the function "zoomy () ". The problem is that if I click I open the image in Presentation mode to view it at full image size.

Code:

<!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>

This is how it would have to go: link

This image shows how it does NOT recognize the $ (...). zoomy function because it is not loading the plugin files.

The plugins files "zoomy.min.js" and "zoomy.js" I have downloaded and at the same level of files as the index.html

javascript jquery html imagen zoom

asked by omaza1990 20.11.2017 в 10:26

source

1 answer

To which element of the Recycler does the component that activates the event belong? Assign image by code to ImageView - Android? [duplicate]

score 1 · Accepted Answer

You are trying to load the plugin twice. Includes the normal version ( zoomy.js ) or the minimized version ( zoomy.min.js ) but not both.

From the development tools of your browser, check that the js file is loaded correctly.

Note also that in order for you to work like the example you point out, you should also include the corresponding .css file.

Here you have it working:

$(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="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>