code for larger image

Question

0.00/5 (No votes)

See more:

ASP.NET

what is the code for...
when we click on a particular image it display larger view

Posted 26-Feb-12 19:45pm

Member 8666927

Add a Solution

Comments

Member 8570559 27-Feb-12 1:52am

Check out
http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

Sergey Alexandrovich Kryukov 27-Feb-12 2:14am

Looks like an interesting and useful piece of code -- you could post it as an answer.
--S

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Abhinav S · Answer 1 · 2012-02-26T19:50:00

Solution 1

Have a look at image controls with zoom functionality -
ASP.NET Image Manipulation Examples: Adding, Zooming, Enlarging[^]
http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/Seadragon/Seadragon.aspx[^]

Ajax Zoom[^] is an interesting third party you could look at.

Posted 26-Feb-12 19:50pm

Abhinav S

Comments

Sergey Alexandrovich Kryukov 27-Feb-12 2:06am

Good information, my 5.

I still think my minimalistic sample has the benefits of explaining the basics ideas in a very compact and simple way. It also can be enough for a particular purpose -- please see.
--SA

Abhinav S 27-Feb-12 2:08am

Thank you SA.

Sergey Alexandrovich Kryukov · Answer 2 · 2012-02-26T19:58:00

I would advise to use jQuery library for a very simple solution. Something like that:

XML

<html>
<head>
    <title>...</title>
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>

    <img alt="Image" id="image" />

    <script type="text/javascript">

        $(document).ready(function() {
            imageElement = $("#image");
            imageElement.attr("src", "small.png");
            imageElement.hover(
                function() {
                    $(this).attr("src", "big.png");
                },
                function() {
                    $(this).attr("src", "small.png");
                }
            );
        });

    </script>

</body>
</html>

In this code sample, I assume you use a big version of the image, "big.png", and a small one, created by re-sampling a big one down, "small.png". At first, your element img does not show any image. When the document is loaded and its DOM is ready, a small one is installed and then the images are swapped on the events of hovering into and out of the image.

I did not use the click event, as you did not explain on what event should you make the image small again. If you want to use the event onclick, use the jQuery event click, with only one method argument (handler). Please see:
http://api.jquery.com/click/[^].

For understanding of the rest of this code, please see:
http://api.jquery.com/attr/[^],
http://api.jquery.com/category/selectors/[^],
http://api.jquery.com/category/events/[^],
http://api.jquery.com/ready/[^].

For more information on jQuery, please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://docs.jquery.com/Main_Page[^].

—SA