locked
image magnification in a modalpopupextender RRS feed

  • Question

  • User-125499312 posted

    i am looking for a jQuery or javascript image magnification plugin to use in a modalpopupextender

    with these requirements:

    1) it has to magnify a section with a mouse hover on top of the image - not next to the image

    2) it has to use the original image and use a larger image 

    thx for ur help!!

    Monday, June 3, 2019 4:41 PM

Answers

  • User665608656 posted

    Hi yzidell,

    According to your description, I recommend that you use the blowup.js plug-in which doesn't need a second larger image.

    Blowup is a jQuery plugin so you do need the jQuery library to get this running. But you could call the function with just one line of JS making it super easy to run.

    Once you add the JS files just call the blowup() function along with optional parameters for width/height, drop shadow, cursor size and zoom scale.

    You could refer to this link : https://github.com/paulkr/blowup.js

    Here is an example about this plug-in:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script src="../blowup.js-gh-pages/lib/blowup.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".zoom").blowup({ 
                    "width": 150,
                    "height": 150
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <div>
    
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <ajaxToolkit:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server"
                    Enabled="True" TargetControlID="Button1" PopupControlID="Panel1" X="100" Y="40">
                </ajaxToolkit:ModalPopupExtender>
            </div>
            <asp:Panel ID="Panel1" runat="server">
                <img src="../Images/original_img.jfif" class="zoom"   width="200" height="200"/>
            </asp:Panel>
        </form>
    </body>
    </html>

    The result of my work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 5, 2019 1:06 AM

All replies

  • User665608656 posted

    Hi yzidell,

    According to your description, I suggest you use the Magnify JS plug-in.

    This free plugin works on hover so the user doesn’t need to click anything.

    While hovering you’ll get a large magnifying bubble on top of the image which zooms into the picture, although it’s really just a higher-res version, and that's what you need.

    You could refer to this link: https://github.com/thdoan/magnify

    I have made an example about this function, you could refer to it as below:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="../thdoan-magnify-446495d/css/magnify.css" rel="stylesheet" />
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script src="../thdoan-magnify-446495d/js/jquery.magnify.js"></script>
        <script>
            $(document).ready(function () {
                $('.zoom').magnify();
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <div>
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <ajaxToolkit:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server"
                    Enabled="True" TargetControlID="Button1" PopupControlID="Panel1" X="100" Y="40">
                </ajaxToolkit:ModalPopupExtender>
            </div>
            <asp:Panel ID="Panel1" runat="server">
                <img src="../Images/original_img.jfif" class="zoom" data-magnify-src="../Images/larger_img.jfif" />
            </asp:Panel>
        </form>
    </body>
    </html>

    The result of my work demo:

    Best Regards,

    YongQing.

    Tuesday, June 4, 2019 2:53 AM
  • User-125499312 posted

    hi Yongqing Yu,

    thanks for responding.

    i am looking for a magnifier that does NOT need a second larger image.

    ANY SUGGESTIONS?

    thx

    Tuesday, June 4, 2019 1:56 PM
  • User409696431 posted

    Your original post says " it has to use the original image and use a larger image".   You might want to edit it if you meant "not use a larger image".

    Tuesday, June 4, 2019 8:06 PM
  • User-125499312 posted

    you are correct - my mistake

    Tuesday, June 4, 2019 8:07 PM
  • User665608656 posted

    Hi yzidell,

    According to your description, I recommend that you use the blowup.js plug-in which doesn't need a second larger image.

    Blowup is a jQuery plugin so you do need the jQuery library to get this running. But you could call the function with just one line of JS making it super easy to run.

    Once you add the JS files just call the blowup() function along with optional parameters for width/height, drop shadow, cursor size and zoom scale.

    You could refer to this link : https://github.com/paulkr/blowup.js

    Here is an example about this plug-in:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script src="../blowup.js-gh-pages/lib/blowup.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".zoom").blowup({ 
                    "width": 150,
                    "height": 150
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <div>
    
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <ajaxToolkit:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server"
                    Enabled="True" TargetControlID="Button1" PopupControlID="Panel1" X="100" Y="40">
                </ajaxToolkit:ModalPopupExtender>
            </div>
            <asp:Panel ID="Panel1" runat="server">
                <img src="../Images/original_img.jfif" class="zoom"   width="200" height="200"/>
            </asp:Panel>
        </form>
    </body>
    </html>

    The result of my work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 5, 2019 1:06 AM